利用webstorm调试(debug)JavaScript应用（

调试应用之前，首先分清楚两点：

一、调试node.js应用

二、调试浏览器应用

---

上述两种调试基本上常见有：

• 基于webpack打包的前端各种APP应用，
• 基于gulp等等各种打包完应用

他们的基本运作原理是：

利用node.js引擎运行打包工具，打包你正在开发的项目，然后创建一个服务器，来响应你当前打包好的应用资源。

就本质上来说，和打包出几个静态资源，然后丢到nginx中做反向代理是一样的

所以我们一定要明白，如果是此时，你的调试的目标是什么？

• node.js服务器
• 前端应用

答案是： 浏览器的前端应用。

那么我们知道了目标，其实你可以直接在浏览器打断点了，但是又因为webpack的混淆机制以及各种各样的tree shaking,往往你不能够直接的访问到你想要打断点的位置。
但是我们可以利用source-map机制来处理，或者直接连接chrome的JavaScript内核引擎来断点。
webstorm就是如此

我们在 run/Debug configurations 中配置好项目的参数

• Name 你的配置名称（这里我默认起名字为localhost:8080,当然你可以随便起一个名字即可）
• URL 你的调试URL地址，调试URL配置完成后会自动打开当前地址，并连接打开的浏览器的内核去调试。
• Browser: 选择浏览器，在这里我选择了chrome浏览器来调试。
• [复选框]Ensure breakpoints are detected when loading scripts 确保在加载JavaScript的时候自动暂停在你的断点处，会影响性能。
• Remote URLs of local files(optional) 远程URL映射你本地文件的位置（在这里我配置了所有文件，所以任何一个JS应该都可以打断点了）

配置断点调试

• before launch:Activate tool window 在启动之前做哪些任务（在这里我没有什么需要处理的，就没有配置），你也可以在这里配置 npm命令，webstorm会在npm运行成功后，再开始运行你的命令。

  
  启动前任务

说完了调试前端应用，我们说一下调试node.js应用

node.js调试应用 往往跟随者打包程序 webpack以及服务端框架
服务端框架包括：

• express
• koa
• egg
  等等，每一个服务端框架都有完整的IDE调试解决方案，你可以参考官网来实现。

1. egg调试解决方案

最后补充一个webstorm调试异步方法的小技巧

官网截图

翻译：
webstorm 支持调试异步客户端程序上的JavaScript代码。在webstorm上面为异步程序打断点，停在异步代码上，断点马上就会击中你的异步程序，从而跳进异步方法。而一个新的调用栈也会建立在 Frames面板上。webstorm显示全部的调用栈，包括了最开始调用异步程序的调用栈。

这张图片展示了一个异步程序如何调试断点。
【【图】】
断点停留在了第三行，然后会在第五行停留，在第五行停留的时候，点击step into，断点就会停留在第五行（随即就会立刻进入第六行，你的异步调用栈）

这种异步调用默认就会触发，如果你不想要触发异步回调方法，你可以在Registry中设置 js.debugger.async.call.stack.depth 值为0