在vscode 上搭建 React 源代碼調試環境(16.8v)

倉庫地址

克隆此倉庫

git clone https://gitee.com/frontend-qin/react-source-code.git

配置 vscode

安裝插件 Debugger for Chrome 後，

• 如果是第一次安裝使用的話，點擊 創建 下邊的文件，然後 再點擊 右下角的 添加配置按鈕

或者粘貼下邊這個
url：必須是你的 react 項目啓動的開發環境地址，否則會是404

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000", // 改爲開發環境啓動的url
      "webRoot": "${workspaceFolder}",
    }
  ]
}

• 如果不是的話，修改下邊的url 爲你的開發地址
  

先啓動你的開發環境

yarn start

接着啓動調試

接着再你要調試的代碼目錄下，這裏是src/react（源代碼） 目錄，進行打斷點，

• 點擊綠色按鈕後，會出現如下界面