2025年3月6日 星期四

如何偵錯 React 專案

之前看到 vue 陣營,有瀏覽器相關外掛可以快速觀察值的變化,不知道 react 有沒有類似的擴充

套件?答案是有的,快點來看一下吧...



一般在瀏覽器下中斷點同樣適用




另外一種,官網有介紹的 React Developer Tools,屬於瀏覽器擴充套件(chrome)

安裝之後可以快速觀察 app 元素或相關值的變化



安裝後瀏覽器開發工具會出現 Components 以及Profiler 頁籤,這樣幫助開發



另外一種,是使用 VSCode 的擴充套件 JavaScript Debugger (Nightly)


安裝之後,在專案按下「F5」,此時會彈出 lanuch.json 檔案


置換 url 屬性值,替換為你的站台url 

然後,再你要觀察的位置下中斷點,重新整理頁面


其中,右上方也有可以方便操作偵錯的控制項


以上就是可以偵錯的方式


沒有留言:

張貼留言