IDEA 调试前端代码JS 及安装JetBrains IDE Support

收藏从未间断,学习从未开始。

不需要F12窗口,不需要JS代码写debugger断点,不需要写console.log()输出

 

 

一、JetBrains IDE Support

1、 必须使用谷歌浏览器,安装JetBrains IDE Support

IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

2、添加程序后,会在程序管理界面看到,且右上角有相应的小图标

IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 

3、设置访问端口

右键小图标,点击选项

填入地址和端口号

IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 

二、IDEA 设置 

1、配置TOMCAT时必须勾上,且选择chrome浏览器。

 IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 

2、 设置端口号

如果端口号不一致则无法使用

IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 

三、开启调试模式

前提

1、TOMCAT的中JAVA-WEB项目要debugger启动

IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

2、 页面点击开发调试模式 (inspect in idea)

可点击浏览器右上角图标启动,或者页面内右键,Inspect in idea 启动

注意:如没出现下图的东西,可重启电脑(具体原因不知,略神奇)

IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 开启动后,浏览器出现这个就是成功了

 IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 

 

 四、添加断点

跟IDEA的debugger  java代码一样,可进行前进跳入跳出等操作

IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 

当到达断点位置,浏览器页面出现debugger停止内容。。可进行正常的调试

 IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 IDEA 调试前端代码JS 及安装JetBrains IDE Support

 

 

这样操作的便利在于不需要F12 浏览器进入调试模式,及JS代码 不需要再写debugger来进行 调试

注意:浏览器F12 窗口,不可打开。否则会冲突无效

 

上一篇:Vue(五)——调试


下一篇:Python爬虫进阶 | 实战案例分析无限Debugger如何绕过