WebStorm Debug 配置

WebStorm 调试配置

【所需工具】：

• Chrome 浏览器
• Chrome 浏览器插件——JetBrains IDE Support
• WebStorm

配置过程

首先，下载 Chrome 浏览器以及 JetBrains IDE Support 插件。

安装成功后，我们可以看到右上角多了 JetBrains 公司的图标。

接下来，在我们要调试的代码处打上断点（在行号右侧空白处单击即可创建断点）。

打上断点之后就可以开始调试了。调试方式很多，可以直接在与这段代码相关的 html 文件中单击鼠标右键，在弹出面板中点击“Debug 'filename”见下图。

也可以在右上角的工具栏中点击“瓢虫”图标。

点击之后，WebStrom 会自动打开 Chrome 浏览器（需要将 Chrome 浏览器设置为默认浏览器）。

最后，在浏览器中触发调试代码，这样，我们就可以在 WebStrom 中进行代码调试。

当然，你也可以直接在 Chrome 浏览器中进行调试。

• 进入到 Sources 选项中。
• 在左侧目录树中找到要调试的文件。
• 打开文件，并在要调试的代码位置处打上断点。
• 在页面上触发调试代码。