在本地调试（通过 Flywheel）：初学者指南

已发表: 2022-08-13

在网站上或什至在网站的本地安装中出现问题可能会令人伤脑筋。 毕竟，站点性能问题或错误可能会导致站点停机。 站点停机可能意味着流量损失、机会错失，甚至收入损失。

值得庆幸的是，存在许多用于识别和修复站点问题的调试解决方案。 但是你怎么知道什么最适合你的情况呢？

在 Local 中，有一种多管齐下的方法可用于调试。 在这里，我们将讨论本地包含的默认调试选项，以及识别错误的方法，以及可用于更快速有效地发现和修复问题的其他附加组件。

什么是本地 Xdebug？

在讨论如何在 Local 中调试之前，我们需要先谈谈 Xdebug，Local 中的调试工具及其一些最值得注意的特性。

Xdebug 实际上是一个 PHP 扩展，它简化了调试过程。 首先，它使var_dump ()函数的格式更清晰，并添加了更多关于特定错误的警告和通知。 这样，它可以提供更直观的用户体验。

xdebug var 转储差异

如果你不知道， var_dump()是 PHP 的一个有用的部分，它可以快速揭示你的代码有什么问题。 但这里的区别是，如果你手头没有 Xdebug，调用var_dump()时产生的代码 会更难阅读。 另外，即使在调用var_dump()时，您也必须以非常特殊的方式格式化您的 PHP 首先。

Xdebug 在 Local 中可用，因为它在错误出现时提供了更深入的信息。 它还带有一个步进调试器，可以简化调试过程，尤其是对于较大的问题。 步进调试器允许您在特定断点处逐步评估您的代码。 这使您可以在较小的部分中评估代码并更容易地定位问题。

最好的部分是 Xdebug 默认在 Local 中启用，因此您甚至不必弄乱任何设置即可开始使用。 只需打开本地即可。

如何在本地调试网站

您可以通过几种关键方式在 Local 中调试网站。 以下是我们将要讨论的主要步骤：

  1. 识别浏览器控制台错误
  2. 使用查询监视器
  3. 通过 Xdebug 和 VS Code
  4. 使用 Xdebug 和 PhpStorm
  5. 使用 Xdebug 进行分步调试

让我们潜入。

1.识别浏览器控制台错误

本地的Firefox浏览器控制台

调试的第一步是使用浏览器控制台，它是所有浏览器开发工具的一部分。 这使您无需任何特殊工具即可发现网页上的错误。 只需启动 Local，使用您选择的浏览器访问相关页面，然后使用控制台发现错误。 以下是如何跨多个浏览器访问浏览器控制台的细分。

如果您使用的是 Chrome……

  1. 在 Chrome 浏览器菜单中转到更多工具 > 开发人员工具，打开 DevTools。 或者，点击Ctrl/Cmd+Shift+I 。
  2. 单击控制台选项卡。
  3. 如果存在任何错误，它们现在应该是可见的。 如果没有，请重新加载网页以生成它们。
  4. 记下错误的类型、位置以及浏览器控制台中的行号。

如果您使用的是 Firefox……

  1. 在 Firefox 菜单中转到更多工具 > Web 开发人员工具，打开浏览器开发人员工具。 Ctrl/Cmd+Shift+I 也适用于此。
  2. 单击控制台 标签。 或者，您也可以通过More Tools > Browser Console直接访问控制台。
  3. 现在应该可以看到任何错误。 如果没有，请重新加载页面。

如果您使用的是 Safari……

  1. 在 Safari 菜单中转到首选项 > 高级来打开开发人员工具。 Option+Cmd+I是你的朋友。
  2. 选中在菜单栏中显示开发菜单旁边的框。 然后，关闭对话框。
  3. 单击开发 > 显示错误控制台。 与上述相同的交易。

有了这些信息，您可以返回在本地设置的文件系统，找到导致问题的特定代码位，然后实施修复。 使用转到站点文件夹按钮访问您的本地网站的位置。

转到站点文件夹

2.使用查询监视器修复站点性能问题

您也可以直接在 WordPress 中识别和修复网站问题。 事实上，查询监视器插件是调试和识别性能问题的绝佳选择，特别是。 这与内置的本地调试工具相得益彰，尤其有助于发现第三方插件和主题问题。

您可以像安装任何其他插件一样安装插件。 只需转到Plugins > Add New并按名称搜索它。 在列表中找到它并单击立即安装，然后在下载后激活。

安装查询监视器

查询监视器可以告诉您什么

安装插件后，您应该会在 WordPress 仪表板顶部看到一个新的菜单选项。

查询监视器管理栏菜单

