瀏覽器devtools系列(一)

做爲一個web開發人員免不了去和瀏覽器打交道,前端人員更是如此.

測試人員可能在代碼測試的時候容易定位,問題出如今哪裏.

不過供桌中經常使用的可能就是幾個,好比前端人員常常看控制面板調試問題,打印後臺數據等.

詳細瞭解 開發工具面板更有利於咱們瞭解瀏覽器,一個網頁的優化.

根據谷歌官方的文檔整理一系列關devtool的解釋,並嘗試介紹其應用場景

設備模式

能夠使用設備模式構建徹底響應式,移動有限的網絡

元素面板

使用元素面板能夠自由的操做DOM和CSS來迭代佈局和設計也頁面

控制面板

在開發期間，能夠使用控制檯面板記錄診斷信息，或者使用它做爲 shell在頁面上與JavaScript交互。

源代碼面板

在源代碼面板中設置斷點來調試 JavaScript ，或者經過Workspaces（工做區）鏈接本地文件來使用開發者工具的實時編輯器。

網絡面板

使用網絡面板瞭解請求和下載的資源文件並優化網頁加載性能

性能面板

使用時間軸面板能夠經過記錄和查看網站生命週期內發生的各類事件來提升頁面的運行時性能。

內存面板

若是須要比時間軸面板提供的更多信息，能夠使用「配置」面板，例如跟蹤內存泄漏。

應用面板

使用資源面板檢查加載的全部資源，包括IndexedDB與Web SQL 數據庫，本地和會話存儲，cookie，應用程序緩存，圖像，字體和樣式表。

安全面板

使用安全面板調試混合內容問題，證書問題等等。

審查面板

審查面板用的是Lighthouse, Lighthouse 是一個開源的自動化工具，用於改進網絡應用的質量。對頁面進行性能、可訪問性、SEO進行測試打分