Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)

1. Chrome浏览器安装JetBrains IDE Support

Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第1张图片

安装后出现箭头的图标,右键点击 ”选项“

Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第2张图片

填写上面前端Webstorm项目的Host+Port信息,Apply

Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第3张图片

2. 打开Webstorm的右上角Edit Configurations,添加一个Javascript Debug

Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第4张图片
Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第5张图片

填写对应Url,Browser选为Chrome

Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第6张图片

在需要的js地方,打上断点

Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第7张图片

3. 先第1个绿三角启动正常的Serve,

再切换到刚设置的debug,第2个绿虫子启动

Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第8张图片

此时,已经有两个process在运行,弹出的Chrome不要关闭,只能在这个弹出Chrome中调试(关闭后debug自动stop)

Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件)_第9张图片

前端学习中,axios引入了全局interceptor,对error已经过了包装,所以可以error.mobile

而我的为原生的,还得填全了error.response.data.mobile!!!

你可能感兴趣的:(Webstorm中,javascript断点调试方法(Chrome:JetBrains IDE Support插件))