在 macOS 上的 Safari 中檢查網頁：開發人員工具

Safari 的 Web Inspector 可讓您檢查 macOS 上的網頁。對於網絡開發人員和好奇的用戶來說，它是一個方便的工具。要使用 Web Inspector，您需要在 Safari 的設置中將其打開。

啟用後，Web Inspector 將打開一個網頁詳細信息的世界。您可以看到組成頁面的 HTML、CSS 和 JavaScript。該工具可幫助您查找錯誤、測試設計並了解網站的工作原理。

Web Inspector 易於使用。右鍵單擊網頁的任何部分，然後選擇“檢查元素”。將彈出一個新窗口，其中包含該頁面的所有代碼。您可以更改內容並立即在頁面上查看結果。

打開開髮菜單

要利用 Safari 的開發人員工具，您首先需要激活“開發”菜單。導航至狩獵之旅>偏好設置>先進的並選中“在菜單欄中顯示開髮菜單”旁邊的框。這將解鎖一套旨在增強您的 Web 開發工作流程的工具。

1. 單擊 Safari 菜單中的首選項

2. 單擊“高級”選項卡

3. 檢查 Web 開發人員的顯示功能

4. 將顯示“開發”菜單

精確檢查元件

“檢查元素”工具是您了解網頁結構的門戶。右鍵單擊任何元素並選擇“檢查元素”。將出現一個面板，顯示負責該元素的外觀和行為的 HTML、CSS 和 JavaScript 代碼。

調試 JavaScript 代碼

Safari 的 JavaScript 控制台對於識別和修復代碼中的錯誤至關重要。使用控制台記錄消息、檢查變量並逐步執行代碼。您可以從“開發”菜單或按選項 + 命令 + C。

監控網絡活動

Safari 開發者工具中的“網絡”選項卡提供了網頁發出的所有網絡請求的詳細視圖。這可以幫助您診斷性能瓶頸、識別加載緩慢的資源並優化網站的加載速度。

響應式設計測試

Safari 的響應式設計模式允許您模擬不同的屏幕尺寸和設備，以確保您的網站在各種平台上都能正常顯示和運行。此功能對於創建適應各種屏幕分辨率的響應式網站非常寶貴。

附加開發工具

工具	描述
貯存	檢查和管理存儲在 cookie、本地存儲和會話存儲中的網站數據。
時間表	分析網站渲染、腳本和佈局過程的性能。
層數	可視化網頁的各層並識別渲染問題。
資源	查看和編輯網頁使用的資源（圖像、字體等）。
安慰	查看 JavaScript 日誌、警告和錯誤。
搜尋	搜索網頁的 HTML、CSS 和 JavaScript 代碼。
偵錯工具	單步執行 JavaScript 代碼、設置斷點並檢查變量。
網絡	監視網絡活動，包括請求和響應。
元素	查看和編輯網頁的 HTML 和 CSS。
響應式設計	模擬不同的屏幕尺寸和設備。
表現	分析網站性能並確定需要改進的領域。
記憶	監視內存使用情況並檢測內存洩漏。
安全	查看網站的安全詳細信息，包括證書和連接信息。
審計	獲取有關改進網站可訪問性、性能和 SEO 的建議。
Web 檢查器擴展	通過自定義擴展來擴展 Safari 開發人員工具的功能。

要點

• Safari 的 Web Inspector 必須在設置中打開
• Web Inspector 顯示網頁背後的代碼
• 您可以使用 Web Inspector 來測試和了解網站

在 Safari 中啟用 Web Inspector

Web Inspector 是一個用於檢查 Safari 中網頁的強大工具。它允許您查看代碼和調試問題。

鍵綁定是：⌘⌥i

參見：已解決：Safari 中的網頁看起來很奇怪

在菜單欄中顯示開髮菜單

要使用 Web Inspector，您需要先打開“開發”菜單。打開 Safari 並單擊頂部菜單欄中的 Safari > 首選項。單擊高級選項卡。選中“在菜單欄中顯示開髮菜單”旁邊的框。

“開發”菜單現在將出現在 Safari 的菜單欄中。該菜單為網絡開發人員提供了許多有用的選項。

訪問 Web 檢查器功能

一旦“開發”菜單可見，您就可以打開 Web Inspector。轉到您要檢查的網頁。單擊菜單欄中的“開發”>“顯示 Web 檢查器”。您還可以使用鍵盤快捷鍵 Option + Command + I。

打開 Web Inspector 的另一種方法是右鍵單擊網頁的任何部分，然後選擇“檢查元素”。這將打開檢查器並聚焦於該特定元素。

Web Inspector 有多個帶有不同工具的選項卡。元素選項卡顯示頁面的 HTML 結構。控制台選項卡顯示 JavaScript 輸出和錯誤。其他選項卡可幫助您檢查網絡活動、存儲等。

利用 Web Inspector 進行開發

Web Inspector 是一款功能強大的工具，適合在 macOS 上使用 Safari 的開發人員。它可以讓您直接在瀏覽器中查看和更改網頁代碼。

檢查和修改 HTML 和 CSS

Web Inspector 顯示頁面的 HTML 和 CSS。您可以看到元素是如何嵌套和样式化的。單擊任意元素可查看其詳細信息。您可以實時編輯 CSS 屬性來測試更改。這有助於快速解決佈局問題。

元素選項卡顯示頁面結構。它顯示 HTML 標籤和屬性。您可以展開和折疊部分以專注於特定部分。雙擊文本可直接編輯內容。

樣式窗格顯示所選元素的 CSS 規則。您可以打開和關閉規則或更改值。可以添加新樣式來快速測試想法。這些更改是臨時的，並會在您重新加載頁面時重置。

調試和故障排除

Web Inspector 有助於查找和修復代碼問題。控制台選項卡顯示錯誤警告和日誌。您可以在此處運行 JavaScript 命令來測試想法。

“源”選項卡允許您在代碼中設置斷點。這會暫停執行，以便您可以逐行執行。您可以觀察變量並了解值在代碼運行時如何變化。

網絡選項卡顯示頁面加載的所有資源。這包括圖像腳本和數據文件。您可以看到加載時間和文件大小。這有助於發現性能問題。

高級 Web 檢查器工具

Web Inspector 具有用於更深入分析的工具。 “存儲”選項卡顯示站點保存的數據，例如 cookie 和本地存儲。您可以查看和編輯此數據。

“時間線”選項卡記錄一段時間內的頁面活動。它顯示腳本何時運行和佈局更新。這有助於找到代碼中緩慢的部分。

“圖層”選項卡可視化頁面的合成圖層。這對於發現渲染問題很有用。您可以看到元素如何堆疊和重新繪製。

這些工具為開發人員提供了其網頁的完整視圖。它們使構建快速且無錯誤的網站變得更加容易。

Safari 包含內置開發人員工具 - 您無需安裝任何內容即可調試瀏覽器中的問題。