How to Inspect Elements in Chrome and Firefox?

您有沒有想過一個製作精美的網站背後有哪些元素？了解如何檢查 Chrome 和 Firefox 中的元素。 

每個視覺上令人驚嘆的網頁都有複雜的 HTML、CSS 和 JavaScript 程式碼在後端運行。使用名為 Inspect Element 的便利開發工具，您可以在熱門的網頁瀏覽器上檢查 HTML 網頁的元素。

除了讓您檢查元素之外，此工具還可以幫助您更改網站佈局並進行無文字螢幕截圖。繼續閱讀以了解如何檢查 Windows 上流行的 Web 瀏覽器上的元素。

什麼是檢查元素？

Inspect Elements 是一種開發人員工具，可在所有流行的網頁瀏覽器中找到，例如 Google Chrome、Mozilla Firefox、Microsoft Edge、Safari 和 Brave。使用此工具，您可以查看網頁的 HTML、CSS 和 JSS 原始程式碼。

此外，您可以使用它來編輯 HTML 和 CSS 程式碼，並將變更即時顯示在瀏覽器上。 Web 開發人員、設計師和行銷人員使用它來預覽樣式變更、修復錯誤或學習網站架構。

儘管是一個開發者工具，但它不需要安裝任何額外的軟體。您可以按照我們將在本文中描述的方法從網頁瀏覽器執行此操作。 

在使用「檢查元素」功能之前，請記住，您為操作 Web 內容所做的任何變更都是暫時的。這些變更僅對您可見，而實際的網頁視圖對於其他使用者來說是相同的。

什麼時候使用檢查元素？

以下是您可能需要使用此功能的一些常見情況：

網頁設計

當您需要了解網頁的結構或測試CSS樣式時，可以使用此工具。它還有助於嘗試不同的元素並修改程式碼以立即檢查視覺結果。

截圖

如果您想截取沒有某些特定元素（例如文字或圖像）的網頁螢幕截圖，此工具會派上用場。找到要刪除的元素的 HTML 程式碼並刪除該程式碼。該元素將立即從您的網頁視圖中刪除，您可以截圖。

網站調試

使用此工具的另一個常見情況是識別網站問題或錯誤。它使您能夠檢查 HTML、CSS 和 JSS 程式碼。因此，您可以找出哪些元素無法正常工作或顯示不正確。

學習網頁開發

如果您正在學習 Web 開發，Inspect Elements 是您的必備工具。它為您提供對特定網站背後的元素的寶貴見解，以了解和學習實現的功能和整體網頁架構。

測試可訪問性

您也可以使用網頁瀏覽器上的檢查元素工具來評估網站的可訪問性。使用它，您可以確保準確的語義標記並驗證可訪問性屬性。此外，它還使您能夠使用螢幕閱讀器或其他技術測試網站。

提取資產

如果您想快速從網頁中提取某些內容或資產，請使用此工具。它允許您查找不同媒體元素（例如圖像和影片）的原始 URL。此外，您可以使用它來了解某些資料是如何載入的。

在不同 Web 瀏覽器上檢查元素的好處

了解網站架構

該工具透過 HTML 標記提供網站結構的可視化表示。因此，您可以識別嵌套元素並了解元素如何互動。它不僅可以幫助您理解整體架構，還可以讓您建立類似的結構。

故障排除

每當開發人員需要識別與佈局、響應式設計、JavaScript 錯誤和效能相關的問題時，他們都會使用 Inspect Elements 工具。它還使他們能夠確保網站的跨瀏覽器相容性。

分析 CSS 樣式

您可以使用此工具來分析 CSS 樣式並了解字體選擇、顏色和佈局屬性等方面。這種視覺外觀知識可以幫助開發人員解決佈局不一致問題並確保品牌持久。

檢定

檢查元素也有利於網站可訪問性和相容性評估。它允許您檢查 HTML 屬性、ARIA 角色和其他樣式，以確保每個人都可以輕鬆存取 Web 內容。

進行實地實驗

