Webstorm下如何结合chrome debug js程序

一、安装chrome插件

这一步需要*，打开chrome然后打开web stroe，搜索"jetbrains ide support"，在extensions中找到如图

安装它，安装成功后chrome的右上角应该出现扩展程序jetbranins ide support的图标

二、在webstorm中新建一个项目

三、新建debug配置项

点击右上角这个图标

新建一个javascript debug

填写一个名字，随意起，选择url，还有浏览器，这里浏览器当然选择chrome，然后确定

四，开始调试程序

打断点

运行debug模式

不出意外的话，应该会自动打开你的chrome，并且有一行debug提示

webstorm这边应该是已经断点，并且可以进行调试了

调试界面功能齐全，不比chrome自带工具差，如果要调试element style只能在chrome了。

五、其它说明

大部分项目都不是利用webstorm内置的webserver运行项目的，比如更多的是使用tomcat、browser-sync这类工具，因为api部分需要访问server-end，但也没有问题，假如你的项目启动后，访问地址为：localhost:3000，那么你在添加debug的界面就要改成如下：

其它不变。右键jetbrains ide support这个插件，可以打开选项，界面非常简单

这个插件能够跟ide通讯，其实是通过一个host和port链接ide的，也就是webstorm打开时已经自动启动一个debuger server，任何遵照它的协议连接上它即可实现ide调试，我们打开ide的属性，然后搜索debugger，会发现这些配置信息，默认端口为63342，你可以修改这个端口，一般情况下没必要修改，如飞防火墙或者其它程序占用了端口才会去修改它

其中有一项

can accept external connections

这个选项默认未勾选，如果需要在其它电脑*问ide内置的webserver，就要勾选这个选项，否则只允许127.0.0.1 or localhost 访问webserver，当然，如果你的程序不依赖ide的内置的webserver那么这个选项也没必要勾选了。

最后大家可以动手试一试！