一直以来js调试是个头疼的事情, 虽然浏览器里调试也挺方便, 但是都没有idea调试功能强大, 好用.
本文以idea2017和谷歌浏览器为例. 并且静态web工程和动态web工程有些许差异, 看懂静态web的调试方法, 动态web基本看一眼就会了.
静态web工程
步骤
-
Chrome浏览器装好插件:
JetBrains IDE Support
idea的浏览器debug插件 创建测试用的静态web工程.
写好测试js代码
-
配置
Run/Debug Configuration(重点)
Run/Debug Configuration
Note: 图中URL配置项, 个人这么做的:
-
idea中打开将要调试的HTML页面
image.png - 点击谷歌浏览器按钮, 即用谷歌访问这个页面, 此时地址栏会出现url地址, 将其复制进图Run/Debug Configuration的URL输入框中.
image.png
-
idea debug模式运行
image.png
效果
idea中就和调试java代码一样了.
image.png
浏览器中显示idea正在调试此浏览器, 当然不想调试了, 可以点击"取消".
image.png
动态web工程
- 照常启动tomcat[1]
- 启动上文配置好的
JavaScript debug.
其实就是在Run/Debug Configuration中同时配置tomcat和JavaScript debug.
-
若您不会配置和启动web工程的tomcat, 需要先学习下: 'idea中怎么配置tomcat'. ↩