将鼠标悬停在它上面将显示查询监视器工具和选项的下拉列表。 选择其中任何一个将在底部打开一个菜单，您可以在其中了解有关当前页面的更多详细信息。

查询监控控制台

除其他外，查询监视器将为您提供页面性能的概述，包括：

  • 峰值内存使用。 此工具显示在给定时间生成页面使用了多少内存。
  • 页面生成时间。 显示生成页面所需的时间。
  • 数据库查询时间。 最后，此工具向您显示数据库响应主题或插件请求所需的时间。

除了性能问题，这个插件还可以识别 PHP 错误和通知——就像 Xdebug 一样。 但是，它的工作重点是第三方主题和插件。 这里方便的是，如果出现错误，工具中将出现一个名为PHP Errors的新选项卡，该选项卡将列出每个错误及其安全威胁。 它还会告诉您出现错误的代码行以及特定的错误代码或通知。

现在，这对于已经上线或处于后期测试阶段的网站非常有用。 但是，如果您仍处于本地开发阶段，那么在 Local 中使用 Xdebug 将是您最好的选择。

3.设置 Xdebug 和 VS Code 进行调试

回到 Local，您可以通过多种方式使用 Xdebug 来执行本地站点调试。 可以这么说，为了获得更多收益，您可以将 VS Code 的强大功能添加到等式中。

VS Code 是一个开源代码编辑器，具有扩展工具和更直观的用户界面。 它使逐行调试过程更加直观和容易。

Visual Studio 代码 vscode 代码编辑器

您实际上可以将 VS Code 连接到 Xdebug Step Debugger 以达到很好的效果。 以下是如何设置它以在本地使用：

  1. 下载 VS Code 并按照开发人员的说明进行安装。
  2. 下载并安装 PHP 调试器扩展。 Local 的文档建议为此任务使用 PHP 调试扩展。
  3. 在 Local 中，单击Add-ons > Xdebug + VS Code 。
  4. 单击安装插件。
  5. 完成后，点击Enable & Relaunch 。
  6. 在本地打开一个站点，然后单击实用程序选项卡。
  7. 单击将运行配置添加到 VS 代码。
  8. VS Code 将启动，然后您可以开始调试过程。

如果您不喜欢 VS Code，您可以使用其他编辑工具来完成该任务。

4.设置 Xdebug 和 PhpStorm 进行调试

xdebug 和 phpstorm 本地添加

另一种选择是将 PhpStorm 与 Xdebug 一起使用。 您可以通过附加组件将其添加到本地，它将与 Xdebug Step Debugger 一起工作。 安装和设置与上面为 VS Code 描述的过程非常相似。 要使用它，请执行以下步骤：

  1. 下载并安装 PhpStorm。
  2. 在 Local 中，单击Add-ons > Xdebug + PhpStorm 。
  3. 单击安装插件。
  4. 再次，完成后启用并重新启动。
  5. 在本地打开任何站点，然后单击实用程序 标签。
  6. 单击将运行配置添加到 PhpStorm 。
  7. 在 PhpStorm 处于活动状态时，通过单击您希望断点发生的特定代码行的间距来设置断点。
  8. 单击“播放”开始调试过程。

如果您想在调试过程中获得更多指导，则始终可以选择分步调试。

5.使用Xdebug进行分步调试

Step Debugging 是一个超级有用的工具，也是 Xdebug 的一部分，它基本上可以帮助您完成调试过程。 它与 VS Code 和 PhpStorm（以及许多其他 IDE 和文本编辑器）一起使用，提供详细但易于遵循的调试工具、步骤和协议。

在 Local 中，您无需执行任何操作来设置 Xdebug——默认情况下它会自动启用。 如果您有一个复杂的测试环境（同时有多个系统参与），虽然有更复杂的设置说明，但我们假设您现在只需要在一个系统上执行调试，在一个本地安装中。

要使用分步调试，您实际上需要做的就是按照前两节中概述的步骤进行操作。 该功能适用​​于 VS Code 或 PhpStorm。 一切设置好后，它会自动设置断点并一一播放代码。 这提供了一种直观的方式来运行代码、查看错误并在出现错误时进行修复。

在本地轻松调试

如您所见，在 Local 中进行调试实际上是一个非常简单的过程，只需最少的设置即可开始。 默认情况下，主要调试工具已经存在。 您需要做的就是设置您喜欢的文本编辑器或 IDE，配置一个或两个插件，一切就绪。 当然，您需要执行实际的错误修复以使您的网站处于最佳状态。 但至少，调试过程本身可以轻松执行，并且无需大惊小怪。

您首选的本地调试工具是什么？ 我们很乐意在下面的评论中听到您的反馈。