瀏覽器詞條 1-58

開發者工具DevTools

也常叫做：DevTools、開發工具、F12

你可能會這樣說

AI 說「打開開發者工具看主控台」——原來瀏覽器內建一整組免費的檢修工具，按個鍵就叫出來了。

開發者工具是瀏覽器內建的網站檢修工作間，按 F12（Mac 是 Command+Option+I）叫出來，平常藏得好好的。

最常用三區：主控台看錯誤、元素面板看結構、網路面板看資料往來。截圖給 AI 時連它一起入鏡，資訊量直接翻倍。

不用怕裡面密密麻麻——你只要學會「打開、切分頁、截圖貼給 AI」這個循環，除錯戰力就贏過大多數人。

✕ Uncaught TypeError: button is null
網頁出事時，第一手線索都寫在這。

頁面結構的即時地圖：點任一元素，旁邊就是它的樣式，還能現場改著玩（只改你眼前的畫面，不動原始碼）。

這頁載入了哪些檔案、各花多久、API 回了什麼——載入慢的元兇就藏在這。

不用看懂全部：會開啟、會切分頁、會截圖貼給 AI，就是超能力。

圖 1-58　三個最常用面板：看錯誤、看結構、看來往。

中文就可以

請帶我認識開發者工具：
1. 教我開啟它，還有三個最常用面板的位置。
2. 每個面板用我的網站實際示範一次能看什麼。
3. 出問題時，截哪個畫面給你看最有效？