DEX475

课程介绍

同学们，现在我们来聊聊LWC的调试。LWC用的是标准的HTML和JavaScript，所以我们最常用的调试工具就是Chrome的开发者工具，非常方便。 在LWC里，代码有两种执行模式：一种是生产模式，这种模式下代码是压缩过的，而且会用代理对象，想看明白代码得靠“漂亮打印”；另一种是调试模式，代码是未经压缩的、可读的，还能看到EPT和存储指标这些性能信息。 说到调试，你还要注意HTTP缓存。缓存的有效期是5分钟，并且在重新验证时就会停止。也就是说，如果你改了代码，最坏的情况下可能要等差不多10分钟才能看到最新效果。 那怎么绕开这个缓存，直接看到可读的代码呢？你可以在“设置”里为每个用户单独启用“调试模式”，这样就能跳过缓存，拿到的总是最新的、未压缩的代码，调试起来舒服多了。 在调试数据交互的时候，我们经常需要检查电线适配器的状态。这时可以用自定义格式器，还有一些完全免费的控制台实用程序，直接在控制台里就能很方便地查看适配器返回的数据。 另外，如果你的组织启用了Lightning Web Security，也就是LWS，那么调试时可能会有一点点小差别，需要多留意一下。 最后，要调试移动端的效果，很简单，直接用Chrome的设备模式。你可以在里面切换屏幕尺寸、调整方向，还能模拟不同的CPU速度和网络环境，这样不用真机就能做好移动端的测试了。 好了，这些就是LWC调试的核心点，你只要把这些用起来，调试就会变得很顺手。

课程章节

本课程共有 4 个章节

• 1

  Production Mode vs Debug Mode

  第 379 页

  同学们，今天咱们聊聊Lightning Web Components里的两种执行模式，这俩兄弟虽然都是跑代码，但目的完全不一样。 第一种，叫，生产模式，，是系统默认的。你可以把它想象成打包好的快递，所有不必要的包装都去掉了，目的就是快、省空间。具体来说，它会压缩你的JavaScript代码，像删除空格、注释，还把变量名缩得短短的，比如把“customerName”缩成“a”。这么一搞，文件小了，加载快了，但读起来就费劲。而且它还用代理对象把带有@api、@wire、@track这些装饰器的属性包起来，再加上底层的安全保护，你想在调试工具里直接看真实值就很难。就算你在Chrome开发者工具里点一下那个“漂亮打印”的按钮——就是看起来像花括号`{}`的图标——它也只能帮你把代码格式排整齐，那些被缩短的名字还是老样子，认不出来。 那咱们开发时想调试咋办？就轮到第二种模式了，叫，收件箱模式，（有时候也叫调试模式）。这个是为每个用户单独开启的，你一启用，它会给你提供没有压缩的代码，变量名还是你写的那种可读的形式。同时界面上会有醒目的橙色横幅提醒你正处在调试模式，还会在组件编辑面板里显示EPT指标和健康状况的颜色标记。不过代价就是代码跑得慢一些——因为没压缩嘛。记住，它是专为你主动调试的时候用的，平时别一直开着，影响性能。如果你已经启用了收件箱模式，但代码看起来还是那短短几行压缩过的，那就执行一次硬重新加载，清掉缓存就好。 简单总结：生产模式是“省心模式”，小而快但难读；收件箱模式是“探照灯模式”，清晰可调但只限调试用。这样理解了吧？有什么问题随时问。

  ▶ 播放视频 查看详情
