Chrome DevTools：更清楚地排查 CSS 與加載問題

從一個具體的除錯問題開始

Matthias Rohmer 於 10 月 20 日發佈的十一月回顧，適合遇到彈層位置不對、預載入似乎沒有效果的開發者。無需一次採用所有功能：選一個有問題的頁面，沿對應面板檢查即可。本推薦依據官方文章與倉庫文件整理，本站沒有實測這些瀏覽器新功能。

看清錨點元素應該放在哪裡

Elements 中新的 position-area 編輯器，把錨點定位聲明變成可選擇的網格。下圖同時展示錨點、被定位的卡片與位置網格，幫助讀者在修改 CSS 前理解當前選中的區域。

可以找一個已有的錨點定位元素，只改一個區域，再用窄視口檢查。這是本站建議的小練習，不是公告中的測量結果；保留原值，便於隨時撤銷。

先讀警告，再決定是否改伺服器

Network 面板現在會解釋：啟用 Disable cache 時，為什麼忽略 Early Hints 中的預載入。這讓開發者能先檢查一個明確條件，而非直接歸咎於生產響應。更新還介紹了本地覆蓋與分析狀態的保留；它們是除錯便利性，並不證明網站加載速度已經提升。

智能體訪問需要單獨判斷

文章連結的 Chrome DevTools MCP 文件介紹了面向編碼智能體的 CSS 檢查與瀏覽器除錯，同時說明客戶端可以讀取或修改瀏覽器數據，正式支援 Chrome 與 Chrome for Testing，並提供使用統計和 CrUX 相關控制。連接私人瀏覽器前應讀清配置；功能公告不會自動授予智能體訪問登入會話的權限。