Webstorm下如何结合chrome debug js程序

2022-07-21 5:52:33 网络知识 官方管理员

一、安装Chrome插件

这一步需要翻墙,打开Chrome然后打开WebStroe,搜索"jetbrainsidesupport",在Extensions中找到如图

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第1张

安装它,安装成功后Chrome的右上角应该出现扩展程序JetBraninsIDESupport的图标

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第2张

二、在WebStorm中新建一个项目

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第3张

三、新建debug配置项

点击右上角这个图标

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第4张

新建一个JavaScriptDebug

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第5张

填写一个名字,随意起,选择URL,还有浏览器,这里浏览器当然选择Chrome,然后确定

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第6张

四,开始调试程序

打断点

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第7张

运行Debug模式

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第8张

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

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第9张

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

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第10张

调试界面功能齐全,不比Chrome自带工具差,如果要调试elementstyle只能在Chrome了。

五、其它说明

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

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第11张

其它不变。右键JetBrainsIDESupport这个插件,可以打开选项,界面非常简单

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第12张

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

Webstorm下如何结合chrome debug js程序 你的 端口 选项 程序 项目 第13张

其中有一项

Canacceptexternalconnections

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

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


发表评论: