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

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

不過供桌中常用的可能就是幾個,比如前端人員經常看控制面板除錯問題,列印後臺資料等.

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

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

裝置模式

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

元素面板

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

控制面板

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

原始碼面板

在原始碼面板中設定斷點來除錯 JavaScript ，或者通過Workspaces（工作區）連線本地檔案來使用開發者工具的實時編輯器。

網路面板

使用網路面板瞭解請求和下載的資原始檔並優化網頁載入效能

效能面板

使用時間軸面板可以通過記錄和檢視網站生命週期內發生的各種事件來提高頁面的執行時效能。

記憶體面板

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

應用面板

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

安全面板

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

審查面板

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

不同瀏覽器的開發者工具大同小異，這這裡以chrome為例。

開啟網頁後，按F12即可開啟開發者工具。

Element（審查元素）

這個按鈕功能是檢視網頁原始碼的網頁都是html語言寫的，Element可以檢視網頁的html原始碼，裡面的各種html標籤都可以看到，分析網頁結構時，這個功能很實用。滑鼠放到頁面的元素上，控制檯就會定位到指定行。

preview（預覽）

用於檢視資源。

對於js指令碼還可以設定斷點，執行時可以定位到斷點。

profile（效能監視器）

用於檢視各個資源所耗費的記憶體大小。

Audits:對當前網頁進行網路利用情況、網頁效能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS檔案等

以上只是對工具選單的簡單介紹，開發者工具的功能遠不止這些，還得靠自己慢慢挖掘。