在 Chrome 中调试 JavaScript
GoLand 为您的 前端 JavaScript 代码提供内置调试器。
以下说明将引导您完成使用此调试器的基本步骤。
开始之前
请确保在设置中启用了 JavaScript 和 TypeScript捆绑插件。 按下 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中输入 JavaScript 和 TypeScript。 有关插件的更多信息，请参阅 管理插件。
请确保在设置中启用了 JavaScript Debugger捆绑插件。 按下 Ctrl+Alt+S 打开设置，然后选择 。 单击 已安装 选项卡。 在搜索字段中输入 JavaScript Debugger。 如需了解有关插件的更多信息，请参阅 管理插件。
按照 配置 JavaScript 调试器 中所述配置内置调试器。
为使对 HTML、CSS 或 JavaScript 代码所做的更改能立即在浏览器中显示而无需重新加载页面，请启用 Live Edit 功能。 如需了解有关实时编辑功能的更多信息，请参阅 在 HTML、CSS 和 JavaScript 中使用 Live Edit。
调试在内置服务器上运行的应用
GoLand 带有内置 Web 服务器，可用于在 Web 浏览器中调试您的应用程序或在 GoLand 的内置浏览器中预览代码。 该服务器始终运行，无需任何手动配置。
开始调试
根据需要在 JavaScript 代码中设置 breakpoints。
打开引用要调试的 JavaScript 的 HTML 文件，或在 项目工具窗口 中选择该 HTML 文件。
在编辑器或所选内容的上下文菜单中选择 调试 <HTML_file_name>。 GoLand 生成调试配置并通过该配置启动调试会话。 该文件将在浏览器中打开，并显示 调试工具窗口。
在 调试 工具窗口中按正常方式继续操作： 单步执行程序、 中止并恢复 程序执行、 在挂起时检查 、浏览调用栈和变量、设置监视、计算变量、 查看实际 HTML DOM 等。
示例
假设您有一个由一个 index.html 文件和一个 index.js 文件组成的简单应用程序，其中 index.html 引用了 index.js 。
如要使用内置服务器开始调试此应用程序，请在 index .js 中设置断点，在编辑器中打开 index .html ，并从上下文菜单中选择 。
GoLand 会自动创建一个 运行/调试配置 ，并启动调试会话。
要重新启动新建的运行/调试配置，请从列表中选择该配置并单击 
。
在浏览器中重新加载当前页面
除了可以在 调试 工具窗口中点击 重新运行 按钮（
）来重新启动应用程序，您还可以使用 在浏览器中重新加载 操作重新加载当前已打开的页面。 此操作的效果与 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 script。
运行 工具窗口或 终端 显示了应用程序正在运行的 URL。 按住 Ctrl+Shift 并单击此 URL 链接。 GoLand 使用自动生成的 配置以 JavaScript Debug 类型启动调试会话。
调试在远程 Web 服务器上运行的应用
通常，您可能希望调试在外部开发 Web 服务器上运行的应用程序的客户端 JavaScript。
什么是远程 Web 服务器？
在 GoLand 中，任何 document root 位于当前项目之外的服务器都称为 remote。 该服务器可能实际上运行在远程主机上，也可能运行在您的计算机上。
例如，如果您的项目位于 C:/GoLandProjects/MyProject ，而 Web 服务器文档根目录位于 C:/XAMPP/htdocs ，则在 GoLand 中该 Web 服务器为 remote。
如何将服务器上的应用源代码与 GoLand 项目中的本地副本同步？
要调试运行在 remote Web 服务器上的应用程序，您需要将其源代码副本保存在 一个 GoLand 项目中。 要同步本地资源和远程资源，请按照 创建远程服务器配置 和 连接到 Web 服务器 中的说明创建 deployment configuration。
调试在远程 Web 服务器上的应用
根据需要在 JavaScript 代码中设置 breakpoints。
创建一个 JavaScript 调试 类型的运行/调试配置：
转到 ，然后在打开的 编辑配置 对话框中的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），并从列表中选择 JavaScript 调试。在打开的 Run/Debug Configuration: JavaScript Debug 对话框中，指定应用程序的运行 URL 地址。 该 URL 地址应为 Web server root URL 与相对于 Web 服务器文档根目录的 HTML 文件路径的合并，符合 server access configuration 的要求。 有关更多信息，请参阅 连接到 Web 服务器。
点击 确定 以保存配置设置。
在工具栏的 选择运行/调试配置 列表中选择新创建的配置，然后点击 调试 按钮
。 运行配置中指定的 HTML 文件将在所选浏览器中打开，并显示 Debug tool window。在 调试 工具窗口中，像往常一样继续操作： 逐步执行程序、 中止并恢复程序执行、 在暂停时检查程序 、探索调用堆栈和变量、设置监视、计算变量、 查看实际 HTML DOM 等。
示例：在无映射的情况下调试
假设您有一个简单的应用程序，由一个 index.html 文件和一个 App.js 文件组成，其中 index.html 引用 App.js 。
现在我们将这个简单的应用程序部署到本地 Web 服务器，请参阅 部署。 在下面的示例中使用的是 Apache：
当使用本地 Web 服务器（如我们的示例中的 Nginx 或 Apache），或者 Web 服务器位于远程主机上时，您需要创建 Run/Debug 配置以启动 JavaScript 调试器。 为此，请点击 GoLand 窗口右上角的列表，并选择 编辑配置。 或者，从主菜单中选择 ：
在 运行/调试配置 对话框中，点击
，并从列表中选择 JavaScript 调试：
指定正在运行的应用程序的 URL，在我们的示例中为
http://localhost:8888/MySimpleApp/index.html
在我们的示例中，本地项目结构与服务器上的文件结构相同，因此不需要映射。
现在我们可以开始调试了：从 GoLand 窗口右上角的列表中选择新的运行/调试配置，然后点击
：
在 调试 工具窗口中，像往常一样继续操作： 逐步执行程序、 中止并恢复程序执行、 在暂停时检查程序 、探索调用堆栈和变量、设置监视、计算变量、 查看实际 HTML DOM 等。
映射
Mappings 用于设置 Web 服务器上的文件与其本地副本之间的对应关系。 在以下情况下，您需要设置映射：
当您的应用程序部署并运行在 remote Web 服务器上时。
当除了项目根目录之外，您还定义了多个资源根文件夹时。
GoLand 会尝试根据 deployment configuration 或通过文件与脚本的名称和内容猜测路径映射。 但是，如果您的应用程序结构较为复杂，则需要手动指定路径映射。
配置映射
如 Debugging an application 中所述，创建 JavaScript Debug 类型的调试配置。
在 本地文件的远程 URL 区域，将文件和文件夹映射到服务器上的文件和文件夹的 URL 地址，按照当前使用的 deployment configuration ，参见 Mapping local folders to folders on the server and the URL addresses to access them。
示例：含映射的调试
假设由于某些原因，您决定更改应用程序的文件夹结构，将 index.html 和 App.js 从 上一个示例移动到一个单独文件夹 src 。
由于本地源文件与 Web 服务器上的应用程序结构不同，调试器将无法同步本地源文件与实际执行的代码。
为解决此问题，让我们将应用程序根目录的 URL 地址映射到 src 文件夹。
如需了解更多调试示例，请参阅 WebStorm 博客中的以下文章： 调试 React 应用 与 调试 Angular 应用。
调试 worker
GoLand 支持调试 Service Worker 和 Web Worker。 GoLand 能识别每个 worker 中的断点，并在 帧 面板的 调试器 选项卡中以单独线程显示其调试数据，该面板位于 调试工具窗口 中。
请注意，GoLand 仅支持调试 专用 worker ，暂不支持调试 共享 worker。
在 Worker 中设置 断点以进行调试。
如果使用 Service Worker ，请确保在 调试器 页（ ）中选中 允许未签名请求 复选框。 否则，在调试会话中， service worker 可能不可用。
创建 JavaScript Debug 类型的调试配置，如上述 调试在外部 Web 服务器上运行的客户端 JavaScript中所述。
在工具栏的 运行 组件列表中选择新建的 配置，然后点击其旁的
。运行配置中指定的 HTML 文件将在浏览器中打开，并打开 调试工具窗口 ，其中的 帧 列表显示所有可用的 Worker：
要查看某个 Worker 的数据（变量、监视等），请在列表中选择其线程，并在 变量 与 监视 面板中查看其数据。 选择其他 Worker 时，面板中的内容也将随之更新。
调试 Chrome 扩展
在 GoLand 中，您可以使用类型为 Attach to Node.js/Chrome 的运行/调试配置来调试 Chrome 扩展程序。 请注意，您需要在启动 Chrome 时使用 自定义的 Chrome 用户数据配置文件 ，详情请参阅 使用首选 Chrome 用户数据启动调试会话。
创建“附加到 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 窗口中。
