VSCode是我目前最常用的編輯器，大大小小的專案都可以使用他來完成。記得一開始學習React時，使用的編輯器Atom，但是因為Atom開啟的速度以及他不定時的崩潰讓我轉到VSCode，從此就回不去了。

眾多的編輯器中，我認為VSCode在Debug方面是做的最完善的一個了，善用Debug工具能夠事半功倍這件事情我想是不爭的事實。使用React developer tools於瀏覽器中進行Debug是每個react開發者都會遇到的一件事，但是難以設定中斷點來逐步執行是我覺得是十分彆扭的一件事，我們總是需要將想要觀察的結果console.log出來才可以進行觀察，而這個痛處我們可以使用VSCode來幫我們解決。

使用create-react-app建立一個新專案

create-react-app將建立React專案所需要設定的Webpack、Babel等等的功夫給省略下來，此外也提供許多有用的腳本讓我們使用，我們可以快速的使用create-react-app來建立一個新專案，並且開啟Webpack的測試伺服器。

    
npm install -g create-react-app yarn    # 安裝create-react-app套件到global
create-react-app debugme                # 建立debugme專案
cd debugme
npm start                               # 開啟測試伺服器

此時我們可以透過瀏覽器，瀏覽localhost:3000就可以看到React的Demo頁面。

安裝Debugger for Chrome套件

  1. 打開VSCode的擴充套件清單
  2. 搜尋chrome
  3. 安裝Debugger for chrome
  4. 安裝後ReloadVSCode

Image

設定專案的Debug組態

  1. 先用VSCode打開我們剛剛建立的debugme專案
  2. 切換到Debug面板選擇新增組態(Add configuration)，此時會在專案下的.vscode建立一個launch.json檔案。
  3. 新增一個Chrome: Launch的組態(他會自動產生兩個組態，我們留下一個即可)
  4. 將url參數的Port號碼改為3000(如果開在不同Port就改成相對應的Port)

Image

組態設定檔設定完成後應該會是這樣

    
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

按下F5開始Debug吧!

接下來我們就可以利用VSCode的Debug功能，設定中斷點，逐步執行，意外捕捉等等的功能來進行調試。

Image

我們可以發現瀏覽器內置的Debug也是與VSCode同步的，因此我們也可以在瀏覽器中控制Debug流程。

Image

References:
1. Debugging React Like a Champ with VSCode
2. Debugger for Chrome