發(fā)現(xiàn)絕大多數(shù)前端開發(fā)者不會在IDE中對代碼進行調(diào)試，其中不乏一此已經(jīng)工作很多年的老手，很多人甚至認為IDE中不可能調(diào)試經(jīng)過編譯的代碼；其實，在IDE中調(diào)試前端代碼是完全可行的，即便是經(jīng)過編譯的代碼，只要有SourceMap，也完全可以實現(xiàn)在IDE中調(diào)試代碼；
為了提交開發(fā)效率，加強開發(fā)體驗，我特意研究了在 WebStorm 和 VSCode 中調(diào)試前端代碼的的配置方案，并撰寫成文，方便大家學習；
目錄
內(nèi)容
注意：
- 對于需要經(jīng)過編譯的項目，若要在IDE內(nèi)進行調(diào)試，則需要在編譯時開啟SourceMap；
一.WebStorm的調(diào)試配置步驟
- 給Chrome安裝
JetBrains IDE Support插件；
JetBrains插件
- 打開WebStorm的菜單：Run/Edit Configurations...；
WebStorm配置菜單路徑 - 點擊添加
+按鈕，選擇JavaScript Debug選項，以添加一個 JavaScript 的調(diào)試配置；
添加選項 - 配置以下字段，然后點擊Apply應用配置，并點擊ok完成配置；
- Name : 配置的名字；
- Share : 選中此復選框可使運行/調(diào)試配置可供其他團隊成員使用；
- URL : 項目服務的URL，即：在瀏覽器中訪問項目的URL地址；
- Browser : 運行項目的瀏覽器；由于我們是在Chrome中運行調(diào)試項目，所以這里選擇Chrome；
- Remote URL : 服務器上相應文件或文件夾的絕對URL地址；僅當項目根目錄下的本地文件夾結(jié)構(gòu)與服務器上的文件夾結(jié)構(gòu)不同時，才需要這些映射。如果結(jié)構(gòu)相同，WebStorm本身通過解析服務器上副本的URL地址來“檢索”本地文件的路徑。
配置內(nèi)容
下面是我整理的各個配置字段的詳細說明：
- 在項目中選擇剛才的配置選項，然后點擊Debug，Chrome瀏覽器便會自動啟動，；
啟動調(diào)試
瀏覽器自動啟動 -
現(xiàn)在可以在WebStorm中打斷點進行調(diào)試了，也可以使用條件斷點，甚至可以在WebStorm中查看變量的值，一切就像在瀏覽器中調(diào)試那樣，如下圖：
添加斷點 -
當代碼運行到斷點處時，WebStorm就會自動跳轉(zhuǎn)到斷點處，并高亮顯示，如下圖：
調(diào)試
二.VSCode的調(diào)試配置步驟
-
給VSCode安裝擴展插件
Debugger for Chrome插件；
安裝DebuggerForChrome插件 -
打開調(diào)試配置文件：
調(diào)試/打開配置或者調(diào)試/添加配置；
調(diào)試配置菜單路徑 -
如果項目中沒有
.vscode/launch.json配置文件，則會彈出如下窗口，供您選擇代碼的運行環(huán)境，在這里，我們選擇Chrome；
選擇代碼運行環(huán)境 -
配置調(diào)試配置對象，需要配置的字段有以下：
- name : 配置的名字；
- type : 項目的運行環(huán)境；
- request : 調(diào)試工具的運行方式；
- url : 項目的調(diào)試服務地址；
你也可以點擊添加配置...按鈕添加新的配置對象；
VSCode調(diào)試配置字段
-
打開調(diào)試窗口，選擇正確的調(diào)試配置對象，然后點擊啟動調(diào)試按鈕開始調(diào)試，如下圖：
VSCode_啟動調(diào)試 -
在代碼中添加斷點；
VSCode添加調(diào)試斷點 -
當代碼運行到斷點處，VSCode會自動跳轉(zhuǎn)到相應的斷點處，并高亮顯示，此時可以在VScode的調(diào)試窗口中查看變量、調(diào)用堆棧等等，與在瀏覽器里直接調(diào)試一樣；
VSCode_調(diào)試
三.在WebStorm中運行單個JS文件
如果你只是想簡單測試下一個不需要編譯的代碼段 或者 一個JS文件，通常我們的做法無非是以下兩種方式：
- 創(chuàng)建一個HTML文件，把被測試的代碼段或文件引入該HTML文件，然后用瀏覽器打開該HTML文件，在瀏覽器里測試；
- 把被測代碼復制到瀏覽器的控制里 或 Sinppets 中執(zhí)行；
這兩種方式都比較麻煩，都需要切換編輯政環(huán)境；
其實，如果你用的是 WebStorm 編輯器，會有更和簡單的調(diào)試方法，如下：
在被測試的文件上點擊右鍵， 然后選擇 Run ‘xxx.js’ 或者 Debug ‘xxx.js’;
-
Run ‘xxx.js’: 只運行該JS文件，不能設置斷點； -
Debug ‘xxx.js’: 可以通過編輯器 或 JS中的debugger命令設置斷點；
然后該JS文件就會在 WebStorm 中從開頭執(zhí)行到結(jié)尾，并且，通過 console 輸出的內(nèi)容會顯示在Debug 窗口中的 Console 空格中；如下圖：
另外，如果你打了斷點，代碼會停在斷點處，此時你還可以像在瀏覽器里調(diào)試一樣，可以查看 變量信息、調(diào)用堆棧 等等，如下圖：
這種調(diào)試方式的本質(zhì)
其實，當你這樣運行一個JS文件后，WebStorm 會自動生成一個 配置文件，如下圖所示：
該配置文件的詳細配置信息如下圖：
需要注意的是：
- 該文件的配置類型是
Node.js而不是JavaScript Debug，所以被調(diào)試的JS文件是通過 Node 執(zhí)行的； -
Node parameters: 在通過 Node 執(zhí)行被調(diào)試的 JS 文件時，傳給 node 命令的參數(shù)； -
Node interpreter: node 命令的路徑； -
Working dirctory: 項目的根目錄； -
JavaScript file: 被調(diào)試的 js 文件；