• 2

  HTTP Caching & Enabling Debug Mode

  第 380 页

  好，我们来看这一页幻灯片，它讲的是为什么在 Salesforce 里你改了 Lightning Web Components 的代码，有时候不会马上看到效果。 简单来说，，罪魁祸首就是“HTTP 缓存”，。浏览器会把组件文件存下来，这样下次打开更快，但也导致新代码不能立刻呈现。 具体来说，服务器返回的 `Cache-Control` 头里设置了一个 ，`max-age=300`，，也就是 5 分钟的新鲜期。在这 5 分钟之内，浏览器直接用自己的缓存，根本不会去问服务器。 更麻烦的是，后面还跟着一个 ，`stale-while-revalidate=300`，。什么意思呢？就是当那 5 分钟新鲜期过了之后，如果又有请求，浏览器会先返回手里这份“旧”的缓存给用户，同时在后台悄悄去服务器取最新版本。这查询和更新期间，旧内容又被多服务了最多 5 分钟。 所以加起来，你改完代码，最坏的情况下，要等 ，10 分钟， 才会在浏览器里看到效果。这个行为在所有 Salesforce 支持的浏览器上都一样——只有一个例外：Safari。Safari 不吃这一套，它有自己内部的机制。 接下来说说组件是怎么被请求的。流程里，首先会去一个类似 `/components/uid=LATEST` 这样的地址，服务器会返回一个 ，302 重定向，，浏览器再跳转到一个带有具体版本号的 URL 上去拉取文件。这就是为什么每次部署新版本，最后都会指向不同的文件地址。 如果你用 ，收件箱模式，，像在移动端 App 里，那这套缓存机制就完全不生效了，它会直接获取最新内容。 那开发的时候，等 10 分钟太慢了怎么办呢？你可以给自己开调试模式。去 ，“设置”， 里搜索 ，“调试模式用户”，，把你自己的用户加进去，然后点“启用”。启用后，用户旁边会有一个复选标记，代表你已经在调试模式了。调试模式下，很多缓存都会绕开，你的代码修改马上就能看到。 有的人可能会想，那我直接在会话设置里把“持久浏览器缓存”关掉不是更省事？确实，在开发沙箱里，你可以关掉这个选项，但是请注意，，这会严重影响性能，，会让整个页面加载变慢很多。而且，这个设置只对开发环境生效，一旦部署到生产环境，你必须把它重新打开，不然用户会感觉系统很慢。最关键的一点，这个会话设置里的缓存开关，和前面说的组件 HTTP 缓存完全是两码事，它对那个 10 分钟的延迟没有任何影响，别弄混了。 总结就是：开发阶段想立即看到改动，就，用调试模式，；生产环境那 10 分钟延迟是故意的，为了性能，你得心里有数，不要误以为部署没成功。

  ▶ 播放视频 查看详情
• 3

  Debug Wire Adapters

  第 381 页

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

  ▶ 播放视频 查看详情
• 4

  LWS Debugging & Mobile Debugging

  第 382 页

  同学们，今天我们来聊聊 Lightning Web Components 在调试时的一些小细节。听起来可能有点技术，但其实很简单，我讲完你就明白了。 首先，LWS 调试和我们平常做的标准调试基本是一样的，你该怎么打断点、看变量，方法都不变。但要注意，因为 LWS 背后有个虚拟沙箱，所以会有一些很细微的不同。为了调试起来顺手，你一定记住——，先把调试模式打开，，这样你会得到最舒服的体验。另外，具体有哪些 LWS 特有的限制和测试流程，可以去看《Lightning Components 安全指南》，里面写得很清楚，这里就不展开了。 接下来我们说移动端调试，这部分分两层，非常实用。第一层是，桌面模拟，，就在 Chrome DevTools 里用设备模式。这个模式能让你模拟不同手机、调整横竖屏、改定位，还能调节 CPU 和网络快慢，完全覆盖响应式设计的需求。第二层是，真实设备测试，，你得在手机上装 Salesforce Mobile 应用，直接用真机跑。这样才能测到硬件相关的功能，比如摄像头、联系人这些，模拟器做不到。 还有一个好消息：Lightning on Mobile 用的就是桌面的 FLEX UI，布局逻辑完全一样。所以桌面调试做完，大部分移动适配问题就已经解决了，省心吧。 最后说怎么开设备模式，DevTools 左上角有个“切换设备预设”的按钮，点一下就行，快捷键是 Alt + M，里面预设了一大堆手机和平板，你也可以自己调配置，非常灵活。 好了，就这些，是不是挺简单的？有问题随时问我。

  ▶ 播放视频 查看详情