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