使用 WebStorm 調試現代前端應用

• [時間]: 2019/10/30
• [keyword]: 前端, webstrom

儘管如今 Chrome DevTools 調試已經足夠好用了, 可是仍是有幾點讓筆者感受不爽:

1. 須要手動寫 debugger 不能直接打斷點 (若是你開了 eslint, 那就是車禍現場, 很難受)
2. 調試時看其餘文件的源碼不方便
3. 最重要的固然是統一快捷鍵（誤）

本文適用與 jetbrains 家的其餘 IDE, 大部份內容來源均爲 webstrom 的 這一篇博文

準備工做

1. 安裝 JavaScript Debugger 插件, 找到 plugins 而後搜索 JavaScript 便可搜索到.
2. 爲 Chrome 安裝 JetBrains IDE Support 擴展.
3. 點擊右上角的 Add Configuration , 而後會彈出 Run/Debug Configurations 對話框, 這時候點擊 + 號, 在列表中選擇 JavaScript Debug.

上面的步驟在文章結尾處都有圖片示例, 文字沒看懂的能夠跳到結尾看圖片哦.

例: React

建立一個 app, 而且啓動

npx create-react-app my-app
cd my-app
npm start
複製代碼

注: 默認狀況下該 app 會運行在 3000 端口, 若是手動設置了運行端口那麼下面的網址也須要改變.

從新打開 準備工做 的第三步, 在 URL 一欄中輸入 http://localhost:3000 而且保存該配置, 最後點擊像小蟲子同樣的圖標就能夠開始調試了.

在進入調試模式後在 ide 中的打斷點下次程序執行到斷點處 app 就會自動進入調試模式.

除了 React, Vue, Angular, Electron 都是能夠調試的, 步驟也都相同.

可能出現的問題以及解決方法

1. 點擊調試後沒反應.

   • 請肯定填寫的調試 URL 是正確的.

2. 調試時打開的 chrome 不是正常使用的 chrome, 沒有數據.(下面兩個路徑, 都已經過用 chrome 打開 chrome://version/找到, 參考附錄 設置 chrome path 和 user_data 部分)

   • 緣由1: 未設置 chrome 的正確執行路徑.
   • 解決方法: 打開 IDE 的設置頁面, 找到 Tools\Web Browsers, 找到 chrome, 編輯 path 部分, 設置爲正確的路徑.
   • 這個問題的第一個可能緣由是未設置 user_data, chrome 有一個 user_data 數據, IDE 啓動 chrome 的默認狀況下會使用 IDE 內部的 user_data, 這就會運行一個什麼數據都沒有的 chrome.
   • 解決方法: 打開 IDE 的設置頁面, 找到 Tools\Web Browsers, 找到 chrome, 點擊右邊的編輯圖片, 勾選Use custom user data directory, 而後填入正確的路徑便可.

3. 調試時每次都打開一個新的窗口.

   • 這個問題的緣由是由於 IDE 啓動 chrome 的時候會爲 chrome 添加 --remote-debugging-port 啓動參數, 若是此時具備相同 user_data 的 chrome 啓動則會新啓動一個 chrome 窗口.

   • 解決方法: 先關閉 chrome, 而後經過 IDE 啓動後, 使用被 IDE 啓動的 chrome 便可.

在 vue-cli3+ 建立的項目中使用

在 vue-cli3+ 下建立的項目開發環境下 webpack devtool 是 cheap-module-eval-source-map，會致使 IDE 沒法定位到文件位置，從而致使調試失效，在vue.config.js中修改成 source-map便可.

1. 在項目根目錄建立 vue.config.js 文件，若是已有則無需建立

2. 修改 webpack devtool 爲以下代碼 (若是讀者使用的是 chainWebpack 來配置 webpack, 請自行搜索若是修改 webpack 配置。)

   module.exports = {
       configureWebpack: config => {
           if (process.env.NODE_ENV === 'development') {
               config.devtool = 'source-map';
           }
       }
   };
   複製代碼

附錄

安裝插件

新增調試配置

設置 chrome path 和 user_data

沒有感情結束語: 本文一樣發於我的博客