vsc结合chrome调试源码

前言

调试源码也不是第一次了，每次都煞费苦心去clone代码，然后再翻出打包文件修改source-map。
近日，突然间打通了任督二脉，发觉其实完全可以用vsc调试，比起chrome那可就是鸟枪换炮……心疼抱住傻了多年的自己。

开始

1. 下载 Debugger for Chrome

   
   
   

   如图
2. 创建调试配置

• 点击左边那个debugger的虫子

  
  
  

• 然后选添加配置

  
  
  

  展开选添加配置

选这个

• 配置文件.vscode/launch.json

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: 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}"
    }
  ]
}

3. 修改源码的引用路径，以redux为例

• 把package.json的module改成src/index.js
  
  

  node_modules

• 在想调试的地方打上断点

  
  
  

4. 启动调试程序

   
   
   

THE END