VSCODE前端项目debugger

目前debugger for chrome插件，vscode内部已经集成，无需再次添加

本地html调试

以调试react源码为例

• 下载react源码到本地（选择tag为v18.2.0）
• 在项目根目录增加如下vscode配置（使用chrome浏览器）

• 点击debugger开关

• 增加点位
  • 如果直接在文件目录中找到源文件进行断点，vscode第一次往往不能捕获
  • 这时需要在已载入脚本找到对应的源文件进行断点

本地启动服务调试

以调试react源码为例

• 下载react18.2.0的zip包，或者git clone
• 修改srcipts/rollup/build.js中部分配置

  return {
    file: outputPath,
    format,
    globals,
    freeze: !isProduction,
    interop: false,
    name: globalName,
    sourcemap: true, //修改为true
    esModule: false,
  };
 

注释部分无法生成sourcemap的插件

修改build/node_modules/react-dom/cjs/react-dom.development.js.map，如果不修改，vscode加载的脚本为old源码，但是这里使用的是new代码，无法进一步调试

• 创建一个create-react-app项目

• 修改react和react-dom的包地址为本地(源码build后的地址)

• 下载包
• 增加vscode调试配置

• 命令行运行项目

npm run start

• 进行本地服务调试

• 添加断点（index.tsx）

  • 可以通过在项目的index.tsx文件中增加如图：

    

  • 调试源码时，通过单步往下走，找到对应的react源码文件

• 添加断点（react源码文件）

  • 可以通过已加载的文件，进行源码断点