调试 Lightning Web 组件

Lightning Web 组件使用标准 HTML 和 JavaScript 构建，在桌面上，它们在各种受支持的浏览器中运行。您可以使用标准浏览器和 JavaScript 调试工具（如 Chrome DevTools）在开发过程中调试组件。若要查看特定于移动设备的功能，请使用移动设备或虚拟设备内部版本。

在开发过程中运行和调试组件的最简单方法是创建一个 Lightning 页面并将您的组件添加到其中。然后在您喜欢的浏览器中加载 Lightning 页面，并使用您喜欢的检查和调试工具。LWC 调试针对 Chrome DevTools 进行了优化。

注意

此内容改编自 Salesforce 首席开发人员布道师 René Winklemeyer 的博客文章调试您的 Lightning Web 组件。

Lightning 组件的执行模式

Lightning 组件框架以以下两种模式之一执行：生产模式和调试模式。

让我们看一下执行模式之间的差异。

生产模式

默认情况下，框架在生产模式下运行。此模式针对性能进行了优化。

在生产模式下，JavaScript 代码经过优化和“缩小”，以将代码的大小减小到尽可能少的字节。生产模式删除了换行符、空格、制表符和代码注释，并缩短了函数和变量的名称。由于此过程，提供给浏览器的 JavaScript 代码被模糊处理。

注意

缩小是性能优化，而不是知识产权保护。缩小的代码很难阅读，但未加密或以其他方式阻止查看。

在生产模式下可见的代理对象

生产模式还对某些事情使用 JavaScript 代理，例如通过装饰器 、 和 提供的数据。和修饰属性被视为只读属性。通过使用 JavaScript 代理，框架可以确保无法修改这些属性。对于修饰的属性，框架使用代理来观察数据突变，以便它可以对更改做出反应。在生产模式下进行调试时，你看到的是代理对象，而不是你感兴趣的对象。@api@wire@track@api@wire@track

Lightning Locker 和 Lightning Web Security 在标准 Web API 上使用代理对象来防止对 DOM 中的全局对象进行更改。

生产模式调试

您可以使用 Chrome DevTools 中的“漂亮打印”选项在生产模式下获得最少的代码格式。单击“源”面板底部的漂亮打印图标以打开应用了格式的新选项卡。{}

由于变量和函数的名称已更改，代码仍然不完全可读，但对于第一次检查来说是很好的。您可以在 Chrome DevTools 中设置断点、检查值以及使用调试器。

以下是默认情况下在生产模式下看到的内容，使用 lwc-recipes 中的示例代码。在此示例中，第 1 行延伸超过 1200 个字符。

以下是选择“漂亮的打印件”后在生产模式下看到的内容。

调试模式

在调试模式下，JavaScript 代码更易于阅读和调试。在 DevTools 中看到的 JavaScript 源代码与未编译的源代码类似。调试模式还为某些警告和错误添加了更详细的输出。

组件代码在生产模式和调试模式下编译。在调试模式下，编译的 JavaScript 代码不会优化或缩小。LWC 编译器可以生成支持更高级调试功能的信息。

为用户帐户启用调试模式后，您会看到这些更改。

  • 顶部会出现一个横幅，提醒您调试模式已打开，并且会减慢速度。
  • “体验页面时间 （EPT）”指标显示在页眉中。它以绿色、橙色或红色显示，以指示页面加载时间的运行状况。
  • 页眉中的存储指标显示页面存储的千字节数据，以指示内存使用情况和缓存。该指标以绿色、橙色或红色进行类似的颜色编码。

我们在生产模式下看到的相同的 lwc-recipes 示例代码，在启用调试模式时未缩小时，看起来不那么神秘。它更具可读性，并显示函数和变量的名称。

在 Salesforce 中启用调试模式

启用调试模式，以便更轻松地调试 JavaScript 代码。仅对主动调试 JavaScript 的用户启用调试模式。对于启用了调试模式的用户，Salesforce 速度较慢。

要为组织中的用户启用调试模式，请执行以下操作：

  1. 在 Salesforce 中，从“设置”中输入“快速查找”框，然后选择“调试模式用户”。Debug Mode启用了调试模式的用户在“调试模式”列中有一个复选标记。
  2. 在用户列表中，找到需要启用调试模式的任何用户。如有必要，请使用标准列表视图控件来筛选组织的用户。
  3. 选中要为其启用调试模式的用户旁边的复选框。
  4. 单击启用。

提示

如果在 JavaScript 文件中只看到几行代码，则未启用调试模式。如果启用调试模式无法重置代码编辑器中的代码，请执行硬重新加载。打开 DevTools 后，右键单击浏览器的“重新加载”按钮，然后单击“硬重新加载”。

