在 Chrome 中调试 JavaScript
PyCharm 为您的 客户端 JavaScript 代码提供内置调试器。
开始之前
请确保在设置中启用了 JavaScript and TypeScript 捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，输入 JavaScript and TypeScript。 有关插件的详细信息，请参阅 管理插件。
请确保在设置中启用了 JavaScript Debugger 捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，输入 JavaScript Debugger。 有关插件的详细信息，请参阅 管理插件。
按照 配置 JavaScript 调试器 中的说明配置内置调试器。
要在无需重新加载页面的情况下，使您对 HTML、CSS 或 JavaScript 代码所做的更改立即在浏览器中显示，请启用 Live Edit 功能。 有关实时编辑功能的详细信息，请参阅 HTML、CSS 和 JavaScript 中的实时编辑。
调试在内置服务器上运行的应用程序
PyCharm 具有内置 Web 服务器，可用于在 Web 浏览器中调试您的应用程序，或在 PyCharm 内置浏览器中预览您的代码。 该服务器始终运行，无需任何手动配置。
开始调试
示例
假设您有一个简单的应用程序，由一个 index.html 文件和一个 index.js 文件组成，其中 index.html 引用了 index.js 。
要使用内置服务器开始调试此应用程序，请在 index.js 中设置断点，在编辑器中打开 index.html ，然后从上下文菜单中选择 。
PyCharm 会自动创建一个 运行/调试配置 ，并启动调试会话。
要重新启动新的运行/调试配置，请在列表中选择它并点击 
。
在浏览器中重新加载当前页面
除了在 调试 工具窗口中点击 重新运行 按钮（
）以重新启动应用程序之外，您还可以使用 在浏览器中重新加载 操作重新加载当前导航到的页面。 其工作方式与 Chrome 中的 重新加载页面 功能（Ctrl+R ）相同。
要重新加载当前页面，请点击工具栏上的
，然后选择 在浏览器中重新加载 （
）。
以下示例展示了一个由两个 HTML 页面和一个 JavaScript 脚本组成的简单应用程序。 起始的 home.html 页面上有一个 提交 按钮，按下该按钮后会打开 calculator.html 页面，并显示 Calculator.js 脚本执行的结果。
在调试会话期间，点击 重新运行 按钮（ ）会重新加载带有 提交 按钮的 home.html 页面。 点击 在浏览器中重新加载 按钮（
）会重新加载 calculator.html 页面，从而清除之前的所有脚本输出，并使调试器返回到 Calculator.js 的第 1 行。
调试在开发模式下于 localhost 上运行的应用程序
如果您的应用程序在 localhost 上以开发模式运行，您可以从内置的 终端 （Alt+F12 ）、从 运行工具窗口 ，或从 调试工具窗口 中开始调试。 只需按住 Ctrl+Shift 并点击应用程序正在运行的 URL。
在代码中设置 断点。
以开发模式启动应用程序，例如使用 npm 脚本。
运行 工具窗口或 终端 显示应用程序正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 PyCharm 会使用自动生成的 配置（类型为 JavaScript Debug ）启动调试会话。
调试在远程 Web 服务器上运行的应用程序
您经常可能需要调试在外部开发 Web 服务器上运行的应用程序的客户端 JavaScript。
什么是远程 Web 服务器？
在 PyCharm 中，任何 文档根目录 位于当前项目之外的服务器都称为 远程。 该服务器可能实际运行在物理远程主机上，也可能运行在您的本机上。
例如，如果您的项目位于 C:/PyCharmProjects/MyProject ，且 Web 服务器的文档根目录为 C:/XAMPP/htdocs ，则对于 PyCharm 来说，该 Web 服务器是 远程。
如何将服务器上的应用程序源代码与您在 PyCharm 项目中的本地副本同步？
要在 远程 Web 服务器上调试应用程序，您需要在 一个 PyCharm 项目中拥有其源代码的副本。 要同步本地与远程源，请按照 创建远程服务器配置 和 连接到 Web 服务器 中的说明创建一个 部署配置。
在远程 Web 服务器上调试应用程序
根据需要在 JavaScript 代码中设置 断点。
创建一种 JavaScript 调试 类型的运行/调试配置：
转到 ，然后在 编辑配置 对话框中，在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），并从列表中选择 JavaScript 调试。在打开的 运行/调试配置：JavaScript Debug 对话框中，指定应用程序正在运行的 URL 地址。 该 URL 地址应为 Web 服务器根 URL 与相对于 Web 服务器文档根目录的 HTML 文件路径的拼接，并符合 服务器访问配置。 有关详细信息，请参阅 连接到 Web 服务器。
点击 确定 以保存配置设置。
在工具栏的 选择运行/调试配置 列表中选择新建的配置，然后点击 调试 按钮
。 运行配置中指定的 HTML 文件将在所选浏览器中打开，并显示 调试工具窗口。在 调试 工具窗口中，按常规操作： 逐步执行程序、 停止并恢复 程序执行、 在挂起时进行检查 ，浏览调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM ，等等。
示例：不使用映射进行调试
假设您有一个简单的应用程序，由一个 index.html 文件和一个 App.js 文件组成，其中 index.html 引用了 App.js 。
现在将我们的简单应用程序部署到本地 Web 服务器，参阅 部署。 在以下示例中，它是 Apache：
当使用本地 Web 服务器（如 Nginx 或 Apache，正如我们的示例），或者 Web 服务器位于远程主机上时，您需要创建一个运行/调试配置以启动 JavaScript 调试器。 为此，点击 PyCharm 窗口右上角的列表，并选择 编辑配置。 或者，从主菜单中选择 ：
在 运行/调试配置 对话框中，点击
，并从列表中选择 JavaScript 调试：
指定正在运行的应用程序的 URL，在我们的示例中为
http://localhost:8888/MySimpleApp/index.html
在我们的示例中，本地项目结构与服务器上的文件结构相同，因此无需映射。
现在可以开始调试：从 PyCharm 窗口右上角的列表中选择新的运行/调试配置，然后点击
：
在 调试 工具窗口中，按常规操作： 逐步执行程序、 停止并恢复 程序执行、 在挂起时进行检查 ，浏览调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM ，等等。
映射
映射 用于在 Web 服务器上的文件与其本地副本之间建立对应关系。 您需要映射：
当您的应用程序部署并运行在 远程 Web 服务器上时。
当除了项目根目录之外，您还定义了多个资源根文件夹时。
PyCharm 会尝试根据 部署配置 ，或基于文件与脚本的名称和内容来猜测路径映射。 不过，如果您的应用程序结构较为复杂，则需要手动指定路径映射。
配置映射
按照 调试应用程序 中的说明，创建一种 JavaScript Debug 类型的调试配置。
在 本地文件的远程 URL 区域中，根据当前使用的 部署配置 ，将文件和文件夹映射到服务器上的文件和文件夹的 URL 地址，参见 将本地文件夹映射到服务器上的文件夹以及用于访问它们的 URL 地址。
示例：使用映射进行调试
假设由于某些原因，您决定更改应用程序在 前面的示例 中的文件夹结构，并将 index.html 和 App.js 移动到单独的文件夹 src 。
由于本地源代码与 Web 服务器上的应用程序结构不同，调试器将无法将本地源代码与实际执行的代码同步。
为解决该问题，让我们将应用程序根的 URL 地址映射到 src 文件夹。
有关更多调试示例，请参阅 WebStorm 博客中的以下文章： Debugging React Applications 和 Debugging Angular Applications。
在 Code With Me 会话中进行调试
您也可以在 Code with Me 会话期间开始调试。 无论您担任 主机 还是 客户端 ，浏览器都会在启动调试会话的一侧打开。
调试异步代码
PyCharm 支持调试异步客户端 JavaScript 代码。 PyCharm 能识别异步代码中的断点，在此处停止，并允许您步入此类代码。 一旦命中异步函数内的断点或步入异步代码， 线程与变量 选项卡的 帧 窗格中会新增一个元素 Async call from <caller>。 PyCharm 会显示完整的调用栈，包括调用方以及直至异步操作起点的整个路径。
在上面的示例中，调试器会在第 3 行（断点）停下，然后在第 5 行（断点）停下。 点击 步入 后，调试器将在第 5 行（于 function 上）停下，然后转到第 6 行。
异步调试模式默认启用。 要禁用异步堆栈跟踪，请在 Registry 中将 js.debugger.async.call.stack.depth 设为 0。
调试 Worker
PyCharm 支持调试 Service Workers 和 Web Workers。 PyCharm 能识别每个 worker 中的断点，并在 调试工具窗口 的 线程与变量 选项卡上的 帧 窗格中，以单独线程的形式显示其调试数据。
请注意，PyCharm 只能调试 dedicated workers ，目前不支持调试 shared workers。
在 Workers 中设置 断点 以进行调试。
如果您使用 Service Workers ，请确保在 调试器 页面（ ）上选中了 允许未签名的请求 复选框。 否则，您的 service workers 可能在调试会话期间不可用。
创建一种 JavaScript Debug 类型的调试配置，具体如 在外部 Web 服务器上调试客户端 JavaScript 中所述。
在工具栏的 运行 小部件列表中，选择新建的 配置，然后点击其旁边的
。运行配置中指定的 HTML 文件将在浏览器中打开，并打开 调试工具窗口 ，其中的 帧 列表显示所有可用的 Workers：
要检查某个 Worker 的数据（变量、监视等），请在列表中选择其线程，并在 变量 和 监视 窗格中查看其数据。 当您选择另一个 Worker 时，窗格的内容会相应更新。
调试 Chrome 扩展程序
您可以在 PyCharm 中使用 Attach to Node.js/Chrome 类型的运行/调试配置来调试 Chrome 扩展程序。 请注意，您需要使用 自定义 Chrome 用户数据配置文件 启动 Chrome，了解更多信息请参阅 使用您偏好的 Chrome 用户数据启动调试会话。
创建 Attach to Node.js/Chrome 运行/调试配置
转到 。 或者，从工具栏上的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），并从列表中选择 附加到 Node.js/Chrome。
将打开 运行/调试配置：Attach to Node.js/Chrome 对话框。
指定配置名称，并接受预定义的主机与端口值
localhost:9229。
点击 应用 和 确定 以保存配置并关闭对话框。
运行 Chrome 并加载该扩展程序
从命令行运行 Chrome 以指定远程调试端口和 您的 Chrome 用户数据目录。
打开嵌入式 终端 （Alt+F12 ），然后输入：
<path_to_chrome_executable> --remote-debugging-port=<port_specified_in_run_configuration> --user-data-dir=<your_Chrome_user_data_directory>加载您的未打包扩展程序 到打开的 Chrome 窗口。
