快捷導(dǎo)航

使用VScode 插件debugger for chrome 調(diào)試react源碼的方法

更新時間：2019年09月13日 08:48:25 作者：擱淺

這篇文章主要介紹了使用VScode 插件debugger for chrome 調(diào)試react源碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

代碼調(diào)試，是我們前端日常工作中不可或缺的能力了吧！

在面向dom開發(fā)的時代，我們開發(fā)時直接在chrome里打斷點是很方便的。
但是，當(dāng)我們面向組件開發(fā)時(react),瀏覽器拿到的是我們編譯過后的代碼，還想在瀏覽器里打斷點幾乎是不可能的了。

場景

那怎么辦，方法總是比困難多！愚蠢的我想到了console/debugger??！一直在使用，雖然很不方便（打印太多實在太亂！上線還要配置刪除掉），但是我竟然使用了很久（這真是一個糟糕的編碼習(xí)慣吧）。直到今天，我想研究一下react源碼，需要斷點的地方有很多，不可能在手動console/debugger了??！我才想到我為什么不用瀏覽器debugger？

Debugger for Chrome

因為我使用的編譯器是VS code，機智的我終于開竅了！找來了 Debugger for Chrome插件。

但是純英文的文檔不太友好，雖然我英語六級也是搞了很久才弄好，下面就介紹記錄一下mac系統(tǒng)下的使用方法吧。完整文檔需要可以自己看文檔

1、加載插件

2、配置插件

點擊小蟲子；選擇chrome；

然后點擊小輪子，打開launch.json文件如下：

{
 // 使用 IntelliSense 了解相關(guān)屬性。 
 // 懸停以查看現(xiàn)有屬性的描述。
 // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [

  {
   "type": "chrome",
   "request": "launch", //launch / attach 兩種方式；這里使用launch
   "name": "Launch Chrome against localhost",//開心的設(shè)置個名字
   "url": "http://localhost:9000",//項目地址
   "webRoot": "${workspaceFolder}/react-demo/"
   //這一塊設(shè)置時要注意！webRoot指定網(wǎng)絡(luò)服務(wù)器根目錄的工作區(qū)絕對路徑。
   ${workspaceFolder}應(yīng)該時表示編輯器里的根目錄，我的項目是react-demo，
   所以選擇webRoot修改如上，具體路徑還跟webpack配置的資源根目錄也有關(guān)系

  }
  //還有很多可以配置的屬性，可以通過上面文檔查看
 ]
}

3、開始調(diào)試

點擊小按鈕，就開始調(diào)試模式了；像下面就能在我們的源代碼打斷點；