VS Code 調試徹底攻略（5）：基於瀏覽器的 React 應用

做者：Charles Szilagyi

翻譯：瘋狂的技術宅

原文：https://charlesagile.com/debu...

未經容許嚴禁轉載

此次咱們來研究怎樣把調試器鏈接到用 Create React App 生成的 React 程序。咱們將看到如何從 VS Code 啓動瀏覽器並檢查遠程異步 API 調用。它超級強大，同時又很容易，因此在調試 CRA 和 React 程序時沒有理由不這樣作。

VS Code 調試徹底攻略系列目錄

1. 基礎知識
2. 步進逐行調試
3. 編輯變量並從新執行函數
4. launch.json 和調試控制檯
5. 基於瀏覽器的 React 應用
6. 調試用 TypeScript 開發並打包的 React 📦

代碼設置

爲了加快速度，我準備了一個簡單的 React 應用，你要作的就是檢出代碼並啓動 CRA 開發服務器：

git clone git@github.com:thekarel/debug-anything.git
cd debug-anything/react-cra
yarn # npm i
yarn start # npm start

應該能在控制檯中看到啓動成功的消息：

Compiled successfully!

You can now view react-cra in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.4:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

建立 launch.json

咱們須要爲這個小項目建立一個 launch.json。請參閱 [VS Code 調試徹底攻略（4）：launch.json 和調試控制檯]（https://charlesagile.com/vsco...）獲取更多詳細信息。

代碼中已經包含了這個配置文件。儘管很是簡單，但仍是逐行介紹一下，確保你可以瞭解它都作了些什麼事。打開 .vscode/launch.json：

看一下第 8 至 12 行：

{
    "type": "chrome",
    "request": "launch",
    "name": "Debug CRA web app in Chrome",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}/react-cra"
}

type：把調試器類型設置爲 chrome，這意味着咱們將在此配置中使用 Chrome 瀏覽器。咱們以前用過的另外一種類型是 node，經過安裝擴展能夠獲得更多其餘類型。順便說一下，還有一個爲 Firefox🦊 準備的插件

每一個調試器 type 都有其特定的配置，因此請試着用 VS Code 隨附的便捷自動完成功能。

request：被設置的 launch 選項意味着咱們將會啓動瀏覽器進行調試，並將加載下面指定的地址。它與你手動執行的操做並無太大區別，可是會自動爲你執行代碼。另外一種可能性是 attach 到已經運行的調試服務器，這在當前的配置下是不可能的。最後，當你中止調試會話時，VS Code 會負責關閉 Chrome。

name：你喜歡的任何名稱，它將顯示在調試工具欄中：

url：瀏覽器將要加載的URL——必須與運行 CRA 開發服務器的 URL 相匹配！

webRoot：項目源文件的路徑。 不幸的是，Source map 在 CRA 開發模式下並不可靠*。

CRA 調試祕訣

那麼怎樣才能把這些都聯繫在一塊兒呢？調試過程由如下步驟組成。

首先，你能夠用 npm start 在控制檯中啓動開發服務器，順便說一下，這也能夠在 VS Code 中完成。

接下來，從調試側邊欄中或經過按 F5 鍵啓動調試瀏覽器：

像往常同樣向代碼添加斷點：

而後在調試瀏覽器中與網站進行交互，可是此次啓用了調試功能💪讓咱們來看看在示例程序中成功的 fetch 是什麼樣子的：

能夠經過使用工具欄中的 「restart」 來從新啓動會話並使應用恢復到原始狀態：

你可能想知道，這是否會比在「普通的」 Chrome 中打開頁面並使用 dev tools 更好？在這種狀況下差別並不大。可是一個明顯的好處是，即便關閉瀏覽器或退出代碼，也能夠保留斷點。這也適用於監視表達式！說到監視表達式。。。

彩蛋：添加監視表達式

咱們已經學會了怎樣檢查和編輯局部變量。轉到變量部分並查看其值是可行的。不過當你要處理複雜的對象時，重複打開嵌套結構會變得很煩人。

VS Code 提供了一個更溫馨的解決方案：你能夠設置 監視表達式，該表達式會在每一個調試步驟中從新評估。甚至能夠用點符號來查詢嵌套屬性（例如post.title）。

確保在調試側欄中打開了 Watch，並添加了一些表達式：

讓咱們嘗試 fetch 一個存在的內容，並留意表達式：

經過這些表達式，也很容易檢查出問題的路徑，此次注意 error：

你可能已經猜到了，上面所用到的方法適用於任何基於瀏覽器的應用。在這種狀況下，要作的設置大體以下：

• 啓動開發服務器
• 經過配置你的 launch.json 在調試瀏覽器中打開應用
• 在源代碼中設置斷點
• 當你須要反覆檢查同一屬性時，能夠設置監視表達式
• 用 step 命令檢查代碼流
• 從新啓動函數或整個應用

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...