即時實驗和原型設計是使用 Inspect Elements 工具的額外好處。您可以直接修改元素以在網頁上查看變更。需要快速測試和微調網站設計的人可以使用它來進行高效開發。

學習 

最重要的是，Inspect Elements 是從現有網站學習並為您自己的專案獲取靈感的完美工具。它可以幫助您分析網站結構和佈局。利用這些知識進行協作並持續改進。

檢查元素可以完成的事情

• 它可以幫助您在CSS面板中進行即時編輯並即時查看更改。
• 它可以讓您測試不同的網站佈局，而無需重新上傳更改的 HTML 檔案。
• 檢查元素工具還使您能夠檢查任何損壞的程式碼以進行網站維護。
• 此工具可用於調整頁面元素，而無需更改原始 HTML 檔案。

在 Google Chrome 上檢查元素的逐步方法

方法一：使用右鍵選單的檢查指令

這是在 Chrome 上檢查網頁元素最常見的方法。

1. 在 Google Chrome 上開啟您要檢查的網頁。
2. 將遊標停留在文字、圖像、影片或任何其他元素上。
3. 現在，右鍵點擊以取得上下文選單。
4. 點選選單底部的檢查選項。 
5. HTML 程式碼將會打開，突出顯示該特定元素的程式碼。

方法2：使用鍵盤快速鍵

使用此方法，您可以開啟整個網頁的HTML程式碼。但無法直接開啟確定元素的程式碼。

1. 確保您在 Chrome 中開啟了首選網站或網頁。
2. 同時按下鍵盤上的Ctrl Shift I鍵。
3. 控制台抽屜將使用 HTML 程式碼開啟。

方法三：使用功能鍵

此方法是另一種簡單的方法，因為它只需要一次按鍵。只需開啟網頁並按F12鍵即可開啟其HTML程式碼。切換它以打開和關閉檢查元素工具。

方法4：使用Chrome選單

您也可以從 Chrome 選單存取開發者工具並檢查網站的元素。

1. 在 Google Chrome 上開啟任意網頁。
2. 點選右上角的三個點圖示。
3. Chrome 選單開啟後，將滑鼠停留在更多工具選項上。
4. 慢慢將遊標移到子選單上的開發者工具選項。
5. 檢查元素頁面將會開啟。

注意：如果您使用Microsoft Edge，可以按照相同的方法檢查網頁元素。

在 Mozilla Firefox 上檢查元素的逐步方法

方法一：在 Firefox 上使用 Inspect 指令

Firefox 使用者可以使用此方法檢查任何 HTML 網頁元素背後的程式碼。

1. 首先，在 Firefox 上開啟網站。
2. 右鍵點擊，同時將遊標放在要檢查的元素上。
3. 將出現一個選單，您需要點選檢查選項或按Q鍵。
4. 兩者都會使檢查元素工具出現在螢幕上。

方法二：使用功能鍵

與 Chrome 類似，當您按下 F12 鍵時，Firefox 也會顯示檢查元素工具。若要關閉該工具，您需要再次按下該鍵。

Method 3: Using Firefox Menu

Firefox also has a Developer tool using which you can inspect the element of any webpage.

1. While on a webpage, click on the hamburger icon on the right corner of the menu bar.
2. When the menu opens, click on the More tools option.
3. Click on Web Developer Tools under Browser Tools section.
4. This will open the HTML code on your screen.

Method 4: Using the Keyboard Shortcut

Just like Chrome, Firefox also has a keyboard shortcut for Inspect Elements tool.

1. Open any webpage on Firefox.
2. Press Ctrl Shift C on your Windows keyboard.
3. You will be able to see the complete HTML code of that webpage.

Conclusion

Inspect Elements is a beneficial tool not only for the developers but also for anyone who wants to modify the website design or experiment with the webpage look. Here, we have explored the benefits and use cases of Inspect Element tool.

The top methods to inspect elements in popular web browsers are also mentioned here. So, if you want to inspect the HTML elements of a web page for professional or fun use, you can try any of the approaches.

The above is the detailed content of How to Inspect Elements in Chrome and Firefox?. For more information, please follow other related articles on the PHP Chinese website!