有些css屬性的值是函式，比如filter： filter: blur(1px) 新增了1畫素的模糊。當自動補全filter這樣的屬性是，開發者工具現在會自動填充乙個有意義的值，這樣你可以預覽有什麼可能的值。
當你檢視網路活動時，如果站點使用了文字壓縮來減少傳輸檔案的大小，你也許想看看壓縮前的大小。以前只有使用」large request rows「的時候能看到。但現在你只要用滑鼠懸停在size那一列上就可以看到。
假如你在如下行上加了斷點：
document.
queryselector
('#dante').
addeventlistener
('click'
, logwarning)
如果你enable了全部，那麼實際上你建立了3個斷點。
在indexeddb和cache窗格中現在會顯示所有資源總數。
chrome 73引入了「檢視細節」tooltip。現在可以在settings -> preferences -> elements -> show detailed inspect tooltips裡面關掉它。
因為tab在editor中用於輸入縮排，但只要就不能用它來切換焦點了。如果想使用tab鍵來切換焦點，可以在settings -> preferences -> sources -> enable tab moves focus中來設定。
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...
巧用chrome開發者工具
說明 截圖中的chrome版本為52，不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式，在settings 控制台按f1 preferences elements color format 快速選中dom節點，...
Chrome開發者工具面板
network面板可以記錄頁面上的網路請求的詳情資訊，從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊 包括狀態 資源型別 大小 所用時間 request和response等 可以根據這個進行網路效能優化。我把google官方 上介紹network面板的圖貼到這裡，該面板主...