如何在 Chrome、Safari 和 Firefox 中檢查元素？

您有沒有想過是什麼讓網頁看起來如此令人驚嘆，並具有許多功能和功能？所有程式碼如何組合在一起創建一個有吸引力且令人驚嘆的網站？

只需使用瀏覽器中的檢查工具檢查網站元素，即可輕鬆揭示所有秘密。

借助這個內建工具，您可以輕鬆剝離網站層並查看程式碼如何連接到每個元素，從而創建一個功能齊全的網站。它將讓您了解前端的工作方式，並激勵您在專案中重新創建它們。

在這篇文章中，我們將向您展示如何在流行的瀏覽器中檢查網站元素，並提供直接使用它們的簡短方法。

如何在任何瀏覽器上檢查網站的元素？

只需按照這些「檢查元素」快捷方式，您就可以輕鬆地在任何瀏覽器上檢查網站的元素。

1. 檢查 Google Chrome 瀏覽器的 Elements 捷徑

您只需按下鍵盤上的組合鍵Ctrl+Shift+I即可啟動開發工具或檢查元素工具來存取網站的元素。

但是，您可以嘗試的另一種快捷方式和直接方法是右鍵單擊網站的空白區域或任何元素，然後選擇「檢查」。之後，您可以使用「元素」標籤查看整個網站結構，或使用「控制台」標籤查看任何類型的警告或錯誤。

然而，存取開發工具的第三種但很長的方法是點擊位於 Chrome 瀏覽器右上角的三個垂直點或漢堡選單（帶有三個堆疊點的圖示），然後點擊更多工具，然後選擇開發者工具。

2. 檢查 Firefox 瀏覽器的 Elements 捷徑

如果您是 Firefox 瀏覽器用戶，您可以嘗試組合快捷鍵Ctrl+Shift+C 來利用開發工具來偵測網站元素。或者，您甚至可以右鍵單擊網站的空白區域或任何元素，然後選擇「檢查」。

3. 檢查 Opera 瀏覽器的 Elements 捷徑

對於 Opera 用戶，請按鍵盤上的Ctrl+Shift+I直接存取開發工具來檢查網站元素。同樣，與其他瀏覽器一樣，您也可以直接右鍵單擊網站的空白區域或任何元素，然後選擇「檢查」。

4. 檢查 Edge 瀏覽器的 Elements 捷徑

如果 Edge 是您使用的預設瀏覽器；您可以按下鍵盤上的F12開啟開發工具。或只需右鍵單擊網站的空白區域或任何元素，然後選擇“檢查”。

5. 在 Safari 瀏覽器中檢查元素

Safari 瀏覽器沒有任何快捷方法來檢查網站的元素，但您必須按照以下步驟操作：

要在 Safari 中使用 Inspect Element，您需要先啟用開發人員工具。就是這樣：

• 點擊頂部選單中的“Safari”，然後選擇“設定”。

• 轉到“進階”選項卡，然後選取“在功能表列中顯示開發功能表”方塊。

• 關閉首選項視窗。

現在，您可以右鍵單擊網頁上的任意位置，然後選擇「檢查元素」以開啟「元素」窗格。

該窗格將立即在視窗底部打開，這可能看起來不太好，並且也會為查看程式碼帶來困難。

為了方便起見，請按一下窗格左上角的圖示（「X」旁）將其移至一側，然後選擇「停靠到視窗右側」或「停靠到視窗左側」 」。 （適用於所有瀏覽器）

此外，如果需要，您甚至可以將窗格與視窗分開。若要變更窗格的大小，請將遊標移至窗格的邊緣，直到其變為雙箭頭，然後按一下並拖曳以調整大小。

現在您可能想知道，打開窗格後要做什麼，或者您可以查看有關網站的主要元素是什麼。

那麼，為此目的請查看以下部分。

您可以使用檢查網站元素開發工具執行的操作

現在您已成功存取「元素」工具並開啟了該窗格，您將看到各種內建工具可協助您輕鬆使用網站、自訂網站並根據您的要求進行編輯。

為了方便起見，我們將使用 Chrome 進行演示，但所有瀏覽器的所有功能、設定、選項和說明都相同。

