在 Chrome 中调试 JavaScript
PyCharm 为您的 client-side JavaScript 代码提供内置调试器。
开始之前
请确保在设置中启用了 JavaScript 和 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。
在您的代码中设置 breakpoints。
在开发模式下启动应用程序，例如，使用 npm 脚本。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 PyCharm 启动带有 类型 JavaScript Debug的自动生成配置的调试会话。
调试运行在远程 Web 服务器上的应用程序
您可能经常需要调试在外部开发 Web 服务器上运行的应用程序的客户端 JavaScript。
什么是远程 Web 服务器？
在 PyCharm 中，任何 document root 位于当前项目之外的服务器都称为 remote。 该服务器可能实际上运行在物理远程主机或您的机器上。
例如，如果您的项目位于 C:/PyCharmProjects/MyProject ，而网络服务器文档根目录是 C:/XAMPP/htdocs ，那么对于 PyCharm 来说，该网络服务器就是 remote。
如何将服务器上的应用程序源代码与 PyCharm 项目中的本地副本同步？
在 远程 Web 服务器上调试应用程序时，您需要在 一个 PyCharm 项目中拥有其源代码的副本。 要同步本地和远程源，请创建 部署配置 ，如 创建远程服务器配置 和 连接到 Web 服务器 中所述。
在远程 Web 服务器上调试应用程序
在 JavaScript 代码中设置 断点 ，根据需要。
创建一个 JavaScript 调试 类型的运行/调试配置：
转到 ，然后在 编辑配置 对话框中，在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），并从列表中选择 JavaScript 调试。在 运行/调试配置：JavaScript 调试对话框中，指定应用程序运行的 URL 地址。 此 URL 地址应根据 服务器访问配置 ，将 Web 服务器根 URL 与 HTML 文件相对于 web 服务器文档根目录的路径连接起来。 如需更多信息，请参阅 连接到 Web 服务器。
点击 确定 保存配置设置。
在工具栏上的 选择运行/调试配置 列表中选择新创建的配置，然后点击 调试 按钮
。 在运行配置中指定的 HTML 文件会在选择的浏览器中打开，并会显示 Debug 工具窗口。在打开的 调试 工具窗口中，按常规操作： 逐步执行程序、 停止并恢复 程序执行、 在暂停时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM 等。
示例：无需映射进行调试
假设您有一个简单的应用程序，它由一个 index.html 文件和一个 App.js 文件组成，其中 index.html 引用 App.js 。
现在让我们将简单的应用程序部署到本地 Web 服务器，参阅 部署。 在以下示例中，它是 Apache：
当使用本地 Web 服务器，例如 Nginx 或 Apache（如本例所示），或者 Web 服务器在远程主机上时，您需要创建一个 Run/Debug 配置来启动 JavaScript 调试器。 要执行该操作，请点击 PyCharm 窗口右上角的列表，然后选择 编辑配置。 或者，从主菜单中选择 ：
在 运行/调试配置 对话框中，点击
并从列表中选择 JavaScript 调试：
指定您正在运行的应用程序的 URL，在我们的示例中是
http://localhost:8888/MySimpleApp/index.html
在我们的示例中，本地项目结构与服务器上的文件结构相同，因此不需要映射。
现在我们可以开始调试了：从 PyCharm 窗口右上角的列表中选择新的运行/调试配置，然后点击
:
在打开的 调试 工具窗口中，按常规操作： 逐步执行程序、 停止并恢复 程序执行、 在暂停时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM 等。
映射
Mappings 设定了 Web 服务器上的文件与其本地副本之间的对应关系。 您需要 mappings:
当您的应用程序部署并在 remote Web 服务器上运行时。
当您定义了多个资源根文件夹（除了项目根目录之外）。
PyCharm 尝试根据 部署配置 或基于文件和脚本名称及内容来猜测路径映射。 但是，如果您的应用程序结构复杂，则需要手动指定路径映射。
配置映射
创建一种类型为 JavaScript Debug 的调试配置，如在 调试应用程序 中所述。
在 本地文件的远程URL 区域中，根据当前使用的 部署配置 ，将文件和文件夹映射到服务器上文件和文件夹的 URL 地址，请参阅 将本地文件夹映射到服务器上的文件夹并访问它们的 URL 地址。
示例：启动调试 (mapping)
假设由于某种原因，您决定更改应用程序的文件夹结构，将 前一个示例中的 index.html 和 App.js 移动到一个单独的文件夹 源代码 。
由于本地源代码与网页服务器上的应用程序结构不同，调试器将无法将本地源代码与实际执行的代码同步。
为了解决这个问题，让我们将应用程序根目录的 URL 地址映射到 源代码 文件夹。
如需更多调试示例，请参考 WebStorm 博客中的以下文章： 调试 React 应用程序和 调试 Angular 应用程序。
调试异步代码
PyCharm 支持调试异步客户端 JavaScript 代码。 PyCharm 能识别异步代码中的断点，停在断点处，并允许您逐步进入此类代码。 一旦异步函数中的断点被触发，或者您进入异步代码， Async call from <caller> 会在 帧 面板的 线程与变量 选项卡中添加一个新元素。 PyCharm 显示完整的调用堆栈，包括调用者和到异步动作开始的整个过程。
在上面的示例中，调试器会在第 3 行（断点）处停止，然后在第 5 行（断点）处停止。 点击 逐步进入 时，调试器将在 line5 处（在 function 上）停止，然后移至 line6。
默认情况下启用异步调试模式。 若要禁用异步堆栈跟踪，请在 Registry 中设置 js.debugger.async.call.stack.depth 为 0。
调试 workers
PyCharm 支持调试 Service Workers和 Web Workers。 PyCharm 会识别每个 worker 中的断点，并在 调试工具窗口 的 线程与变量 选项卡的 帧 窗格中将其作为单独的线程显示调试数据。
请注意，PyCharm 只能调试 专用工作者 ，目前不支持调试 共享工作者。
在 断点中设置 Workers进行调试。
如果您正在使用 Service Workers ，请确保在 允许未签名请求 复选框选中 的 调试器页面上。 否则，您的 service workers 可能在调试会话期间不可用。
如上所述，在 JavaScript Debug类型中创建一个调试配置，见 调试在外部 Web 服务器上运行的客户端 JavaScript。
从工具栏的 运行 小部件列表中，选择新创建的 配置，然后点击旁边的
。运行配置中指定的 HTML 文件将在浏览器中打开，并且 调试工具窗口会打开，其中显示了 窗口 所有可用 Workers的列表：
要检查 Worker 的数据（变量、watches 等），请选择列表中的线程并在 变量 和 监视 窗格中查看其数据。 当您选择另一个 Worker时，窗格的内容会相应更新。
调试 Chrome 扩展
您可以在 PyCharm 中使用 Attach to Node.js/Chrome 类型的运行/调试配置调试 Chrome 扩展。 请注意，您需要使用 自定义 Chrome 用户数据配置文件 启动 Chrome，了解更多信息请参阅 使用首选的 Chrome 用户数据启动调试会话。
创建 Attach to Node.js/Chrome 运行/调试配置
转到 。 或者，从工具栏的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 附加到 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 窗口中。
