查看任何網頁的HTML和CSS
該網站是用代碼行構建的,但結果是具有圖像,視頻,字體等的特定頁面。 要更改這些元素之一或查看它包含的內容,您必須找到控制它的特定代碼行。 你可以用元素檢查工具來做到這一點。
大多數Web瀏覽器不會讓您下載檢測工具或安裝附加組件。 相反,它們讓您右鍵單擊頁面元素並選擇“ 檢查或檢查元素” 。 但是,這個過程在你的瀏覽器中可能有點不同。
在Chrome中檢查元素
使用最新版本的Google Chrome瀏覽器,您可以通過幾種方式查看網頁,所有這些方式都使用其內置的Chrome DevTools:
- 右鍵單擊頁面上的某個內容(或空白區域),然後選擇“ 檢查”
- 輸入Ctrl + Shift + I鍵盤快捷鍵
- 使用Chrome菜單訪問更多工具>開發人員工具選項
Chrome DevTools可讓您輕鬆複製或編輯HTML行,或者完全隱藏或刪除元素(直到頁面重新加載)。
一旦DevTools在頁面上打開,您可以更改其定位位置,將其從頁面中彈出,搜索所有頁面的文件,從頁面中選擇用於特定檢查的元素,複製文件和URL,甚至可以自定義一堆的設置。
檢查Firefox中的元素
像Chrome一樣,Firefox有幾種不同的方式可以打開名為Inspector的工具:
- 右鍵單擊頁面上的空白區域或選擇一個元素,然後選擇檢查元素
- 用鍵盤輸入Ctrl + Shift + T或Ctrl + Shift + I
- 從Firefox菜單中,單擊開發人員 > 檢查器
- 從工具菜單中,單擊Web開發人員>檢查器
當您將鼠標移到Firefox中的各種元素上時,Inspector工具會自動查找元素的源代碼信息。 單擊一個元素,“停止搜索”將停止,您可以從巡視窗口中檢查元素。
右鍵單擊一個元素以查找所有支持的控件。 您可以執行諸如將頁面編輯為HTML,複製或粘貼內部或外部HTML代碼,顯示DOM屬性,截圖或刪除節點,輕鬆應用新屬性,查看頁面的所有CSS等等。
檢查Opera中的元素
Opera也可以檢查元素,它的DOM Inspector工具與Chrome相同。 以下是如何做到這一點:
- 使用鍵盤快捷鍵Ctrl + Shift + I
- 導航到菜單>更多工具>顯示開發人員菜單 ,然後通過菜單>開發人員>開發人員工具打開菜單
- 從頁面上任何元素的右鍵單擊菜單中,選擇檢查元素
檢查Internet Explorer中的元素
Internet Explorer中提供了一個名為Developer Tools的類似檢查元素工具:
- 按下鍵盤上的F12
- 使用工具> F12開發人員菜單選項(如果沒有看到工具菜單,請點擊Alt + X )
- 在頁面上單擊鼠標右鍵,然後單擊檢查元素
IE在這個新菜單中有一個Select元素工具,可以讓你點擊任何頁面元素來查看它的HTML和CSS細節。 在瀏覽DOM Explorer選項卡時,您還可以輕鬆禁用/啟用元素高亮顯示。
與上述瀏覽器中的其他元素檢查器工具一樣,Internet Explorer允許您剪切,複製和粘貼元素,以及編輯HTML,添加屬性,複製附帶樣式的元素等。