若要为用户禁用调试模式，请按照上述步骤操作，然后单击“禁用”而不是“启用”。

在开发过程中禁用缓存

在沙盒或 Developer Edition 组织中禁用安全和持久的浏览器缓存设置，以便在不清空缓存的情况下查看任何代码更改的效果。

缓存设置通过避免与服务器的额外往返来提高页面重新加载性能。

警告

禁用安全和持久的浏览器缓存会对 Lightning Experience 的性能产生重大负面影响。始终在生产组织中启用该设置。

  1. 在“设置”中，输入“快速查找”框，然后选择“会话设置”。Session
  2. 取消选中“启用安全且持久的浏览器缓存以提高性能”复选框。
  3. 点击保存。

禁用浏览器缓存设置后，您可以重新加载页面以测试代码更改，而无需清除缓存。我们建议您在调试代码后重新启用浏览器缓存设置。

使用 Chrome DevTools 进行调试

要调试 Lightning Web 组件代码，请使用 Chrome DevTools。

Google Chrome 包含一整套出色的 Web 开发工具，即 Chrome DevTools。这些工具非常适合调试 Lightning Web 组件。

首先，加载可以运行 Lightning 组件的最简单页面。然后打开 DevTools。

  • 在 Windows 和 Linux 上，在 Google Chrome 浏览器中按下 Control-Shift-I。
  • 在 Mac 上，按下 Option-Command-I。
  • 在任何平台上，按 F12 或在页面中单击鼠标右键，然后选择“检查”。

若要快速查找失败的代码行，请在“源”面板中启用“DevTools 调试器面板中的”暂停所有异常“选项，然后再运行代码。

当您启用异常暂停时，浏览器会在由 Salesforce 代码、其他库代码和组件代码引起的异常时停止。组件引发的异常可能会在框架代码中被捕获。

要了解有关在 Google Chrome 上调试 JavaScript 的更多信息，请参阅 Google Chrome DevTools 网站。

请查看 Trailhead 上的 Lightning Web 组件故障排除，了解将 Chrome DevTools 与 Lightning Web 组件结合使用的分步说明。

在“源”面板中查找代码

在 Chrome DevTools 的“源”面板中，在文件夹的“页面”窗格中找到您的 Lightning Web 组件代码。在这里，您可以看到默认命名空间文件夹中的组件。lightning/n/modulesc

提示

有关在启用 LWS 的情况下进行调试的信息，请参阅在启用了 LWS 的组织中调试组件。

启用自定义格式化程序

启用自定义格式化程序时，可以使用更多调试功能。

在 Chrome DevTools 中，选择“设置”（） |首选项 |控制台 |启用自定义格式化程序。

Lightning Web 组件的自定义格式化程序允许您查看代理对象中包含的实际值。虽然在调试时看不到代理对象，但它们仍然存在并阻止修改。自定义格式化程序可以在不删除代理的情况下查看代理。

提示

如果在组织中启用了 Lightning Web Security，则自定义格式化程序还允许您在 DevTools 控制台中查看其他消息和筛选的调用堆栈。请参阅在启用了 LWS 的组织中调试组件。

来自 LWC 引擎的控制台警告

在调试模式下，Lightning Web 组件引擎会识别仅在运行时才能检测到的不良模式，并将其打印为控制台警告。

最佳做法是使用调试模式在组织中开发 Lightning Web 组件。您可以在开发时使用 LWC 引擎的反馈来改进代码。

仅筛选您自己的组件的一种方法是删除“info”日志级别以隐藏堆栈跟踪。

调试线适配器

使用调试模式对具有未缩小的 JavaScript 和自定义格式的电线适配器进行故障排除。

调试电线适配器的最简单方法是通过 Chrome DevTools。

调试电线适配器：

  1. 启用调试模式。
  2. 在 Chrome DevTools 中，启用自定义格式化程序。

当您通过 接收数据时，您的数据将绑定到函数或属性。@wire

检查有线功能

如果使用有线函数，则可以根据 Chrome DevTools 的 Sources 面板中的解构和属性进行调试。dataerror

或者，您可以使用下一节中介绍的方法调试有线函数。

检查有线属性或方法

如果在组件上使用有线属性或方法，则可通过自定义对象格式化程序获取调试信息。

每个有线属性或方法都返回具有以下形状的信息：

  • data– 电线适配器返回的最后一个值
  • config– 报告给电线适配器的最后一个配置
  • context– 仅适用于上下文线适配器
  • isDataProvisionedForConfig– 一个布尔值，用于返回线路适配器配置的数据是否与配置相对应。如果报告了配置，则返回 .true

