每日前端夜話第344篇

翻譯：瘋狂的技術宅

作者：Charles Szilagyi

來源：charlesagile

正文共：1750?字

預計閱讀時間：7 分鐘

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

VS Code 調試完全攻略系列目錄

1. 基礎知識(點擊直達)

2. 步進逐行調試(點擊直達)

3. 編輯變量并重新執行函數(點擊直達)

4. launch.json 和調試控制臺(點擊直達)

5. 基于瀏覽器的 React 應用(???本文)

6. 調試用 TypeScript 開發并打包的 React ??

代碼設置

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

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

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

1Compiled?successfully!
2
3You?can?now?view?react-cra?in?the?browser.
4
5??Local:????????????http://localhost:3000
6??On?Your?Network:??http://192.168.0.4:3000
7
8Note?that?the?development?build?is?not?optimized.
9To?create?a?production?build,?use?yarn?build.

創建 launch.json

我們需要為這個小項目創建一個 launch.json。請參閱 [VS Code 調試完全攻略(4)：launch.json 和調試控制臺](https://charlesagile.com/vscode-launch-json-and-the-debug-console)獲取更多詳細信息。

代碼中已經包含了這個配置文件。盡管非常簡單，但還是逐行介紹一下，確保你能夠了解它都做了些什么事。打開 .vscode/launch.json：

看一下第 8 至 12 行：

1{
2????"type":?"chrome",
3????"request":?"launch",
4????"name":?"Debug?CRA?web?app?in?Chrome",
5????"url":?"http://localhost:3000",
6????"webRoot":?"${workspaceFolder}/react-cra"
7}

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 命令檢查代碼流

• 重新啟動函數或整個應用

原文鏈接

https://charlesagile.com/debug-create-react-app

?

往期精彩回顧

怎樣為你的 Vue.js 單頁應用提速

10 個實用的 JavaScript 小技巧

它改變了 JavaScript 的體系結構——Webpack 5 Module Federation

與 JavaScript 模塊相關的所有知識點

我們是怎樣優化 V8 中的指針壓縮的

當一個模塊被導入兩次時，會發生什么？

ReactJS 與 VueJS：兩種流行前端 JS 框架之戰

十分鐘搞定 TypeScript + webpack 配置

18 個漂亮的 Bootstrap 模板

前端程序員要懂的 UI 設計知識

如果覺得有幫助，請點擊“在看”讓更多小伙伴知道

總結

以上是生活随笔為你收集整理的http状态404 vscode_VS Code 调试完全攻略（5）：基于浏览器的 React 应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。