瀏覽器devtools系列(一)

• 2019 年 10 月 27 日
• 筆記

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

測試人員可能在程式碼測試的時候容易定位,問題出現在哪裡.

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

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

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

設備模式

可以使用設備模式構建完全響應式,移動有限的網路

元素麵板

使用元素麵板可以自由的操作DOM和CSS來迭代布局和設計也頁面

控制面板

在開發期間，可以使用控制檯面板記錄診斷資訊，或者使用它作為 shell在頁面上與JavaScript交互。

源程式碼面板

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

網路面板

使用網路面板了解請求和下載的資源文件並優化網頁載入性能

性能面板

使用時間軸面板可以通過記錄和查看網站生命周期內發生的各種事件來提高頁面的運行時性能。

記憶體面板

如果需要比時間軸面板提供的更多資訊，可以使用「配置」面板，例如跟蹤記憶體泄漏。

應用面板

使用資源面板檢查載入的所有資源，包括IndexedDB與Web SQL資料庫，本地和會話存儲，cookie，應用程式快取，影像，字體和樣式表。

安全面板

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

審查面板

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