如何使用瀏覽器的開發者工具調試網站

基本上所有主流的瀏覽器都有一個【開發者工具】,這個工具對于任何喜歡瀏覽網站的人,無論是作為所有者、愛好者、正在進行的開發人員還是其他人,它都是最有用的工具之一。

開發者工具可以為您提供許多有關任何網站的信息,例如CSS標記和JavaScript錯誤。此外,它們還允許您測試驅動器前端更改,檢查站點的響應設計,甚至優化其性能。

此外,它是完全免費的,并且內置在所有主要瀏覽器中。如果您準備學習它的使用方法,那么這篇教程非常適合您。

如何打開瀏覽器開發人員工具

為了充分利用工具套件所提供的功能,您首先需要知道如何訪問它。在不同的瀏覽器和操作系統中執行的操作不同:

  • Chrome瀏覽器?-在菜單內,點擊更多工具>開發者工具。您也可以右鍵單擊頁面,然后選擇“檢查”。也可以,在Mac上有鍵盤快捷鍵Cmd + Opt + I,在Windows系統上有Ctrl + Shift + I
  • Safari-?在菜單欄中的首選項>高級>顯示開發菜單中啟用Web開發工具。然后去開發>顯示Web檢查或按Cmd + Opt + I
  • Firefox-在菜單中,訪問Web開發人員>工具。您還可以通過右鍵單擊或Ctrl + Shift + I?/?Cmd + Opt + I檢查元素。

哈哈,其實大多數情況下,還有一個更簡單的開啟方式,那就是直接按 F12 即可!

在所有情況下,他們都會在瀏覽器窗口中打開一組菜單。它們通常位于底部,但也可以顯示在側面,具體取決于您的配置。您也可以將它們移動到新窗口。

開發者工具包含什么?

您可以在瀏覽器開發工具中找到以下內容:

  • 帶有DOM元素及其屬性(例如CSS樣式)的HTML樹
  • 一種監視網頁的傳入和傳出HTTP請求的方法
  • 檢查和調試頁面上運行的文件和腳本或將其保存到計算機上的資源的能力
  • 一種查看JavaScript日志并嘗試頁面上命令的方法
  • 監視網站性能以提高加載速度的工具
  • 能夠切換到網站的移動視圖以測試響應式設計

請注意,并非所有開發者工具都完全相同,因此某些功能可能位于其他地方或不存在。

如何使用瀏覽器開發者工具

好的,現在您已經了解了如何使用瀏覽器的開發者工具,以及可以期待什么的基礎知識,這對您有什么幫助?在下文中,我們將為您深入研究各種工具功能。

在此示例中,我們將使用Chrome開發者工具,因為它是具有最大市場份額的瀏覽器。但是,使用其他瀏覽器的體驗應該相似。

1.檢查頁面HTML

打開任何開發者工具時,您會看到的第一件事通常是HTML頁面結構。

這使您可以查看頁面的元素,它們的類和id,它們如何相互嵌套以及腳本,樣式表和其他在頁眉和頁腳部分中加載的資源。

當您將鼠標懸停在任何元素上時,瀏覽器還將在頁面上突出顯示該元素以及所有CSS布局屬性,例如marginpadding

如果當前不可見,請右鍵單擊任何元素,然后選擇滾動到視圖。您還可以使用選擇器工具(在開發工具窗口的左上角或Ctrl + Shift + C)來選擇頁面上的任何元素并在站點代碼中看到它。右鍵單擊>?檢查具有相同的效果。

您也可以使用鍵盤瀏覽HTML樹。上下移動并使用左右折疊/取消折疊元素。最后,在頂部的搜索字段可讓您過濾字符串、類和其他所有內容。

2.處理HTML元素

除了查看HTML頁面外,您還可以對其進行更改。只需雙擊代碼的幾乎任何部分即可對其進行修改。

這樣,您可以將標題標記從H3?更改為H2,刪除或修改類名稱,添加內聯樣式,更改頁面上的文本,或隱藏和刪除DOM中的整個元素。您也可以使用鼠標將元素從一個位置拖放到另一位置。

此外,右鍵單擊> [強制狀態]允許您將元素永久設置為懸停、聚焦、活動、訪問等。您的瀏覽器窗口將向您顯示該頁面的作用。

3.測試CSS

接下來您會注意到,每個元素的關聯CSS出現在HTML的右側。

這樣,您就可以了解其樣式和布局標記。這是學習如何實現您可能喜歡的另一個網站上的設計的好方法。

此外,您可以實時更改它,以調試不起作用的CSS或測試您的設計思路。只需單擊右側任何類或ID的CSS屬性即可對其進行修改。

在下面的示例中,我們增加font-size屬性。這是頁面上的效果:

同樣,您可以刪除CSS屬性,添加全新的屬性,以及修改或添加選擇器。與HTML一樣,它的頂部有一個搜索欄,可幫助您查找特定的內容。

您也可以通過右上角的加號圖標添加新樣式規則(或在某些瀏覽器中右鍵單擊>?新建規則)。您甚至可以從此處添加類,而無需通過右上角的.cls弄亂HTML樹。輸入一個類名,它將自動應用于該元素。

最后,在同一位置的:hov下,您可以強制元素上的不同狀態以更改其外觀。請注意,所有這些僅對您可見,而對廣大公眾不可見。要使更改永久生效,只需標記并復制修改后的CSS規則,然后將其粘貼到主題的樣式表中即可。

4.使用盒子模型

關于CSS的最后一件事:在“Styles”部分中,您可以找到box模型的表示形式。