1. 使用 Inspect Element Search 工具在網站上尋找任何內容

在整個原始程式碼中搜尋任何內容可能會讓人不知所措，因為原始程式碼很複雜，有時還很大。因此，DevTools 有一個內建的搜尋工具。

若要使用它，請開啟預設的「元素」窗格，然後按 Ctrl + F 或 Command + F 搜尋原始程式碼。 「搜尋」標籤將立即出現在 DevTools 窗格的底部。

在搜尋欄位中，您可以搜尋任何內容，無論是 CSS、JavaScript 檔案還是原始程式碼中的特定元素。

例如，如果您在搜尋欄位中輸入「元名稱」並按 Enter 鍵，它將尋找並顯示程式碼中所有出現的「元名稱」。這可以幫助您檢查網頁的元、SEO 關鍵字和索引狀態。

同樣，如果您是網頁設計師，則可以透過在搜尋欄位中輸入顏色十六進位代碼（例如#98fb98db）並按 Enter 來搜尋顏色。這將顯示網站 CSS 和 HTML 檔案中該顏色的每個實例。

溝通與修復：

• 搜尋工具透過準確顯示錯誤所在或需要更改的內容來幫助與開發人員溝通。
• 告訴開發人員有問題的行號，以便更快修復。
• 您也可以使用 Elements（Chrome 開發人員工具的核心部分）自行變更網頁。

2. 選擇並檢查網頁的單一/特定元素

您也可以透過直接點擊窗格左上角的遊標圖示來查看頁面特定元素的 HTML 程式碼。

現在，您可以單擊任何頁面元素以在檢查面板中顯示其原始程式碼。

3. 編輯或修改任何帶有元素的內容

如果您喜歡嘗試並嘗試網站設計，並且喜歡將即時想法變為現實，那麼檢查元素工具可以幫助您做到這一點。

使用此工具，您可以透過修改或編輯 CSS 和 HTML 檔案並即時查看結果來暫時更改網站的外觀。

然而，這些變化並不是永久性的。重新載入頁面後，變更將消失。這樣，您就可以隨心所欲地進行實驗，而不會幹擾網站的原始程式碼。

如果在某些時候您發現更改很有吸引力，您可以簡單地複製它們並將其保存到其他地方以供以後使用。

讓我們來看一些例子以供參考。

但在此之前，讓我們先把操場準備好並清理乾淨。為此，請按一下「開發人員工具」窗格中的「元素」標籤。如需更多空間，請按Esc鍵關閉搜尋框。

現在您已準備好在螢幕上看到完整的原始程式碼。

• 在「開發人員」窗格的左上角，按一下方塊頂端的滑鼠圖示。
• 選擇頁面上的任何元素進行更改。

更改網頁上的文字：

• 按一下滑鼠遊標/方形圖示。
• 點擊頁面上的任意文字。
• 在「開發人員工具」窗格中，按兩下反白的文字以使其可編輯。

• 輸入新文本，例如“最快”而不是“高級”，如下圖所示，然後按Enter 。
• 文字變更是暫時的，刷新頁面後將會恢復。

編輯元素：

• 關閉「開發人員」窗格，突出顯示網頁的任何部分，右鍵單擊，然後選擇「檢查」 。
• 開發人員工具窗格將會反白顯示所選句子。

更改 Elements 的顏色和字體大小：

• 在「開發人員工具」窗格中，前往「樣式」標籤。

• 按一下“font-size”欄位並將值變更為 22px。

• 捲動到“顏色”並將其變更為#ff0000。

• 將“字體系列”調整為“Arial”。

現在，在我們進行更改之前，字體看起來像這樣：

更改後，顯示如下：

改變元素狀態：

如果您想讓您的網站在訪客將滑鼠懸停在按鈕或連結上或與按鈕或連結互動時在視覺上更具吸引力，您可以使用「元素狀態」選項。

• 點擊滑鼠遊標/框圖示並選擇元素。
• 在開發人員工具窗格中，右鍵單擊程式碼，將滑鼠懸停在Force state上，然後按一下:active：
• 重複並點擊：懸停：

