基本上所有主流的瀏覽器都有一個(gè)【開(kāi)發(fā)者工具】，這個(gè)工具對(duì)于任何喜歡瀏覽網(wǎng)站的人，無(wú)論是作為所有者、愛(ài)好者、正在進(jìn)行的開(kāi)發(fā)人員還是其他人，它都是最有用的工具之一。
開(kāi)發(fā)者工具可以為您提供許多有關(guān)任何網(wǎng)站的信息，例如CSS標(biāo)記和JavaScript錯(cuò)誤。此外，它們還允許您測(cè)試驅(qū)動(dòng)器前端更改，檢查站點(diǎn)的響應(yīng)設(shè)計(jì)，甚至優(yōu)化其性能。
此外，它是完全免費(fèi)的，并且內(nèi)置在所有主要瀏覽器中。如果您準(zhǔn)備學(xué)習(xí)它的使用方法，那么這篇教程非常適合您。
如何打開(kāi)瀏覽器開(kāi)發(fā)人員工具
為了充分利用工具套件所提供的功能，您首先需要知道如何訪問(wèn)它。在不同的瀏覽器和操作系統(tǒng)中執(zhí)行的操作不同：
- Chrome瀏覽器?-在菜單內(nèi)，點(diǎn)擊更多工具>開(kāi)發(fā)者工具。您也可以右鍵單擊頁(yè)面，然后選擇“檢查”。也可以，在Mac上有鍵盤(pán)快捷鍵
Cmd + Opt + I，在Windows系統(tǒng)上有Ctrl + Shift + I。 - Safari-?在菜單欄中的首選項(xiàng)>高級(jí)>顯示開(kāi)發(fā)菜單中啟用Web開(kāi)發(fā)工具。然后去開(kāi)發(fā)>顯示W(wǎng)eb檢查或按
Cmd + Opt + I。 - Firefox-在菜單中，訪問(wèn)Web開(kāi)發(fā)人員>工具。您還可以通過(guò)右鍵單擊或
Ctrl + Shift + I?/?Cmd + Opt + I檢查元素。
哈哈，其實(shí)大多數(shù)情況下，還有一個(gè)更簡(jiǎn)單的開(kāi)啟方式，那就是直接按
F12即可！
在所有情況下，他們都會(huì)在瀏覽器窗口中打開(kāi)一組菜單。它們通常位于底部，但也可以顯示在側(cè)面，具體取決于您的配置。您也可以將它們移動(dòng)到新窗口。
開(kāi)發(fā)者工具包含什么？
您可以在瀏覽器開(kāi)發(fā)工具中找到以下內(nèi)容：
- 帶有DOM元素及其屬性（例如CSS樣式）的HTML樹(shù)
- 一種監(jiān)視網(wǎng)頁(yè)的傳入和傳出HTTP請(qǐng)求的方法
- 檢查和調(diào)試頁(yè)面上運(yùn)行的文件和腳本或?qū)⑵浔４娴接?jì)算機(jī)上的資源的能力
- 一種查看JavaScript日志并嘗試頁(yè)面上命令的方法
- 監(jiān)視網(wǎng)站性能以提高加載速度的工具
- 能夠切換到網(wǎng)站的移動(dòng)視圖以測(cè)試響應(yīng)式設(shè)計(jì)
請(qǐng)注意，并非所有開(kāi)發(fā)者工具都完全相同，因此某些功能可能位于其他地方或不存在。
如何使用瀏覽器開(kāi)發(fā)者工具
好的，現(xiàn)在您已經(jīng)了解了如何使用瀏覽器的開(kāi)發(fā)者工具，以及可以期待什么的基礎(chǔ)知識(shí)，這對(duì)您有什么幫助？在下文中，我們將為您深入研究各種工具功能。
在此示例中，我們將使用Chrome開(kāi)發(fā)者工具，因?yàn)樗蔷哂凶畲笫袌?chǎng)份額的瀏覽器。但是，使用其他瀏覽器的體驗(yàn)應(yīng)該相似。
1.檢查頁(yè)面HTML
打開(kāi)任何開(kāi)發(fā)者工具時(shí)，您會(huì)看到的第一件事通常是HTML頁(yè)面結(jié)構(gòu)。
這使您可以查看頁(yè)面的元素，它們的類(lèi)和id，它們?nèi)绾蜗嗷デ短滓约澳_本，樣式表和其他在頁(yè)眉和頁(yè)腳部分中加載的資源。
當(dāng)您將鼠標(biāo)懸停在任何元素上時(shí)，瀏覽器還將在頁(yè)面上突出顯示該元素以及所有CSS布局屬性，例如margin或padding。
如果當(dāng)前不可見(jiàn)，請(qǐng)右鍵單擊任何元素，然后選擇滾動(dòng)到視圖。您還可以使用選擇器工具（在開(kāi)發(fā)工具窗口的左上角或Ctrl + Shift + C）來(lái)選擇頁(yè)面上的任何元素并在站點(diǎn)代碼中看到它。右鍵單擊>?檢查具有相同的效果。
您也可以使用鍵盤(pán)瀏覽HTML樹(shù)。上下移動(dòng)并使用左右折疊/取消折疊元素。最后，在頂部的搜索字段可讓您過(guò)濾字符串、類(lèi)和其他所有內(nèi)容。
2.處理HTML元素
除了查看HTML頁(yè)面外，您還可以對(duì)其進(jìn)行更改。只需雙擊代碼的幾乎任何部分即可對(duì)其進(jìn)行修改。
這樣，您可以將標(biāo)題標(biāo)記從H3?更改為H2，刪除或修改類(lèi)名稱(chēng)，添加內(nèi)聯(lián)樣式，更改頁(yè)面上的文本，或隱藏和刪除DOM中的整個(gè)元素。您也可以使用鼠標(biāo)將元素從一個(gè)位置拖放到另一位置。
此外，右鍵單擊> [強(qiáng)制狀態(tài)]允許您將元素永久設(shè)置為懸停、聚焦、活動(dòng)、訪問(wèn)等。您的瀏覽器窗口將向您顯示該頁(yè)面的作用。
3.測(cè)試CSS
接下來(lái)您會(huì)注意到，每個(gè)元素的關(guān)聯(lián)CSS出現(xiàn)在HTML的右側(cè)。
這樣，您就可以了解其樣式和布局標(biāo)記。這是學(xué)習(xí)如何實(shí)現(xiàn)您可能喜歡的另一個(gè)網(wǎng)站上的設(shè)計(jì)的好方法。
此外，您可以實(shí)時(shí)更改它，以調(diào)試不起作用的CSS或測(cè)試您的設(shè)計(jì)思路。只需單擊右側(cè)任何類(lèi)或ID的CSS屬性即可對(duì)其進(jìn)行修改。
在下面的示例中，我們?cè)黾?code>font-size屬性。這是頁(yè)面上的效果：
同樣，您可以刪除CSS屬性，添加全新的屬性，以及修改或添加選擇器。與HTML一樣，它的頂部有一個(gè)搜索欄，可幫助您查找特定的內(nèi)容。
您也可以通過(guò)右上角的加號(hào)圖標(biāo)添加新樣式規(guī)則（或在某些瀏覽器中右鍵單擊>?新建規(guī)則）。您甚至可以從此處添加類(lèi)，而無(wú)需通過(guò)右上角的.cls弄亂HTML樹(shù)。輸入一個(gè)類(lèi)名，它將自動(dòng)應(yīng)用于該元素。
最后，在同一位置的:hov下，您可以強(qiáng)制元素上的不同狀態(tài)以更改其外觀。請(qǐng)注意，所有這些僅對(duì)您可見(jiàn)，而對(duì)廣大公眾不可見(jiàn)。要使更改永久生效，只需標(biāo)記并復(fù)制修改后的CSS規(guī)則，然后將其粘貼到主題的樣式表中即可。
4.使用盒子模型
關(guān)于CSS的最后一件事：在“Styles”部分中，您可以找到box模型的表示形式。
在這里，您可以一目了然地看到元素的高度和寬度，內(nèi)邊距（padding），邊框厚度和外邊距（margin）。將鼠標(biāo)懸停在任何屬性上也會(huì)在DOM中顯示它們。
此外，您只需雙擊任何部分并輸入數(shù)字，即可更改任何屬性。因此，如果您想更改底部外邊距，則只需執(zhí)行此操作，然后在頁(yè)面上查看效果即可。
5.調(diào)試JavaScript
除了HTML和CSS，JavaScript是網(wǎng)站設(shè)計(jì)的另一種重要編程語(yǔ)言。幸運(yùn)的是，瀏覽器開(kāi)發(fā)者工具也具有用于此目的的工具，您可以在“sources”面板中找到第一個(gè)工具。
在這里，您可以瀏覽站點(diǎn)文件，讀取和編輯代碼，以及使用內(nèi)置的調(diào)試工具。但是，您可以在此處執(zhí)行的最重要的操作之一是插入斷點(diǎn)。例如，這允許您在某些事件期間暫停代碼執(zhí)行，以查看是否發(fā)生錯(cuò)誤。
然后，您可以通過(guò)右上角的圖標(biāo)每次單行瀏覽代碼，直到找到問(wèn)題為止。您還可以直接在瀏覽器工具中更改代碼，然后繼續(xù)和/或重新加載腳本以查看該腳本是否已解決。更多相關(guān)介紹，請(qǐng)看這里。
6.記錄并執(zhí)行JavaScript
使用JavaScript的另一個(gè)重要工具是控制臺(tái)。
在這里，您將找到您網(wǎng)站上使用JavaScript發(fā)送到日志的所有消息（通過(guò)console.log）。這使您可以查看代碼是按正確的順序執(zhí)行還是引發(fā)錯(cuò)誤。
另外，類(lèi)似于CSS，您可以在控制臺(tái)內(nèi)試驗(yàn)JavaScript。例如，您運(yùn)行語(yǔ)句以查看它們?nèi)绾卧谀捻?yè)面上工作。如果可行，復(fù)制代碼到你的項(xiàng)目中即可正常應(yīng)用。
此外，該控制臺(tái)還可以用作試驗(yàn)與頁(yè)面無(wú)關(guān)的JavaScript的游樂(lè)場(chǎng)，并允許您查找未使用的JS和CSS。
7.分析網(wǎng)站效果
您可以使用Chrome瀏覽器工具執(zhí)行的另一件事是分析網(wǎng)站速度。請(qǐng)轉(zhuǎn)到“Audits”選項(xiàng)卡。
在這里，您可以在您的站點(diǎn)上運(yùn)行各種審核。目前，我們只對(duì)性能感興趣，因此請(qǐng)取消選中其他功能。
然后，選擇是衡量移動(dòng)設(shè)備還是臺(tái)式設(shè)備的站點(diǎn)性能。然后，點(diǎn)擊生成報(bào)告并等待，直到看到類(lèi)似下面的內(nèi)容。
小白都應(yīng)該知道，這與您使用Google PageSpeed Insights時(shí)獲得的數(shù)據(jù)相同。它為您提供了有關(guān)頁(yè)面上已優(yōu)化和未優(yōu)化的內(nèi)容以及改進(jìn)方法的大量信息。
很棒的事情是，使用開(kāi)發(fā)人員工具，您還可以嘗試對(duì)網(wǎng)站進(jìn)行更改，例如查找和禁用渲染阻止腳本，以了解最大的改變。但是，對(duì)于本教程而言，這就太深入了，如果你想了解，可以查看該文檔。
8.模擬移動(dòng)設(shè)備
相信不用說(shuō)，你也知道移動(dòng)端的流量已經(jīng)非常重要了，而且與臺(tái)式電腦相比，手機(jī)上網(wǎng)的人越來(lái)越多。
因此，了解如何使網(wǎng)站移動(dòng)友好非常重要。這是瀏覽器開(kāi)發(fā)人員工具可以幫助您完成的另一個(gè)領(lǐng)域，即允許您模擬在瀏覽器內(nèi)部使用移動(dòng)設(shè)備瀏覽站點(diǎn)的體驗(yàn)。
您可以在開(kāi)發(fā)工具打開(kāi)的情況下通過(guò)Ctrl + Shift + M或左上角的移動(dòng)設(shè)備小圖標(biāo)來(lái)訪問(wèn)它。它將使您的頁(yè)面看起來(lái)像這樣：
拖放框架的側(cè)面以在較小的屏幕上查看您的網(wǎng)站的外觀。或者，在頂部欄中數(shù)字輸入尺寸。在同一位置，您還可以使用下拉菜單選擇特定設(shè)備以獲取其確切的屏幕尺寸。添加更多或通過(guò)“編輯”按鈕輸入您自己的設(shè)備。
使用右側(cè)的圖標(biāo)在縱向和橫向模式之間切換。該百分比允許您調(diào)整縮放級(jí)別。
單擊帶有三個(gè)點(diǎn)的按鈕時(shí)，可以打開(kāi)顯示媒體查詢(xún)。
這將啟用CSS中包含的斷點(diǎn)。單擊它們以自動(dòng)將視口調(diào)整為該大小。
最后，顯示“在線”的下拉菜單可讓您模擬不同的連接速度（因?yàn)槭謾C(jī)并不總是具有wifi）。這樣，您可以更好地了解快速和慢速3G網(wǎng)絡(luò)上的人們的體驗(yàn)。
如果位置對(duì)您的站點(diǎn)很重要，則在設(shè)置中將其打開(kāi)也可以覆蓋地理位置。更多信息請(qǐng)看這里。
10.其他選項(xiàng)
上面我們列出了您可以在瀏覽器開(kāi)發(fā)人員工具中執(zhí)行的最重要的操作，除此之外，你還可以進(jìn)行下面的一些操作：
- 網(wǎng)絡(luò)?– 查看是否以及如何更新或下載資源。檢查單個(gè)資源和文件的屬性，查看瀑布圖，并模擬不同的網(wǎng)絡(luò)連接速度。
- 檢查動(dòng)畫(huà) – 如果頁(yè)面上有動(dòng)畫(huà)，則可以放慢它們的速度，檢查源代碼等等。
- 輔助功能?– 就像頁(yè)面速度一樣，您可以對(duì)輔助功能進(jìn)行檢測(cè)。查看您與DOM 樹(shù)的相似程度，查看ARIA屬性，并檢查屏幕對(duì)比度。
有關(guān)您喜歡的瀏覽器開(kāi)發(fā)人員工具的更多提示，請(qǐng)查看其文檔！
關(guān)于瀏覽器開(kāi)發(fā)者工具的最新思考
通過(guò)上面的瀏覽器開(kāi)發(fā)者工具教程中，您了解了它是如何幫助您了解并改善網(wǎng)站的。
您現(xiàn)在知道了最基本的應(yīng)用程序，例如如何檢查和操作HTML、CSS和JavaScript，分析網(wǎng)站性能以及檢查移動(dòng)設(shè)備的友好程度。此外，還有更多發(fā)現(xiàn)。
盡管本指南中并非所有內(nèi)容都適用于您選擇的瀏覽器，但基本功能始終相同，因此請(qǐng)充分利用它！
注：原文出自 Torque，由 WordPress大學(xué) 翻譯整理，標(biāo)題和內(nèi)容有所改動(dòng)。
更多相關(guān)資源：
- 一定要看的WordPress網(wǎng)站性能及速度優(yōu)化建議
- 誰(shuí)是最佳的網(wǎng)站性能檢測(cè)工具：GTmetrix、PageSpeed
- 如何優(yōu)化圖片來(lái)提高WordPress網(wǎng)站加載速度
- 非常棒的WordPress緩存優(yōu)化插件 WP Rocket
