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