http状态404 vscode_VS Code 调试完全攻略（5）：基于浏览器的 React 应用
翻譯：瘋狂的技術宅
作者：Charles Szilagyi
來源：charlesagile
正文共：1750?字
預計閱讀時間：7 分鐘
這次我們來研究怎樣把調試器連接到用 Create React App 生成的 React 程序。你將看到如何從 VS Code 啟動瀏覽器并檢查遠程異步 API 調用。它超級強大，同時又很容易，所以在調試 CRA 和 React 程序時沒有理由不這樣做。
VS Code 調試完全攻略系列目錄
- 基礎知識(點擊直達)
步進逐行調試(點擊直達)
編輯變量并重新執行函數(點擊直達)
launch.json 和調試控制臺(點擊直達)
基于瀏覽器的 React 應用(???本文)
調試用 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 应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 画眉鸟的作者是谁啊？
- 下一篇： 求步开头的成语接龙！