開發者工具

開發者工具（通常稱作DevTools^[1]）是一種網頁開發者測試和調試代碼的工具。不同於網站創建器或者集成開發環境，Web 開發工具不直接參與網站的創建，而用於測試網站或網頁應用的用戶界面^[1]。

Web開發工具一般內置於網頁瀏覽器或者作為瀏覽器的附加組件使用。大多數市面上常見的網頁瀏覽器，如Google Chrome、Firefox、Internet Explorer、Safari、Microsoft Edge和Opera^[2]，都有內置的工具用於網站開發，而在其各自的插件中心可以下載到更多工具。

Web開發工具便於開發人員調試各種瀏覽器網頁處理技術，例如HTML、CSS、DOM、JavaScript。隨著對瀏覽器的功能需求越來越高，^[3] 流行的瀏覽器已經包含了更多面向開發者的特性。^[4]

瀏覽器支持概覽

一些知名的瀏覽器都支持 Web 開發工具，使得網頁設計師與開發者可以查看其頁面的構成。所有這些工具都內置於瀏覽器，不需要額外的模塊或配置。

• Firefox瀏覽器 – F12 打開網頁控制台/瀏覽器控制台（自Firefox 4以後）。^[5][6] 網頁控制台作用於單個頁面；瀏覽器控制台作用於整個瀏覽器。^[7]
• Google Chrome^[8]
• Internet Explorer和Microsoft Edge^[9][10]
• Opera^[11]
• Safari^[12]

常用特性

使用Web開發工具的通常做法是，滑鼠懸停在頁面元素上方，然後在右鍵菜單中選擇「檢查元素」或其它相似選項。更常見的替代方式是使用快捷鍵 F12。^[13]

HTML 和 DOM

Web開發工具通常包含了HTML與DOM屬性查看器。這與瀏覽器「查看原始碼」功能的不同之處在於，HTML與DOM屬性查看器不僅允許你查看頁面DOM屬性當前的渲染結果，還允許你查看改動了屬性值之後頁面即時更新的渲染結果。^[14]

除了選擇與編輯之外，HTML元素面板通常還會顯示DOM對象的屬性，例如CSS樣式屬性。^[15]

擴展與插件

現代瀏覽器支持使用插件或擴展來添加或增強DevTools功能。許多常用的插件實現了Web開發工具沒有的功能，例如禁用JavaScript，禁用CSS等等。例如Vue有Vue的Dev Tools插件^[16][17]。