最近在学习Draw.io项目，希望用IntelliJ对代码进行调试，因为项目中除了少部分后台代码外，几乎都是Java Script，所以希望找到一个好的JS调试方法，而不总是依赖于浏览器的开发者控制台。

网上大部分搜索结果都需要用到Chrome的JetBrains IDE support扩展，但是该扩展在Chrome扩展商店中已经下架了，而且历史最新版本2.0.10也已经无法在最新的Chrome中安装了。后来阴差阳错发现IntelliJ IDEA本身就带了JavaScript调试的功能，在此分享一下：

如上图，在Run/Debug Configurations中新建一个JsDebug项目，然后将需要调试的URL输入进去，并选择一个浏览器。

先启动服务端的Tomcat（如果需要启动服务端的程序的话），然后打好断点，再启动JsDebug项目，IntelliJ会自动拉起浏览器，跳转到指定的URl，然后就进入断点啦！

1.在程序运行中，我们总会遇到各种bug，而通过代码的追踪代码的运行顺序从而定位到问题的过程就叫做JS调试。
2.用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件

红框所标示的就是我们调试常用的按键
3.单步调试，找到运行的文件后点击pause script execution按钮再刷新页面（F5），就可以进入单步调试

点击Step over next function call就是程序逐步调试，每点击一次，就会按照代码执行顺序，向下执行一句代码。

4. 函数调试，step into next function call按钮，当经过函数调用时，点击Step into就可以进入该函数体内。
5． 断点调试，在实际项目代码量是很大的，使用单步调试就过于的浪费时间。而且有时我们是想要定位某一处的代码是否有错，所以就没有必要调试所有的代码。所以我们就可以使用断点调试，那么什么是断点调试呢？

首先，在想要定位问题的代码处，打断点，也就是代码停止执行的位置。如图所示点击红框处打该行的断点。（由于谷歌版本的不同，断点图标略有不同）

然后刷新页面（F5），就可以进入断点调试页面。点击Resume script execution按钮就可以调到下一个断点。（注意：当调到断点处时，此行代码为蓝色背景，表示此行代码即将执行但并未执行）

   当我们有的时候打了很多很多的代码，但是一旦中间有一个小的地方出现错误，
   那么后面的代码都将不会被执行，那么如何解决这种情况，
   就需要用到这节学到的知识 try …catch 和 断点

1、try …catch
首先说一下 它的 语法 ：

try{
	有可能导致错误的代码				
}catch(错误对象){
	错误信息
  }finally{
	不管代码对还是错，都会执行
 }

当然你也可以只写 try { }catch（）{ }
也可以只写 try { } finally{ }

用了这种写法即使它是错的但是它不会再导致后面正确的代码无法运行
简单的举个例子：很明显这里写法有问题，实参不能为null，所以这里错了，那么很显然后面的alert（11111）也不会被执行。

执行结果：所以很显然什么也没有。

然后，用上我们的 try…catch

执行结果：

便能执行后面的代码弹出111了

并且，点击“确定”之后，弹出了错误信息

2、断点：排错
当然除了上面的那种方式还有一种利用断点来寻找 错误的 方式

首先，
第一步：执行代码，右击，点击“检查” ，点击sources

第二步：找到js文件，然后选中
在这里插入图片描述
第三步：在行上点击设置断点，即可

最后一直点击下一步 （向下的箭头），进行调试
**
**
这个时候，你每次点击，他都会顺序向下执行代码，一旦发现有进行突然跳过的地方，那就很可能是出错的地方了