如何檢查網頁元素

查看任何網頁的HTML和CSS

該網站是用代碼行構建的,但結果是具有圖像,視頻,字體等的特定頁面。 要更改這些元素之一或查看它包含的內容,您必須找到控制它的特定代碼行。 你可以用元素檢查工具來做到這一點。

大多數Web瀏覽器不會讓您下載檢測工具或安裝附加組件。 相反,它們讓您右鍵單擊頁面元素並選擇“ 檢查檢查元素” 。 但是,這個過程在你的瀏覽器中可能有點不同。

在Chrome中檢查元素

使用最新版本的Google Chrome瀏覽器,您可以通過幾種方式查看網頁,所有這些方式都使用其內置的Chrome DevTools:

Chrome DevTools可讓您輕鬆複製或編輯HTML行,或者完全隱藏或刪除元素(直到頁面重新加載)。

一旦DevTools在頁面上打開,您可以更改其定位位置,將其從頁面中彈出,搜索所有頁面的文件,從頁面中選擇用於特定檢查的元素,複製文件和URL,甚至可以自定義一堆的設置。

檢查Firefox中的元素

像Chrome一樣,Firefox有幾種不同的方式可以打開名為Inspector的工具:

當您將鼠標移到Firefox中的各種元素上時,Inspector工具會自動查找元素的源代碼信息。 單擊一個元素,“停止搜索”將停止,您可以從巡視窗口中檢查元素。

右鍵單擊一個元素以查找所有支持的控件。 您可以執行諸如將頁面編輯為HTML,複製或粘貼內部或外部HTML代碼,顯示DOM屬性,截圖或刪除節點,輕鬆應用新屬性,查看頁面的所有CSS等等。

檢查Opera中的元素

Opera也可以檢查元素,它的DOM Inspector工具與Chrome相同。 以下是如何做到這一點:

檢查Internet Explorer中的元素

Internet Explorer中提供了一個名為Developer Tools的類似檢查元素工具:

IE在這個新菜單中有一個Select元素工具,可以讓你點擊任何頁面元素來查看它的HTML和CSS細節。 在瀏覽DOM Explorer選項卡時,您還可以輕鬆禁用/啟用元素高亮顯示。

與上述瀏覽器中的其他元素檢查器工具一樣,Internet Explorer允許您剪切,複製和粘貼元素,以及編輯HTML,添加屬性,複製附帶樣式的元素等。