WebStorm断点调试：从配置到实战，一步步带你上手

在WebStorm里进行断点调试，其实操作起来相当直观。下面就把详细的步骤拆解给大家，无论是新手还是想回顾一下流程，跟着做就能轻松掌握。

WebStorm怎么进行断点调试

首先，断点调试需要浏览器端的插件支持。以最常用的Chrome为例，如果怕麻烦，可以直接点击下面的链接，一键跳转到Chrome应用商店添加插件：

https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji

如果记不住链接也没关系，直接看图操作更直观：

进入商店后，点击“获取更多扩展程序”。

接下来，在搜索框里输入：

JetBrains IDE Support

找到后，点击“添加至Chrome”即可。

安装成功后，在你的Chrome浏览器右上角，就能看到一个“JB”图标，这就代表插件已经就位了。

插件装好，回到WebStorm进行配置。配置完成后，切记要点击“Apply”保存设置。

接下来这一步很关键：将默认浏览器设置为Chrome。因为调试会话只会启动你设定的默认浏览器。

环境准备好，就可以开始调试了。

打开WebStorm，创建一个工程，并编写一些Ja vaScript代码。

注意，这里调试的对象是Ja vaScript代码。

在需要暂停的代码行前点击，设置断点。当代码执行到这一行时，就会自动停下，后续的代码将暂停执行。

然后，在这个工程对应的HTML文件上右键。

点击调试后，你就会看到熟悉的断点调试界面了，变量状态、调用堆栈等信息一目了然。

《夸克》非常好用的免费AI浏览器

下载APP查看