同时调试 PHP 和 JavaScript 代码

Web 应用程序通常由 PHP 和 JavaScript 代码组成：PHP 代码在服务器端运行，而 JavaScript 在浏览器中运行。使用 PhpStorm，您可以轻松调试 PHP 代码，以检查服务器上发生的情况、修改变量等。我们还可以通过从 IDE 启动 JavaScript 调试会话来调试在浏览器中运行的 JavaScript。

本教程概述了如何在 PhpStorm 中同时调试 PHP 和 JavaScript 代码。

开始之前

PhpStorm 支持使用两种最流行的工具进行调试： Xdebug 和 Zend Debugger。这些工具不能同时使用，因为它们会相互阻碍。为避免此问题，您需要按照配置 Xdebug 和配置 Zend Debugger 中的描述更新相关 PHP 解释器的 php.ini 文件。

在编辑器中打开活动的 php.ini 文件：

在设置对话框（Ctrl+Alt+S ）中，单击 PHP。
在打开的 PHP 页面上，单击，位于 CLI 解释器字段旁边。
在打开的 CLI 解释器对话框中，配置文件只读字段显示活动 php.ini 文件的路径。点击在编辑器中打开。

接下来，安装 PhpStorm 调试书签或浏览器调试扩展之一。

监听传入的调试器连接

在 PhpStorm 中，通过执行以下任一操作启用监听传入的调试连接：

单击工具栏/状态栏上的。
在主菜单中选择运行 | 开始侦听PHP 调试连接。

这确保了当在 Web 服务器上启动调试会话时，PhpStorm 会做出反应并自动打开调试工具窗口。在开始调试会话之前，请确保已设置断点或在 Debug 对话框的设置页面上启用了在PHP 脚本中的第一行中断选项 Ctrl+Alt+S。

启动 JavaScript 调试器

根据您的偏好或应用程序需求，您可以使用 PhpStorm 的内置 Web 服务器在本地运行我们的应用程序，或者使用任何其他在本地或远程机器上运行的 Web 服务器。

使用内置 Web 服务器

PhpStorm 中的 JavaScript 调试器可以从编辑器或通过项目工具窗口的调试 | <filename> 上下文菜单命令启动。如果选定的文件是 PHP 文件，将会有两个条目可用。重要的是选择标记为的第一个条目，这将启动 JavaScript 调试器。

启动后，我们可以在 JavaScript 代码中设置断点并使用 JavaScript 调试器。

使用外部 Web 服务器

当使用本地 Web 服务器（如 Apache 或 Nginx）或在远程 Web 服务器上开发时，使用 Vagrant 或 Docker 机器，我们可以使用运行/调试配置启动 JavaScript 调试器。

创建运行/调试配置

执行以下任意操作：
- 在 PhpStorm 工具栏上选择编辑配置(E)
- 请选择运行 | 编辑配置(E) 从主菜单。
在打开的运行/调试配置对话框对话框中，单击工具栏上的并添加一个新的 JavaScript 调试配置。
输入我们希望在 Web 服务器上调试的页面的完整 URL。可选地，提供一些映射，以便 PhpStorm 能够确定本地文件相对于远程 URL 的位置。仅当我们在本地和远程服务器上有不同的项目结构时才需要这样做。请注意，如果您使用 PhpStorm 部署 PHP 应用程序，映射将从部署配置中重用。

配置创建完成后，您可以从 PhpStorm 工具栏启动 JavaScript 调试会话：

从浏览器启动 PHP 调试会话

我们将遵循零配置调试方法。在浏览器中，我们可以使用 PhpStorm 调试书签或浏览器调试扩展之一来启动 PHP 调试会话。这将指示 PHP 服务器与 PhpStorm 建立连接并打开调试器。请注意，IDE 可能会首先要求您提供必要的路径映射。调试器连接后，我们将能够同时调试 JavaScript 和 PHP。 PhpStorm 将根据需要在调试器之间切换。

同时启动 JavaScript 和 PHP 调试器

在前面的步骤中，我们分别启动了 JavaScript 和 PHP 调试器。使用 Xdebug 时，我们可以向服务器传递一个 XDEBUG_SESSION_START URL 参数，以同时启动 PHP 和 JavaScript 调试。我们可以通过自定义运行/调试配置来实现这一点。创建运行/调试配置如您之前所做，并确保附加 XDEBUG_SESSION_START=some-session-name URL 参数，例如 ?XDEBUG_SESSION_START=phpstorm：

故障排查

我无法在 PHP 文件的 JavaScript 部分设置断点

目前，在一个文件中同时设置 PHP 和 JavaScript 断点尚不支持。例如，以下代码中无法设置 JavaScript 断点：

            <?php
                // ...
            ?><!doctype html>
            <html lang="en">
                <head>
                    <script>
                        /* javascript code */
                    </script>
                </head>
                <body>
                </body>
            </html>
        
   

为了能够同时调试 PHP 和 JavaScript 代码，请将 JavaScript 代码移到单独的 .js 文件中，并从 HTML 中引用它：

            <?php
                // ...
                ?><!doctype html>
            <html lang="en">
                <head>
                    <script src="index.js"></script>
                </head>
                <body>
                </body>
            </html>
        
   

然后我们可以在 php 文件中设置 PHP 断点，并在 js 文件中设置 JavaScript 断点。

最后修改日期： 2025年 9月 26日