发现绝大多数前端开发者不会在IDE中对代码进行调试，其中不乏一此已经工作很多年的老手，很多人甚至认为IDE中不可能调试经过编译的代码；其实，在IDE中调试前端代码是完全可行的，即便是经过编译的代码，只要有SourceMap，也完全可以实现在IDE中调试代码；
为了提交开发效率，加强开发体验，我特意研究了在 WebStorm 和 VSCode 中调试前端代码的的配置方案，并撰写成文，方便大家学习；

目录

• 一.WebStorm的调试配置步骤
• 二.VSCode的调试配置步骤
• 三.在WebStorm中运行单个JS文件
  • 这种调试方式的本质

内容

注意：

• 对于需要经过编译的项目，若要在IDE内进行调试，则需要在编译时开启SourceMap；

一.WebStorm的调试配置步骤

1. 给Chrome安装JetBrains IDE Support插件；
   
   JetBrains插件

2. 打开WebStorm的菜单：Run/Edit Configurations...；
   
   WebStorm配置菜单路径
3. 点击添加+按钮，选择 JavaScript Debug 选项，以添加一个 JavaScript 的调试配置；
   
   添加选项
4. 配置以下字段，然后点击Apply应用配置，并点击ok完成配置；
   • Name : 配置的名字；
   • Share : 选中此复选框可使运行/调试配置可供其他团队成员使用；
   • URL : 项目服务的URL，即：在浏览器中访问项目的URL地址；
   • Browser : 运行项目的浏览器；由于我们是在Chrome中运行调试项目，所以这里选择Chrome；
   • Remote URL : 服务器上相应文件或文件夹的绝对URL地址；仅当项目根目录下的本地文件夹结构与服务器上的文件夹结构不同时，才需要这些映射。如果结构相同，WebStorm本身通过解析服务器上副本的URL地址来“检索”本地文件的路径。
     
     配置内容

下面是我整理的各个配置字段的详细说明：

WebStorm调试配置说明

5. 在项目中选择刚才的配置选项，然后点击Debug，Chrome浏览器便会自动启动，；
   
   启动调试
   
   
   浏览器自动启动

6. 现在可以在WebStorm中打断点进行调试了，也可以使用条件断点，甚至可以在WebStorm中查看变量的值，一切就像在浏览器中调试那样，如下图：

   
   
   添加断点

7. 当代码运行到断点处时，WebStorm就会自动跳转到断点处，并高亮显示，如下图：

   
   
   调试

二.VSCode的调试配置步骤

1. 给VSCode安装扩展插件 Debugger for Chrome 插件；
   

   安装DebuggerForChrome插件

2. 打开调试配置文件：调试/打开配置 或者 调试/添加配置；
   

   调试配置菜单路径

3. 如果项目中没有 .vscode/launch.json 配置文件，则会弹出如下窗口，供您选择代码的运行环境，在这里，我们选择 Chrome；
   

   选择代码运行环境

4. 配置调试配置对象，需要配置的字段有以下：

   • name : 配置的名字；
   • type : 项目的运行环境；
   • request : 调试工具的运行方式；
   • url : 项目的调试服务地址；
     你也可以点击 添加配置... 按钮添加新的配置对象；
     
     VSCode调试配置字段

5. 打开调试窗口，选择正确的调试配置对象，然后点击启动调试按钮开始调试，如下图：
   

   VSCode_启动调试

6. 在代码中添加断点；

   
   
   VSCode添加调试断点

7. 当代码运行到断点处，VSCode会自动跳转到相应的断点处，并高亮显示，此时可以在VScode的调试窗口中查看变量、调用堆栈等等，与在浏览器里直接调试一样；

   
   
   VSCode_调试

三.在WebStorm中运行单个JS文件

如果你只是想简单测试下一个不需要编译的代码段 或者 一个JS文件，通常我们的做法无非是以下两种方式：

• 创建一个HTML文件，把被测试的代码段或文件引入该HTML文件，然后用浏览器打开该HTML文件，在浏览器里测试；
• 把被测代码复制到浏览器的控制里 或 Sinppets 中执行；

这两种方式都比较麻烦，都需要切换编辑政环境；

其实，如果你用的是 WebStorm 编辑器，会有更和简单的调试方法，如下：

在被测试的文件上点击右键， 然后选择 Run ‘xxx.js’ 或者 Debug ‘xxx.js’;

WebStorm单文件调试1

• Run ‘xxx.js’ : 只运行该JS文件，不能设置断点；
• Debug ‘xxx.js’ : 可以通过编辑器 或 JS中的 debugger 命令设置断点；
  然后该JS文件就会在 WebStorm 中从开头执行到结尾，并且，通过 console 输出的内容会显示在Debug 窗口中的 Console 空格中；如下图：

WebStorm单文件调试2

另外，如果你打了断点，代码会停在断点处，此时你还可以像在浏览器里调试一样，可以查看 变量信息、调用堆栈 等等，如下图：

WebStorm单文件调试3

这种调试方式的本质

其实，当你这样运行一个JS文件后，WebStorm 会自动生成一个 配置文件，如下图所示：

WebStorm单文件调试4

该配置文件的详细配置信息如下图：

WebStorm单文件调试5

需要注意的是：

• 该文件的配置类型是 Node.js 而不是 JavaScript Debug，所以被调试的JS文件是通过 Node 执行的；
• Node parameters : 在通过 Node 执行被调试的 JS 文件时，传给 node 命令的参数；
• Node interpreter : node 命令的路径；
• Working dirctory : 项目的根目录；
• JavaScript file : 被调试的 js 文件；