WebStorm 调试配置
【所需工具】：
- Chrome 浏览器
- Chrome 浏览器插件——JetBrains IDE Support
- WebStorm
配置过程
首先，下载 Chrome 浏览器以及 JetBrains IDE Support 插件。
JetBrains IDE Support 插件安装成功示意图
安装成功后，我们可以看到右上角多了 JetBrains 公司的图标。
接下来，在我们要调试的代码处打上断点（在行号右侧空白处单击即可创建断点）。
断点示意图
打上断点之后就可以开始调试了。调试方式很多，可以直接在与这段代码相关的 html 文件中单击鼠标右键，在弹出面板中点击“Debug 'filename”见下图。
调试方式一
也可以在右上角的工具栏中点击“瓢虫”图标。
调试方式二
点击之后，WebStrom 会自动打开 Chrome 浏览器（需要将 Chrome 浏览器设置为默认浏览器）。
Chrome 调试
最后，在浏览器中触发调试代码，这样，我们就可以在 WebStrom 中进行代码调试。
调试界面
当然，你也可以直接在 Chrome 浏览器中进行调试。
- 进入到 Sources 选项中。
- 在左侧目录树中找到要调试的文件。
- 打开文件，并在要调试的代码位置处打上断点。
- 在页面上触发调试代码。
Chrome 浏览器代码调试
