Debug Wire Adapters

大家好，今天我们来看一下Lightning Web Components里有关“电线适配器”调试的内容。这个消息，我会尽量用简单的话讲清楚，方便你边听边理解。 首先，要想让电线适配器的调试信息看起来清楚好用，我们需要做两步准备：一是开启调试模式，二是在Chrome的开发者工具里启用一个叫做“自定义格式器”的功能。启动之后，你在控制台查看有线属性时，看到的不再是难以阅读的对象结构，而是特别整理过的结构化视图。 这个视图会把信息分成几块展示给你：第一块是“数据”，也就是这个有线属性最后一次返回的结果；第二块是“配置”，记录了最后一次报告的配置情况；还有“上下文”，这个只对特定类型的“上下文适配器”有用；最后还有一个叫“isDataProvisionedForProtect”的属性，它告诉你数据是否和你当前的配置真正匹配。这样一看，你就很容易知道问题出在配置还是数据本身了。 具体怎么检查呢？非常简单。你打开浏览器，在“元素”面板里先点击选中你的组件元素。然后，把目光移到控制台，直接输入“$0”并回车，刚才选中元素对应的有线属性调试信息就会显示出来。 如果你想深挖的是有线函数，也就是用“@wire”装饰器声明的函数，那就可以转到“源”面板。在这里给对应的代码打上断点，运行之后，重点关注解构出来的“data”和“error”属性，就能判断调用是否成功、返回了什么。 好，接下来我要特别提醒一个大家经常踩的坑：如果传给线适配器的反应参数是未定义的，电线根本不会触发。这时你看“data”和“error”，它们都会一直是未定义。所以一定要保证所有用美元符号当作前缀的配置值都有初始值。最常见的情况就是“@api recordId”，它是在记录页面上下文中才会被赋予正确值的。如果这个值没传进来，整个电线就不会启动，自然看不到任何数据。 总的来说，先开启调试模式和自定义格式器，再利用元素面板选中组件、控制台输入“$0”来查看结构化信息；用断点调试有线函数时注意检查解构的data和error；更要时刻警惕反应参数未定义这个陷阱。这样，你调试电线适配器就会顺手得多。 好，这部分内容就讲到这儿，希望大家在动手实践时能少走弯路。