调试 PWA Kit 应用程序
漏洞和性能瓶颈是 Web 应用程序开发中不可避免的一部分。借助 PWA Kit，可以使用各种工具和技术深入了解这些问题，从而仔细检查应用程序。
在遵循本指南中更有针对性的建议之前，请先尝试以下一般故障排除步骤：
- 在启动本地开发服务器之前，请仔细检查是否正在运行受支持的 Node 版本（请参阅入门指南）。
- 确认开发服务器仍在运行，并且该端口尚未被其他进程接管。
- 代码更改后，在重新加载浏览器之前确认消息
HTTP development server listening出现在终端中。 - 在浏览器控制台和终端中查找错误。
- 使用浏览器的开发者工具查找网络错误响应。（在 Chrome 的 DevTools 中，转到网络选项卡。）
- 为了帮助识别语法错误和拼写错误，请运行代码格式化程序和 linter。Retail React App 中为 Prettier（代码格式化程序）和 ESLint (linter) 提供了配置文件。
- 检查计算机的防病毒和防火墙设置是否有任何阻止代码运行或阻止网络请求的内容。
- 要识别和分析性能问题，请使用 Chrome 的 DevTools 中的 Profiler。有关更多信息，请参阅 Google 提供的指南：分析运行时性能。还可以为 Chrome 安装 React 开发人员工具扩展，以获取另一个 Profiler 选项卡，可以在其中看到类似的信息，但在组件级别。
可以将两个特殊的查询参数添加到商务应用程序提供的任何 URL 中，以帮助调试服务器端代码的问题。
__server_only查询参数停止hydration 进程，以便页面在浏览器中的显示与服务器端渲染后完全一样。查看页面的服务器端渲染版本不仅有助于解决服务器端渲染问题，还有助于解决 SEO 问题，因为搜索引擎会抓取此版本的页面。
__pretty_print查询参数为 __PRELOADED_STATE__ 对象添加格式以使其更具可读性。该对象在 hydration 开始之前提供了应用程序状态的快照，因此有助于调试以查看它是否包含所期望的值。要查看对象的内容，请加载应用程序，查看页面的源代码，然后搜索 __PRELOADED_STATE__。
__PRELOADED_STATE__ 对象包含在应用程序开始在服务器端运行时最初请求的页面 HTML 源代码中的 <script> 标记中。__PRELOADED_STATE__ 对象包含从 getProps 函数返回的序列化值（包括附加到 _app 组件和页面组件的 getProps 版本）。
默认情况下，应用服务器会在终端中显示控制台消息，但不允许观察代码执行情况。此限制可能难以调试在服务器端（或本地计算机）呈现页面的代码。
为了增强调试，可以使用备用命令启动本地开发服务器，此命令作为可附加调试器节点内的检查流程运行。（有关更多详细信息，请参阅节点文档。）
可以将许多流行浏览器和文本编辑器中包含的调试器附加到 Node 的检查器进程。以下是 Google Chrome 和 Visual Studio Code 的说明。
- 打开终端。
- 前往项目目录。
- 使用
npm run start:inspect开始本地 dev 服务。 - 要确认调试器正在侦听，请在终端输出中查找“调试器正在侦听”消息。
- 打开 Chrome 并输入 URL chrome://inspect。
- 点击打开 Node 的 DevTools。
- DevTools 在新窗口中打开。
- 要确认调试器已附加，请在终端输出中查找“已附加调试器”消息。
- 设置断点，添加
debugger语句等。 - 从本地开发服务器的 Chrome 加载页面。
- 使用专用窗口进行调试。
现在即可跟踪服务器端代码的执行！
要了解有关在 DevTools 中使用断点进行调试的更多信息，请参阅 Google 提供的指南：调试 JavaScript。
- 在 Visual Studio Code 中打开项目文件。
- 从菜单栏中，点击终端 > 新终端。
- 使用
npm run start:inspect开始本地 dev 服务。 - 打开命令面板。Windows 的快捷方式：
Ctrl+Shift+P。Mac 的快捷方式：Command+Shift+P。 - 键入以下命令：“Debug
to Node Process.” - 将出现 Node 进程列表。选择列表中的第一个。
- 要确认调试器已附加，请在终端输出中查找“已附加调试器”消息。
- 设置断点、添加调试器语句等。
- 在 Web 浏览器中从本地开发服务器加载页面。
- 使用 Visual Studio Code 中的集成调试器进行调试。
现在即可在 Visual Studio Code 中跟踪服务器端代码的执行！
为避免重复附加 Node 进程，请打开命令面板并输入“调试：切换自动附加。”将设置切换为始终并在 Visual Studio Code 终端中重新启动本地开发服务器。
当您的应用程序部署到 Managed Runtime 时，不支持远程调试。但是，您可以实时跟踪任何 Managed Runtime 环境的日志，以帮助诊断任何服务器端错误。
您有两个可以通过命令行跟踪日志的选项。
如果您正在使用从 2.4.1 或更高版本生成的 PWA Kit 项目，您可以：
- 查看 logs 命令的帮助：
npm run tail-logs -- --help - 跟踪特定项目和环境的日志：
npm run tail-logs -- --environment $ENV_ID
必须在上述命令中使用额外的 --。
如果您在 PWA Kit 项目之外工作，或者拥有根据 2.4.1 之前版本生成的项目，您可以使用 npx：
- 查看 logs 命令的帮助：
npx @salesforce/pwa-kit-dev tail-logs --help - 跟踪特定环境 ID 和项目 ID 的日志：
npx @salesforce/pwa-kit-dev tail-logs --environment $ENV_ID --project $PROJ_ID
您还可以使用较短的 -e 和 -p 参数来代替 --environment 和 --project 参数。
跟踪日志时，请记住以下限制：
- 每个日志跟踪会话将在 60 分钟后终止。
- 每个环境一次最多可以支持所有用户的 100 个活动日志跟踪会话。
- 要追踪日志，您需要获得 Managed Runtime 项目的开发人员或管理员用户权限。