在這里,您可以一目了然地看到元素的高度和寬度,內邊距(padding),邊框厚度和外邊距(margin)。將鼠標懸停在任何屬性上也會在DOM中顯示它們。

此外,您只需雙擊任何部分并輸入數字,即可更改任何屬性。因此,如果您想更改底部外邊距,則只需執行此操作,然后在頁面上查看效果即可。

5.調試JavaScript

除了HTML和CSS,JavaScript是網站設計的另一種重要編程語言。幸運的是,瀏覽器開發者工具也具有用于此目的的工具,您可以在“sources”面板中找到第一個工具。

在這里,您可以瀏覽站點文件,讀取和編輯代碼,以及使用內置的調試工具。但是,您可以在此處執行的最重要的操作之一是插入斷點。例如,這允許您在某些事件期間暫停代碼執行,以查看是否發生錯誤。

然后,您可以通過右上角的圖標每次單行瀏覽代碼,直到找到問題為止。您還可以直接在瀏覽器工具中更改代碼,然后繼續和/或重新加載腳本以查看該腳本是否已解決。更多相關介紹,請看這里

6.記錄并執行JavaScript

使用JavaScript的另一個重要工具是控制臺。

在這里,您將找到您網站上使用JavaScript發送到日志的所有消息(通過console.log)。這使您可以查看代碼是按正確的順序執行還是引發錯誤。

另外,類似于CSS,您可以在控制臺內試驗JavaScript。例如,您運行語句以查看它們如何在您的頁面上工作。如果可行,復制代碼到你的項目中即可正常應用。

此外,該控制臺還可以用作試驗與頁面無關的JavaScript的游樂場,并允許您查找未使用的JS和CSS

7.分析網站效果

您可以使用Chrome瀏覽器工具執行的另一件事是分析網站速度。請轉到“Audits”選項卡。

在這里,您可以在您的站點上運行各種審核。目前,我們只對性能感興趣,因此請取消選中其他功能。

然后,選擇是衡量移動設備還是臺式設備的站點性能。然后,點擊生成報告并等待,直到看到類似下面的內容。

小白都應該知道,這與您使用Google PageSpeed Insights時獲得的數據相同。它為您提供了有關頁面上已優化和未優化的內容以及改進方法的大量信息。

很棒的事情是,使用開發人員工具,您還可以嘗試對網站進行更改,例如查找和禁用渲染阻止腳本,以了解最大的改變。但是,對于本教程而言,這就太深入了,如果你想了解,可以查看該文檔

8.模擬移動設備

相信不用說,你也知道移動端的流量已經非常重要了,而且與臺式電腦相比,手機上網的人越來越多。

因此,了解如何使網站移動友好非常重要。這是瀏覽器開發人員工具可以幫助您完成的另一個領域,即允許您模擬在瀏覽器內部使用移動設備瀏覽站點的體驗。

您可以在開發工具打開的情況下通過Ctrl + Shift + M或左上角的移動設備小圖標來訪問它。它將使您的頁面看起來像這樣:

拖放框架的側面以在較小的屏幕上查看您的網站的外觀。或者,在頂部欄中數字輸入尺寸。在同一位置,您還可以使用下拉菜單選擇特定設備以獲取其確切的屏幕尺寸。添加更多或通過“編輯”按鈕輸入您自己的設備。

使用右側的圖標在縱向和橫向模式之間切換。該百分比允許您調整縮放級別。

單擊帶有三個點的按鈕時,可以打開顯示媒體查詢

這將啟用CSS中包含的斷點。單擊它們以自動將視口調整為該大小。

最后,顯示“在線”的下拉菜單可讓您模擬不同的連接速度(因為手機并不總是具有wifi)。這樣,您可以更好地了解快速和慢速3G網絡上的人們的體驗。

如果位置對您的站點很重要,則在設置中將其打開也可以覆蓋地理位置。更多信息請看這里

10.其他選項

上面我們列出了您可以在瀏覽器開發人員工具中執行的最重要的操作,除此之外,你還可以進行下面的一些操作:

  • 網絡?- 查看是否以及如何更新或下載資源。檢查單個資源和文件的屬性,查看瀑布圖,并模擬不同的網絡連接速度。
  • 檢查動畫 - 如果頁面上有動畫,則可以放慢它們的速度,檢查源代碼等等
  • 輔助功能?- 就像頁面速度一樣,您可以對輔助功能進行檢測。查看您與DOM 樹的相似程度,查看ARIA屬性,并檢查屏幕對比度。

有關您喜歡的瀏覽器開發人員工具的更多提示,請查看其文檔!

關于瀏覽器開發者工具的最新思考

通過上面的瀏覽器開發者工具教程中,您了解了它是如何幫助您了解并改善網站的。

您現在知道了最基本的應用程序,例如如何檢查和操作HTML、CSS和JavaScript,分析網站性能以及檢查移動設備的友好程度。此外,還有更多發現。

盡管本指南中并非所有內容都適用于您選擇的瀏覽器,但基本功能始終相同,因此請充分利用它!

注:原文出自 Torque,由 WordPress大學 翻譯整理,標題和內容有所改動。

更多相關資源:

聲明:本站所有文章,如無特殊說明或標注,均為本站原創發布。任何個人或組織,在未征得本站同意時,禁止復制、盜用、采集、發布本站內容到任何網站、書籍等各類媒體平臺。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
歡迎關注我們的微信公眾號:WPDAXUE

倡萌

一個文科IT宅男,喜歡折騰WordPress和被它折騰 ^_^

暫無評論

發表評論