瀏覽器開發工具概述
瀏覽器開發工具是前端開發者工具箱中的基本元素，並且在所有現代瀏覽器中都可用。了解它們對您有什麼幫助的基礎知識。
瀏覽器開發工具
我認為網站和 Web 應用程序的建構從來都不是一個容易的任務，就像後端技術那樣，但是總的來說，客戶端開發相對較容易。
一旦你弄清楚了 Internet Explorer 和 Netscape Navigator 之間的差異，並避免了專屬的標籤和技術，你所需要使用的只有 HTML，稍後是 CSS。
JavaScript 是一種用於創建對話框等功能的技術，但絕對不像今天這樣普及。
雖然許多網頁仍然是純 HTML+CSS 的形式，就像這個頁面一樣，但是許多其他網站則是在瀏覽器中運行的真正應用程序。
僅僅提供網頁的源代碼，像瀏覽器一樣過去一樣的那樣，是不夠的。
瀏覽器需要提供關於它們如何呈現頁面以及頁面當前正在做什麼的更多信息，因此它們引入了一個用於開發人員的功能：它們的開發人員工具。
每個瀏覽器都不同，所以它們的開發人員工具也略有不同。在撰寫本文時，我最喜歡的開發人員工具是由 Chrome 提供的，這也是我們在這裡討論的瀏覽器，儘管 Firefox 和 Edge 也有很好的工具。
HTML結構和CSS
最基本和常見的用法是檢查網頁的內容。打開開發人員工具時，你會看到的是元素面板：
HTML面板
在左側是組成頁面的HTML。
在HTML面板上將鼠標懸停在元素上會突顯該元素在頁面中的位置，點擊工具欄中的第一個圖標可以點擊頁面中的元素並在檢查器中進行分析。
您可以將元素拖放到檢查器中，即時更改它們在頁面中的位置。
CSS樣式面板
在右側是應用於當前選中元素的CSS樣式。
除了編輯和禁用屬性之外，您可以通過點擊“+”圖標添加新的CSS屬性，並為所需的任何目標添加。
您還可以觸發選定元素的狀態，以便在活動、懸停或焦點時查看應用的樣式。
在底部，選中元素的框模型可以讓您快速查看邊距、填充、邊框和尺寸:
控制台
開發工具的第二個最重要的元素是控制台。
可以單獨查看控制台面板，也可以在元素面板中按下 Esc 鍵，它將顯示在底部。
控制台主要有兩個用途：執行自定義JavaScript 和錯誤報告。
執行自定義JavaScript
在控制台底部有一個閃爍的光標。您可以在這裡輸入任何JavaScript，它將立即執行。例如，嘗試運行：
1 | alert('test') |
特殊標識符 $0允許您引用當前在元素檢查器中選中的元素。如果要將其作為 jQuery 選擇器引用，請使用 $($0)。
您可以使用 shift-enter 來編寫多行。在腳本的末尾按 enter 鍵運行它。
錯誤報告
列出在渲染頁面以及隨後執行JavaScript過程中發生的任何錯誤、警告或信息。
例如，無法從網絡上加載資源時，將報告有關原因的更多信息。
在這種情況下，點擊資源URL將帶您到網絡面板，顯示更多信息，您可以根據此信息來確定問題的原因。
您可以通過級別（錯誤/警告/信息）過濾這些消息，也可以根據內容過濾它們。
您可以使用控制台 API在自己的JavaScript中生成這些消息：
1 | console.log('一些信息消息') |
模擬器
Chrome 開發工具嵌入了一個非常有用的設備模擬器，您可以使用它在任何設備大小上可視化您的網頁。
您可以從預設設置中選擇最流行的移動設備，包括iPhone、iPad、Android設備等，或者自己指定像素尺寸和屏幕定義（1x、2x retina、3x retina HD）。
在同一面板上，您可以為該特定的 Chrome 標簽設置網絡限制，以模擬低速連接並查看頁面加載情況，“顯示媒體查詢”選項則向您顯示媒體查詢如何修改頁面的 CSS。
網絡面板
開發工具的網絡面板允許您查看在渲染頁面時瀏覽器必須處理的所有連接。
一目了然地顯示頁面的：
- 工具欄，您可以在其中設置某些選項和篩選器
- 整個頁面的加載圖
- 每個單獨的請求，包括 HTTP 方法、響應代碼、大小和其他詳細信息
- 總請求數、頁面總大小和一些時間指示的頁腳。
工具欄中一個非常有用的選項是保留日誌。啟用它後，您可以轉到另一個頁面，而日誌不會被清除。
另一個非常有用的追踪加載時間的工具是禁用緩存。這也可以在 DevTools 的全局設置中啟用，以始終在 DevTools 開啟時禁用緩存。
單擊清單中的特定請求將打開詳細面板，其中包含 HTTP 標頭報告：
以及加載時間的拆分：
JavaScript調試器
如果在 DevTools 控制台中點擊錯誤消息，則會打開源代碼選項卡，除了指示錯誤發生的文件和行之外，還可以選擇使用 JavaScript 調試器。
這是一個功能完備的調試器。您可以設置斷點、監視變量，並監聽 DOM 更改或在特定的 XHR（AJAX）網絡請求或事件侦聽器上中斷。
應用程序和存儲
應用程序選項卡為您提供了關於在瀏覽器中相對於您的網站存儲的信息。
存儲
您可以訪問詳細的報告和與應用程序存儲進行交互的工具：
您可以快速清除任何信息，以從新的起點開始。
應用程序
此選項卡還提供了檢查和調試 Progressive Web Apps 的工具。
點擊 manifest 以獲取有關 Web App 程序清單的信息，該清單用於允許移動用戶將應用添加到主屏幕並模擬“添加到主屏幕”事件。
Service workers 允許您檢查應用程序的 service workers。如果不知道服務工作者是什麼，簡單地說，它們是驅動現代 web 應用程序的基本技術，可以提供通知、離線運行和跨設備同步等功能。
安全選項卡
安全選項卡提供與網站連接安全性相關的所有瀏覽器信息。
如果 HTTPS 連接存在任何問題，如果站點通過 TLS 服務，它將為您提供有關問題的更多信息。
審計
審計選項卡將幫助您找到並解決一些相對於性能以及用戶訪問您的網站時的體驗質量的一些問題。
根據網站的類型，您可以執行各種類型的審計：
此審計由 Lighthouse 提供，這是一個開源的自動化網站質量檢查工具。運行需要一段時間，然後它將為您提供一份非常好的報告，其中包含檢查的主要操作。
如果您想了解更多關於 Chrome 開發工具的信息，請查看 Chrome 開發工具技巧列表😀
tags: [“瀏覽器開發工具”, “前端開發”, “控制台”, “CSS”, “HTML”, “JavaScript”]