• 將“背景顏色”值變更為#003b59 以查看新的懸停顏色。

更改背景圖像：

• 只需複製圖像地址的鏈接，即（圖像已託管的位置。）

• 開啟「使用 AI 為您的自動化提供動力」按鈕上的檢查元素。
• 找到“background-color”程式碼並將顏色替換為url(“image-link”) 。

嘗試更多改變：

• 您可以變更文字、交換圖像以及變更顏色和樣式。
• 嘗試不同的變更以查看您的網站的外觀。

4. 在任何螢幕尺寸或裝置上測試網站

如今，甚至谷歌也強烈建議網站應該具有響應能力，並且可以在任何設備和螢幕尺寸上輕鬆訪問。大多數網路使用者喜歡透過智慧型手機而不是筆記型電腦和桌上型電腦造訪網站。

因此，網路管理員在建立網站時使其響應靈敏且適合行動裝置變得至關重要。

然而，對於任何網頁開發人員或設計人員來說，同時檢查每種類型的設備或螢幕尺寸上的網站可能並不可行。為了解決此問題，模擬工具可讓您查看並檢查您的網站對使用不同裝置的不同使用者的顯示效果。

這並不意味著您應該跳過在不同設備上的實際測試，但它可以給您一個好主意。

您可以這樣執行：

• 在「開發人員工具」窗格中，按一下左上角的小型電話圖示。
• 該頁面將變成電話風格的視圖，頂部有一個選單可以更改大小。
• 調整小瀏覽器的大小以查看頁面在平板電腦、手機或更小螢幕等不同裝置上的外觀。

• 點擊頂部的選單可選擇預設裝置尺寸，例如 Surface Duo 或 iPhone 12 Pro。
• 網頁將根據所選設備的大小進行調整。使用尺寸旁邊的百分比下拉式選單進行放大。
• 在裝置預設中選擇“響應式”，可透過拖曳網頁右邊緣來調整檢視。
• 點擊頂部選單末尾的旋轉圖示可在縱向和橫向視圖之間切換。
• 探索不同的裝置以查看網頁和螢幕解析度如何變化。
• 所有其他開發人員工具也將對設備視圖做出反應。

5. 在模擬行動網路上測試網頁效能

除了所有視覺測試之外，您還可以查看您的網站在不同行動網路（例如 5G、4G、3G 或更慢的網路）上的表現。

為了證明這一點，

• 點擊窗格右上角的漢堡選單。
• 將滑鼠懸停在更多工具上並選擇網路條件。

網路條件：

• 選擇任意網路條件，例如快速 4G、慢速 4G 或離線，以查看頁面在沒有網路的情況下如何運作。

• 按一下「新增...」以包含您的測試速度（例如，56Kbps 來測試撥接網路）。
• 重新載入頁面以查看在慢速連線上載入需要多長時間以及載入時的外觀。
• 這可以幫助您了解改善網站慢速連線載入時間的重要性。

更改用戶代理：

• 在使用者代理程式欄位中，取消選取使用瀏覽器預設值。
• 選擇不同的使用者代理程式（例如，Firefox、Mac）以查看網站是否更改了其他瀏覽器的呈現。
• 此功能可讓您了解網路如何頁面載入即使他們聲稱只能在不同的瀏覽器中工作。

結論

在獲得有關開發工具或檢查元素的如此多的深入資訊後，您一定已經意識到，在公共領域有大量關於您最喜歡的網站的資訊。

只需點擊幾下，您就可以完全揭開任何網站，揭示其視覺上令人驚嘆的特性和功能的所有秘密，而無需檢查原始文件。

現在，您可以分析和查看使用了哪些 CSS 樣式、複雜功能背後的邏輯、如何在程式碼層級完成搜尋引擎優化等等。

拉胡爾

Rahul Kumar 是一位網路愛好者和內容策略師，專門從事 WordPress 和網站託管。憑藉多年的經驗和對了解最新行業趨勢的承諾，他制定了有效的線上策略來增加流量、提高參與度並提高轉換率。拉胡爾對細節的關注以及製作引人入勝的內容的能力使他成為任何希望提高其線上形象的品牌的寶貴資產。