瀏覽器DevTools概述

瀏覽器DevTools是前端開發人員工具箱中的基本元素,並且在所有現代瀏覽器中都可用。了解他們可以為您做什麼的基礎

瀏覽器開發工具

我認為,就後端技術而言,沒有一個網站和Web應用程序易於構建的時代,但是從總體上來說,客戶端開發肯定比現在容易得多。

一旦弄清了Internet Explore和Netscape Navigator之間的區別,並且避免了專有標籤和技術,您只需要使用HTML和更高版本的CSS。

JavaScript是一種用於創建對話框的技術,但它的功能還遠遠不如今天。

儘管許多網頁仍然是純HTML + CSS,但與此網頁一樣,許多其他網站都是在瀏覽器中運行的真實應用程序。

僅僅提供頁面源(就像瀏覽器曾經一樣)是遠遠不夠的。

瀏覽器必須提供有關如何呈現頁面以及頁面當前正在做什麼的更多信息,因此他們引入了開發人員功能: 他們的開發者工具

每個瀏覽器都不同,因此他們的開發工具也略有不同。在撰寫本文時,Chrome提供了我最喜歡的開發人員工具,這是我們將在這裡討論的瀏覽器,儘管Firefox和Edge也具有出色的工具。


HTML結構和CSS

使用的最基本形式(也是最常見的形式)是檢查網頁的內容。當您打開面板的DevTools時,您會看到“元素”面板:

Elements panel of the Browser Dev Tools

HTML面板

左側是組成頁面的HTML。

將鼠標懸停在HTML面板中的元素上將突出顯示頁面中的元素,單擊工具欄上的第一個圖標可讓您單擊頁面中的元素,並在檢查器中對其進行分析。

您可以在檢查器中拖放元素以實時更改其在頁面中的位置。

CSS樣式面板

在右側,應用於當前選定元素的CSS樣式。

除了編輯和禁用屬性外,您還可以通過單擊+圖標。

另外,您可以觸發所選元素的狀態,因此您可以查看處於活動狀態,懸停在焦點上時應用的樣式。

在底部,盒子模型選定元素的外觀可幫助您快速瀏覽邊界,填充,邊框和尺寸:

Box model in the CSS styles panel


控制台

DevTools的第二個最重要的元素是控制台。

控制台可以在其自己的面板上查看,也可以通過按Esc在“元素”面板中,它將顯示在底部。

控制台主要用於兩個目的:執行自定義JavaScript錯誤報告

執行自定義JavaScript

在控制台的底部,有一個閃爍的光標。您可以在此處鍵入任何JavaScript,它將立即執行。例如,嘗試運行:

alert('test')

特殊標識符$0允許您引用元素檢查器中當前選定的元素。如果要將其作為jQuery選擇器引用,請使用$($0)

您可以使用shift-enter。在腳本末尾按Enter即可運行它。

錯誤報告

此處列出了呈現頁面並隨後執行JavaScript時發生的任何錯誤,警告或信息。

例如,無法從網絡加載資源,並顯示以下信息:為什麼,在控制台中報告。

Console Error Reporting

在這種情況下,單擊資源URL會將您帶到“網絡”面板,顯示更多信息,您可以使用這些信息來確定問題的原因。

您可以按級別(錯誤/警告/信息)過濾這些消息,也可以按內容過濾它們。

您可以使用以下代碼在用戶自己的JavaScript中生成這些消息:控制台API

console.log('Some info message')
console.warn('Some warning message')
console.error('Some error message')

模擬器

Chrome DevTools嵌入了一個非常有用的設備仿真器,您可以使用該設備仿真器以所需的每種設備尺寸可視化頁面。

The device emulator

您可以從預設中選擇最受歡迎的移動設備,包括iPhone,iPad,Android設備等,也可以自己指定像素尺寸以及屏幕清晰度(1x,2x視網膜,3x視網膜HD)。

在同一面板中,您可以設置網絡節流針對特定的Chrome標籤,以模擬低速連接並查看頁面的加載方式,顯示媒體查詢”選項顯示了媒體查詢如何修改頁面的CSS。


網絡面板

DevTools的網絡面板允許您查看呈現頁面時瀏覽器必須處理的所有連接。

The network panel

快速瀏覽頁面顯示:

  • 工具欄,您可以在其中設置一些選項和過濾器
  • 整個頁面的加載圖
  • 每個請求,帶有HTTP方法,響應代碼,大小和其他詳細信息
  • 頁腳,其中包含總請求摘要,頁面總大小以及一些時間指示。

工具欄中一個非常有用的選項是保存日誌。通過啟用它,您可以移至另一頁,並且不會清除日誌。

跟踪加載時間的另一個非常有用的工具是禁用緩存。也可以在DevTools設置中全局啟用此功能,以在打開DevTools時始終禁用緩存。

單擊列表中的特定請求將顯示詳細信息面板,其中包含HTTP標頭報告:

The HTTP headers report in the network panel

以及加載時間明細:

The loading time breakdown


JavaScript調試器

如果您在DevTools控制台中單擊錯誤消息,則會打開“源”選項卡,除了將您指向發生錯誤的文件和行之外,您還可以選擇使用JavaScript調試器。

The Javascript debugger

這是功能齊全的調試器。您可以設置斷點,觀察變量並收聽DOM更改或中斷特定XHR(AJAX)網絡請求或事件偵聽器。


應用與儲存

“應用程序”選項卡為您提供了許多信息,這些信息與哪些信息相對於您的網站存儲在瀏覽器中有關。

Application and storage

貯存

您可以訪問與應用程序存儲進行交互的詳細報告和工具:

您可以快速擦除所有信息,從頭開始。

應用

此選項卡還為您提供了用於檢查和調試漸進式Web應用程序的工具。

點擊顯現獲取有關Web應用程序清單的信息,該信息用於允許移動用戶將應用程序添加到他們的家中,並模擬“添加到主屏幕”事件。

服務人員讓您檢查您的應用程序服務工作者。如果您不知道服務人員是什麼,簡而言之,它們是為現代Web應用程序提供動力的一項基本技術,可提供諸如通知,脫機運行以及跨設備同步等功能。


安全標籤

“安全性”選項卡為您提供瀏覽器相對於網站連接安全性的所有信息。

The Security Tab

如果HTTPS連接有任何問題,如果該站點通過TLS提供服務,它將為您提供有關造成該問題的原因的更多信息。


稽核

“審核”選項卡將幫助您發現和解決一些與性能有關的問題,這些問題通常與用戶訪問您的網站時的體驗質量有關。

您可以根據網站的類型執行各種審核:

Audits by Lighthouse

審核由燈塔,這是一種開放源代碼的自動化網站質量檢查工具。它需要一段時間才能運行,然後為您提供了非常不錯的報告,其中包含要檢查的關鍵操作。

Lighthouse audit report


如果您想進一步了解Chrome DevTools,請查看此內容Chrome DevTools提示列表😀


更多devtools教程: