调试第三方模块

存在的问题

有时候需要在react项目中打断点调试，或者调试react源码

如果直接在node_modules中的文件打断点，添加注释或修改，在某些vsCode的版本中会提示nobonud breakPoint,不能进入断点

但最主要的问题，当项目重新初始化，所有的修改会被删除

安装插件

在vsCode市场中安装 Debugger for Chrome 插件

添加配置文件

选择Chrome

修改配置文件端口为项目端口

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000", //把端口修改为项目端口
      "webRoot": "${workspaceFolder}"
    }
  ]
}

使用 yarn link

• 将需要调试的第三方包复制到本地，并在node_modules中删除

• 进入第三方包的文件夹根目录执行，yarn link 创建一个链接

• 进入项目文件夹根目录执行，yarn link "package name" 将依赖添加到node_modules中

• 这时查看依赖包的路径为本地第三方包的路径

使用 yarn unlink

• 进入项目文件夹根目录执行，yarn unlink "package name" 将依赖添从node_modules中删除

• 进入第三方包的文件夹根目录执行，yarn unlink, 不在链接到全局

调试

如果react项目打断点不能被捕获，可以尝试在入口index.js文件中添加一行 debugger;

这样在调试器中点击下一步，会跳到下一个断点

打赏