vsc結合chrome調試源碼

前言

調試源碼也不是第一次了，每次都煞費苦心去clone代碼，然后再翻出打包文件修改source-map。
近日，突然間打通了任督二脈，發(fā)覺其實完全可以用vsc調試，比起chrome那可就是鳥槍換炮……心疼抱住傻了多年的自己。

開始

  1. 下載 Debugger for Chrome


    如圖
  2. 創(chuàng)建調試配置

  • 點擊左邊那個debugger的蟲子


  • 然后選添加配置


    展開選添加配置
選這個
  • 配置文件.vscode/launch.json 
{
  // 使用 IntelliSense 了解相關屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
  1. 修改源碼的引用路徑，以redux為例
  • 把package.json的module改成src/index.js
    node_modules

  • 在想調試的地方打上斷點


  1. 啟動調試程序


THE END

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容