Chrome开发者控制台调试LWC无法找到组件需开启哪些设置？

一、开启Salesforce端LWC调试模式 #

• 进入Salesforce后台设置，在顶部快速查找框输入调试模式，点击匹配的菜单选项
• 在展示的用户列表中定位到你的开发用账号，勾选启用调试模式复选框后保存设置

开启调试模式会禁用LWC代码的压缩、混淆逻辑，组件名称会在开发者工具中正常显示，不会出现随机生成的混淆字符

二、Chrome开发者工具配置 #

• 打开Chrome开发者工具，点击右上角齿轮图标进入设置页
• 在「实验性」分类中开启「Web Components调试」选项，可提升自定义LWC组件节点的识别效率

三、查看Wire服务响应的方法 #

• 选中页面中目标LWC组件的DOM节点，在控制台输入$0.component即可获取组件实例，所有Wire返回的结果都会保存在实例的对应属性中
• 也可以在Wire回调逻辑中添加临时日志输出，参考代码：

import { wire } from 'lwc';
import getSampleData from '@salesforce/apex/SampleController.getSampleData';

export default class SampleComponent extends LightningElement {
    @wire(getSampleData)
    wiredSampleData({ data, error }) {
        // 临时日志，调试完成后可删除
        console.log('Wire响应数据：', data, '报错信息：', error);
        if(data) {
            // 原有业务逻辑
        }
    }
}

• 若已安装Salesforce Lightning Inspector扩展，可直接在开发者工具的「Lightning」标签页定位目标组件，直接查看所有Wire属性的实时值，无需额外添加日志

内容的提问来源于stack exchange，提问作者inbox outbox