使用VS code 插件debugger for chrome 調試react源碼

中秋節快樂！不知道大家公司有沒有把程序員當人尼—·-

代碼調試，是咱們前端平常工做中不可或缺的能力了吧！
在面向dom開發的時代，咱們開發時直接在chrome裏打斷點是很方便的。
可是，當咱們面向組件開發時(react),瀏覽器拿到的是咱們編譯事後的代碼，還想在瀏覽器裏打斷點幾乎是不可能的了。

場景

那怎麼辦，方法老是比困難多！愚蠢的我想到了console/debugger！！一直在使用，雖然很不方便（打印太多實在太亂！上線還要配置刪除掉），可是我居然使用了好久（這真是一個糟糕的編碼習慣吧）。直到今天，我想研究一下react源碼，須要斷點的地方有不少，不可能在手動console/debugger了！！我纔想到我爲何不用瀏覽器debugger？

Debugger for Chrome

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

可是純英文的文檔不太友好，雖然我英語六級也是搞了好久才弄好，下面就介紹記錄一下mac系統下的使用方法吧。完整文檔須要能夠本身看文檔

一、加載插件

二、配置插件

點擊小蟲子；選擇chrome；

而後點擊小輪子，打開launch.json文件以下：

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

        {
            "type": "chrome",
            "request": "launch", //launch / attach 兩種方式；這裏使用launch
            "name": "Launch Chrome against localhost",//開心的設置個名字
            "url": "http://localhost:9000",//項目地址
            "webRoot": "${workspaceFolder}/react-demo/"
            //這一塊設置時要注意！webRoot指定網絡服務器根目錄的工做區絕對路徑。
            ${workspaceFolder}應該時表示編輯器裏的根目錄，個人項目是react-demo，
            因此選擇webRoot修改如上，具體路徑還跟webpack配置的資源根目錄也有關係

        }
        //還有不少能夠配置的屬性，能夠經過上面文檔查看
    ]
}

三、開始調試

點擊小按鈕，就開始調試模式了；像下面就能在咱們的源代碼打斷點；

開始調試後，多出來一個小窗，能夠控制斷點走向，以及結束暫停、調試。下方會顯示斷點列表。

同時，會爲咱們打開咱們配置的url頁面；

還能夠看到調用堆棧，和打印臺，能夠說十分方便

OK到這裏咱們的react調試配置已經可使用了，不用在手動寫debug了！能夠開始愉快的搬磚了

若有不妥！歡迎指正