提示

lwc-recipes 存储库具有使用有线属性的 apexWireMethodToProperty 组件。

使用或检查呈现的 LWC 自定义元素检查组件实例。例如，单击 Chrome DevTools 的“元素”面板中的元素。this<c-apex-wire-method-to-property>

单击该元素后，打开“控制台”面板并输入 $0 以返回调试信息。

在启用了 LWS 的组织中调试组件

当您在启用了使用 Lightning Web Security 的组织中调试 Lightning Web 组件时，您会注意到与未启用 Lightning Web Security 的组织相比存在一些差异。

首先，确保启用调试模式以获得最佳调试体验。

对于由 LWS 沙盒处理的代码，调试技术通常是相同的，但让我们来看看一些差异。

LWS 下 LWC 调试的源代码位置

从 24 年冬季开始，当您使用 Chrome DevTools 调试 Lightning Web 组件时，您的组件源代码将显示在文件夹内的“源”面板中。此位置在“源”面板中的“查找代码”中进行了介绍。无论启用 Lightning Locker 还是 LWS，位置都是相同的。lightning/n/modules

以前，当您的 Lightning Web 组件在启用了 Lightning Web Security 的组织中运行时，一个特殊的文件夹会将您的组件文件单独组织在命名空间文件夹下。lws

在这里，您可以在当前页面上看到命名空间及其组件。启用了 LWS 的文件与源映射一起显示。ccompositionBasics.js

源代码映射使沙盒代码看起来与组件的原始源代码相似。您可以检查它、使用断点等。您必须启用调试模式才能查看源映射并启用断点。

提示

如果“源”面板中的代码看起来与您的原始源代码不同，请确保已启用在 Chrome DevTools 中启用 JavaScript 源映射设置。默认情况下，它处于启用状态。

如果已在调试器中，还可以在“页面”窗格中找到源文件。右键单击并选择在边栏中显示。

此处，调试器停止，但未在侧边栏中选择该文件。当您选择“在边栏中显示”时，将选择正确的文件。compositionContactSearch.js

LWS 下 Aura 组件调试的源码位置

调试 Aura 组件时，源代码将显示在“源”面板中，该子文件夹位于以组织命名的文件夹内。lightning/n/components

文件夹的确切位置可能因浏览器和会话而异，还取决于您使用组件的方式。如果您没有立即看到该文件夹，请展开节点，直到找到它。lightning/n/components

此示例显示了 lwc-recipes 中的 Aura Interop 组件。顶部文件夹名称与包含该组件的 Lightning 页面的名称匹配。突出显示的文件用于调试。Aura_Interoperability

控制台堆栈跟踪

控制台中的堆栈跟踪显示会过滤掉 LWS 调用，以便更清楚地了解组件中的错误。LWS 调用包含在其自己的文件夹 （1） 中。

若要查看筛选的堆栈跟踪，请启用自定义格式化程序，如启用自定义格式化程序中所述。

控制台消息

控制台消息在控制台方法（如 和 ）中显示有关 LWS 的信息。例如，当在沙盒的一侧而不是另一侧跟踪对象突变时调用。console.warnconsole.infoconsole.warn

要查看 LWS 控制台消息，请启用自定义格式化程序，如启用自定义格式化程序中所述。

注意

LWS 更改控制台消息的源代码行号和源代码文件。控制台消息似乎来自 Salesforce 文件，而不是来自记录消息的组件的 JavaScript 文件。此行为是由于浏览器实现导致的已知问题，因此我们正在等待浏览器供应商实现修复。aura_proddebug.js

调试移动组件

您可以使用 Chrome DevTools 中的设备模式等工具，在桌面浏览器中测试移动基础知识，例如小屏幕尺寸和响应式设计。要查看特定于移动设备的功能，请在真实移动设备上使用 Salesforce Mobile 应用程序。

借助 Lightning 移动版，桌面版和移动版 Salesforce 提供相同的用户界面：Lightning Experience。这意味着，虽然它不能替代在实际移动设备上进行全面测试，但您可以使用桌面浏览器来运行和调试移动 Lightning 应用程序和组件的许多方面。

借助 Chrome DevTools 设备模式，您可以模拟移动设备的以下方面：

  • 屏幕尺寸
  • 设备方向
  • 位置更改
  • 移动设备 CPU 限制
  • 无线网络限制

要了解有关设备模式的更多信息，请参阅 Google Chrome DevTools 网站上的在 Chrome DevTools 中使用设备模式模拟移动设备。