調(diào)試應(yīng)用之前，首先分清楚兩點：
一涝涤、調(diào)試node.js應(yīng)用
二、調(diào)試瀏覽器應(yīng)用
上述兩種調(diào)試基本上常見有：
- 基于webpack打包的前端各種APP應(yīng)用岛杀，
- 基于gulp等等各種打包完應(yīng)用
他們的基本運(yùn)作原理是：
利用node.js引擎運(yùn)行打包工具阔拳，打包你正在開發(fā)的項目，然后創(chuàng)建一個服務(wù)器类嗤，來響應(yīng)你當(dāng)前打包好的應(yīng)用資源糊肠。
就本質(zhì)上來說辨宠，和打包出幾個靜態(tài)資源，然后丟到nginx中做反向代理是一樣的
所以我們一定要明白货裹，如果是此時嗤形，你的調(diào)試的目標(biāo)是什么？
- node.js服務(wù)器
- 前端應(yīng)用
答案是： 瀏覽器的前端應(yīng)用弧圆。
那么我們知道了目標(biāo)派殷，其實你可以直接在瀏覽器打斷點了，但是又因為webpack的混淆機(jī)制以及各種各樣的tree shaking,往往你不能夠直接的訪問到你想要打斷點的位置墓阀。
但是我們可以利用source-map機(jī)制來處理毡惜，或者直接連接chrome的JavaScript內(nèi)核引擎來斷點。
webstorm就是如此
我們在 run/Debug configurations 中配置好項目的參數(shù)
- Name 你的配置名稱（這里我默認(rèn)起名字為localhost:8080,當(dāng)然你可以隨便起一個名字即可）
- URL 你的調(diào)試URL地址斯撮，調(diào)試URL配置完成后會自動打開當(dāng)前地址经伙，并連接打開的瀏覽器的內(nèi)核去調(diào)試。
- Browser: 選擇瀏覽器勿锅，在這里我選擇了chrome瀏覽器來調(diào)試帕膜。
- [復(fù)選框]Ensure breakpoints are detected when loading scripts 確保在加載JavaScript的時候自動暫停在你的斷點處，會影響性能溢十。
- Remote URLs of local files(optional) 遠(yuǎn)程URL映射你本地文件的位置（在這里我配置了所有文件垮刹，所以任何一個JS應(yīng)該都可以打斷點了）
-
before launch:Activate tool window 在啟動之前做哪些任務(wù)（在這里我沒有什么需要處理的，就沒有配置）张弛，你也可以在這里配置 npm命令荒典，webstorm會在npm運(yùn)行成功后，再開始運(yùn)行你的命令吞鸭。
啟動前任務(wù)
說完了調(diào)試前端應(yīng)用寺董，我們說一下調(diào)試node.js應(yīng)用
node.js調(diào)試應(yīng)用 往往跟隨者打包程序 webpack以及服務(wù)端框架
服務(wù)端框架包括：
- express
- koa
- egg
等等，每一個服務(wù)端框架都有完整的IDE調(diào)試解決方案刻剥，你可以參考官網(wǎng)來實現(xiàn)遮咖。
最后補(bǔ)充一個webstorm調(diào)試異步方法的小技巧
翻譯：
webstorm 支持調(diào)試異步客戶端程序上的JavaScript代碼。在webstorm上面為異步程序打斷點造虏，停在異步代碼上御吞，斷點馬上就會擊中你的異步程序，從而跳進(jìn)異步方法漓藕。而一個新的調(diào)用棧也會建立在 Frames面板上陶珠。webstorm顯示全部的調(diào)用棧，包括了最開始調(diào)用異步程序的調(diào)用棧撵术。
這張圖片展示了一個異步程序如何調(diào)試斷點背率。
【【圖】】
斷點停留在了第三行话瞧，然后會在第五行停留嫩与，在第五行停留的時候寝姿，點擊step into，斷點就會停留在第五行（隨即就會立刻進(jìn)入第六行划滋，你的異步調(diào)用棧）
這種異步調(diào)用默認(rèn)就會觸發(fā)饵筑，如果你不想要觸發(fā)異步回調(diào)方法，你可以在Registry中設(shè)置 js.debugger.async.call.stack.depth 值為0
