Idea远程调试JavaScript

一直以来js调试是个头疼的事情, 虽然浏览器里调试也挺方便, 但是都没有idea调试功能强大, 好用.

本文以idea2017和谷歌浏览器为例. 并且静态web工程和动态web工程有些许差异, 看懂静态web的调试方法, 动态web基本看一眼就会了.

静态web工程

步骤

1. Chrome浏览器装好插件: JetBrains IDE Support
   

   

   idea的浏览器debug插件

2. 创建测试用的静态web工程.

3. 写好测试js代码

4. 配置Run/Debug Configuration(重点)
   

   

   Run/Debug Configuration
   
   Note: 图中URL配置项, 个人这么做的:

1. idea中打开将要调试的HTML页面

   
   
   

   image.png
2. 点击谷歌浏览器按钮, 即用谷歌访问这个页面, 此时地址栏会出现url地址, 将其复制进图Run/Debug Configuration的URL输入框中.
   
   

   image.png

5. idea debug模式运行

   
   
   

   image.png

效果

idea中就和调试java代码一样了.

image.png

浏览器中显示idea正在调试此浏览器, 当然不想调试了, 可以点击"取消".

image.png

动态web工程

1. 照常启动tomcat^[1]
2. 启动上文配置好的JavaScript debug.

其实就是在Run/Debug Configuration中同时配置tomcat和JavaScript debug.

---

1. 若您不会配置和启动web工程的tomcat, 需要先学习下: 'idea中怎么配置tomcat'. ↩