建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)建站長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為五華企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，五華網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
如果您與許多網(wǎng)站合作，您可能一直在尋找更快、更有效的方法來(lái)完成工作。如果是這樣，在大多數(shù)主要瀏覽器中可用的Inspect Element（檢查元素工具）可能是一個(gè)有用的東西。有了它，您可以快速識(shí)別CSS類、預(yù)覽頁(yè)面上元素的更改、在移動(dòng)設(shè)備上模擬站點(diǎn)等等。
在本文中，我們將介紹檢查元素工具，并向您展示如何在最流行的web瀏覽器中訪問(wèn)它。然后，我們將向您介紹一些示例，說(shuō)明如何將其用作Web開發(fā)工作流程的一部分。
如何在主要瀏覽器中訪問(wèn)檢查元素工具
檢查元素工具是一種實(shí)用程序，可讓您查看任何網(wǎng)頁(yè)的底層源代碼。此外，您可以使用它進(jìn)行臨時(shí)更改并實(shí)時(shí)查看結(jié)果，同時(shí)保持原始源代碼不變。如果您需要測(cè)試更改或診斷問(wèn)題，這將非常有用。如果您遇到一個(gè)具有您喜歡的功能的網(wǎng)站并且很好奇它是如何實(shí)現(xiàn)的，它也可以派上用場(chǎng)。
大多數(shù)主要瀏覽器（包括Chrome、Firefox和Safari）都提供了此工具的變體。讓我們看看如何在每個(gè)中訪問(wèn)它。
訪問(wèn)Chrome檢查元素工具
在Chrome中可以通過(guò)三種方式訪問(wèn)??檢查元素工具：
- 右鍵單擊頁(yè)面上的元素并選擇Inspect（檢查）。
- 單擊窗口右上角的三點(diǎn)菜單，然后選擇“更多工具”>“開發(fā)者工具”。
- 按鍵盤上的 Ctrl + Shift + C （在 Mac 上為Cmd + Option + C ）。
當(dāng)該工具打開時(shí)，它會(huì)向您顯示一個(gè)拆分視圖。一方面，您可以預(yù)覽正在檢查的網(wǎng)站，以及一些用于調(diào)整視圖和模擬不同屏幕分辨率的控件：
另一方面，有幾個(gè)包含信息的窗格。頂部窗格是頁(yè)面的 HTML。將鼠標(biāo)懸停在部分代碼上將突出顯示右側(cè)頁(yè)面的相關(guān)區(qū)域：
下面是一個(gè)顯示頁(yè)面信息的窗格。此處顯示的詳細(xì)信息因您選擇的選項(xiàng)卡而異。在上面的屏幕截圖中，它顯示了頁(yè)面的CSS樣式。
底部窗格只是關(guān)于Chrome 開發(fā)者工具的新聞和更新。您可以通過(guò)單擊X安全地關(guān)閉它以減少混亂。
最后，您可以通過(guò)單擊HTML窗格右上角的三點(diǎn)菜單并選擇?？窟x項(xiàng)之一來(lái)更改這些窗格的位置。
訪問(wèn)Firefox檢查元素工具
Firefox中的檢查元素工具與Chrome的非常相似，可以通過(guò)類似的方式訪問(wèn)：
- 右鍵單擊頁(yè)面上的元素并選擇“檢查元素”。
- 單擊 Firefox 窗口右上角的漢堡菜單，然后選擇更多工具 > Web開發(fā)工具。
- 按鍵盤上的 Ctrl + Shift + C （在 Mac 上為Cmd + Option + C）。
Firefox默認(rèn)將信息窗格放在屏幕底部：
但是，您可以通過(guò)單擊三點(diǎn)菜單并選擇其他選項(xiàng)輕松移動(dòng)它們。
Safari檢查元素工具
在Mac計(jì)算機(jī)上，Safari Web瀏覽器也提供了檢查元素工具。但是，訪問(wèn)它還有一個(gè)額外的步驟——您需要啟用Safari開發(fā)人員工具。
為此，請(qǐng)前往屏幕頂部的菜單欄并導(dǎo)航至Safari>偏好設(shè)置>高級(jí)。然后，您可以選中相關(guān)框以啟用開發(fā)工具：
啟用后，您可以像在其他瀏覽器中一樣訪問(wèn)檢查元素工具功能：
- 右鍵單擊一個(gè)元素并選擇檢查元素。
- 在頂部菜單欄中，導(dǎo)航到 開發(fā)>顯示頁(yè)面檢查器。
- 按 鍵盤上的Cmd + Option + I。
Safari工具的初始布局與瀏覽器略有不同：
但是，與Chrome和Firefox一樣，您可以通過(guò)單擊檢查器窗口左上角的圖標(biāo)輕松對(duì)其進(jìn)行自定義。
檢查元素工具常見用途
現(xiàn)在您知道如何訪問(wèn)“檢查元素”工具，讓我們看看您可以使用它執(zhí)行的一些有用操作。有很多可能性，但以下用途是一些最常見的用途。請(qǐng)注意，我們將在這些示例中使用 Chrome，但這些功能在其他瀏覽器中的工作方式應(yīng)該類似。
1. 在網(wǎng)站上查找CSS類
您可以利用檢查元素的最有用的方法之一是在頁(yè)面的層疊樣式表 (CSS) 中查找詳細(xì)信息。由于幾個(gè)原因，這很方便。首先，如果您只是在瀏覽互聯(lián)網(wǎng)并遇到一個(gè)您非常喜歡其風(fēng)格的網(wǎng)站，您可以查看 CSS 以收集一些您自己的網(wǎng)頁(yè)設(shè)計(jì)的想法。
它在您自己的網(wǎng)站上也很有用。例如，如果一個(gè)元素看起來(lái)不太正確，您可以快速檢查它以確保它使用正確的 CSS。
使用檢查元素工具檢查樣式有兩種基本方法。如果您想快速查看單個(gè)項(xiàng)目，可以在預(yù)覽窗格中將鼠標(biāo)懸停在其上以查看有關(guān)它的一些基本信息：
在這里，您可以在我們的博客上看到標(biāo)題的配色方案、字體、邊距等。在詳細(xì)窗格中，該工具還會(huì)突出顯示相關(guān)代碼，以便您可以準(zhǔn)確了解發(fā)生了什么。單擊預(yù)覽中的元素將更新樣式窗格以顯示其CSS：
如果將鼠標(biāo)懸停在元素上似乎沒(méi)有做任何事情，請(qǐng)確保檢查器窗格中的光標(biāo)圖標(biāo)以藍(lán)色突出顯示：
如果您知道要查找的特定CSS類或樣式并希望查看使用它的每個(gè)元素，您還可以使用搜索功能。在檢查器打開的情況下，按鍵盤上的 Ctrl + Shift + F （在 Mac上為Cmd + Shift + F ）。這將打開一個(gè)搜索框，您可以在其中搜索頁(yè)面的代碼。 相關(guān)結(jié)果將突出顯示，就像您在搜索文檔一樣。
2. 對(duì)站點(diǎn)進(jìn)行故障排除
檢查元素工具對(duì)于解決問(wèn)題非常方便。例如，如果元素的顏色或字體看起來(lái)不太正確，您可以使用我們?cè)谏弦还?jié)中描述的工具快速檢查它。
您還可以從“檢查元素”工具直接編輯頁(yè)面的HTML。只需雙擊要更改的代碼即可對(duì)其進(jìn)行編輯。
請(qǐng)注意，網(wǎng)站上的代碼實(shí)際上 并未更改——如果您刷新頁(yè)面，它將恢復(fù)到其原始形式。但是，此功能對(duì)于快速測(cè)試和故障排除非常有用。
最后，內(nèi)置調(diào)試器是一種更高級(jí)的工具，您可以使用它來(lái)查看頁(yè)面的任何錯(cuò)誤消息。要訪問(wèn)它，請(qǐng)單擊檢查元素工具窗口頂部的Console控制臺(tái)：
還有其他選項(xiàng)卡可用于查看來(lái)源、網(wǎng)絡(luò)活動(dòng)等。要訪問(wèn)完整列表，請(qǐng)單擊檢查器頂部的雙箭頭圖標(biāo)。
注：平時(shí)使用我們的主題或者插件的站長(zhǎng)，當(dāng)遇到異常問(wèn)題，使用此種方法查找故障并通過(guò)工單提交錯(cuò)誤信息截圖給我們，將有利于我們快速定位和解決問(wèn)題。
3. 編輯文本以預(yù)覽更改
檢查元素工具的最佳用途之一是快速預(yù)覽頁(yè)面文本、字體或顏色的更改。這樣，您甚至無(wú)需登錄WordPress儀表板就可以準(zhǔn)確地看到您的想法。
要編輯元素，請(qǐng)右鍵單擊它并選擇“檢查”。 這將打開具有該元素代碼焦點(diǎn)的工具。如果您已經(jīng)打開了檢查元素工具，您還可以單擊預(yù)覽窗格中的項(xiàng)目以突出顯示相關(guān)代碼。
接下來(lái)，只需雙擊代碼以使其可編輯。例如，我們?cè)谶@里更改了博客的標(biāo)題：
您還可以更改顏色。只需選擇元素并滾動(dòng) 樣式窗格即可找到相關(guān)部分。您可以單擊顏色方塊以調(diào)出顏色選擇器：
如果您知道要使用的顏色，也可以直接編輯顏色的十六進(jìn)制代碼。
4. 預(yù)覽圖像變化
檢查元素工具還可以輕松預(yù)覽圖像更改。這也是嘗試不同圖像尺寸的絕佳方式。
只需在預(yù)覽窗格中選擇要更改的圖像，然后在HTML窗格中雙擊其URL：
然后，您可以粘貼不同圖像的URL進(jìn)行測(cè)試。如果圖片在您的WordPress媒體庫(kù)中，您可以在附件詳細(xì)信息中快速找到URL：
甚至還有一個(gè)方便的按鈕可以將URL復(fù)制到剪貼板。再次記住，您在檢查器中所做的任何更改都只是暫時(shí)的，并且只對(duì)您可見，因此請(qǐng)隨意嘗試。
5. 使用設(shè)備仿真測(cè)試站點(diǎn)
最后，檢查元素的另一個(gè)有用功能是能夠模擬不同的屏幕尺寸甚至特定設(shè)備。這使您能夠測(cè)試站點(diǎn)的響應(yīng)能力，并準(zhǔn)確了解它在各種移動(dòng)設(shè)備形式下的顯示效果。
打開檢查元素工具，單擊看起來(lái)像堆疊的手機(jī)和平板電腦的圖標(biāo)：
這將啟用設(shè)備仿真。請(qǐng)注意，當(dāng)您打開檢查器時(shí)，它可能會(huì)默認(rèn)啟用。使用周圍的手柄調(diào)整頁(yè)面預(yù)覽的大小，或單擊預(yù)覽窗格頂部的下拉菜單以選擇各種設(shè)備：
您還可以輸入特定的縱橫比，甚至可以通過(guò)單擊預(yù)覽窗格頂部的“旋轉(zhuǎn)”圖標(biāo)來(lái)檢查移動(dòng)設(shè)備旋轉(zhuǎn)時(shí)頁(yè)面的外觀。要模擬各種傳感器，例如位置和觸摸，請(qǐng)單擊檢查器窗格中的三點(diǎn)菜單，然后選擇更多工具 >傳感器。
小結(jié)
無(wú)論您是 Web 開發(fā)新手還是經(jīng)驗(yàn)豐富的專業(yè)人士，檢查元素工具都是一個(gè)強(qiáng)大的實(shí)用程序，絕對(duì)應(yīng)該在您的武器庫(kù)中。它易于訪問(wèn)，幾乎普遍可用，并且可以快速輕松地進(jìn)行各種操作。
在本文中，我們演示了如何在Chrome、Firefox和Safari中訪問(wèn)檢查元素工具。我們還向您展示了如何使用它來(lái)定位CSS類、對(duì)網(wǎng)站進(jìn)行故障排除、臨時(shí)更改文本和圖像以及模擬移動(dòng)設(shè)備。使用此工具包，您擁有使檢查元素工具成為工作流程一部分所需的一切。
標(biāo)題名稱：如何使用瀏覽器檢查元素工具
URL地址：http://www.5511xx.com/article/dpccgpc.html
