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}"
    }
  ]
}
  1. 修改源码的引用路径，以redux为例
  • 把package.json的module改成src/index.js
    node_modules

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


  1. 启动调试程序


THE END

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容