天天看點

React 學習筆記 —— React 開發者工具安裝

在chrome位址欄輸入 <code>chrome://extensions/</code> 回車

點選擴充程式

React 學習筆記 —— React 開發者工具安裝

打開應用商店(需要<code>VPN</code>)

React 學習筆記 —— React 開發者工具安裝

搜尋 react developer tools

React 學習筆記 —— React 開發者工具安裝

認準提供方 facebook,然後添加

React 學習筆記 —— React 開發者工具安裝

可以在擴充程式頁面看到已經添加成功

React 學習筆記 —— React 開發者工具安裝

将其釘住,友善檢視

React 學習筆記 —— React 開發者工具安裝

如果目前頁面是由react開發,則該開發者工具會被激活,例如:美團官網

React 學習筆記 —— React 開發者工具安裝

然後在控制台中,可以看到多出了兩個選項

React 學習筆記 —— React 開發者工具安裝

其中 Components中,包含了元件資訊,Profiler包含了性能資訊

React 學習筆記 —— React 開發者工具安裝
React 學習筆記 —— React 開發者工具安裝

注意,本地打開的網頁檔案不會激活開發者工具

React 學習筆記 —— React 開發者工具安裝

可以通過<code>VSCode</code> 插件:<code>Live Server</code>,運作本地服務

React 學習筆記 —— React 開發者工具安裝

繼續閱讀