Loading AI tools
来自维基百科,自由的百科全书
開發者工具(通常稱作DevTools[1])是一種網頁開發者測試和調試代碼的工具。不同於網站創建器或者集成開發環境,Web 開發工具不直接參與網站的創建,而用於測試網站或網頁應用的用戶界面[1]。
Web開發工具一般內置於網頁瀏覽器或者作為瀏覽器的附加組件使用。大多數市面上常見的網頁瀏覽器,如Google Chrome、Firefox、Internet Explorer、Safari、Microsoft Edge和Opera[2],都有內置的工具用於網站開發,而在其各自的插件中心可以下載到更多工具。
Web開發工具便於開發人員調試各種瀏覽器網頁處理技術,例如HTML、CSS、DOM、JavaScript。隨着對瀏覽器的功能需求越來越高,[3] 流行的瀏覽器已經包含了更多面向開發者的特性。[4]
一些知名的瀏覽器都支持 Web 開發工具,使得網頁設計師與開發者可以查看其頁面的構成。所有這些工具都內置於瀏覽器,不需要額外的模塊或配置。
使用Web開發工具的通常做法是,鼠標懸停在頁面元素上方,然後在右鍵菜單中選擇「檢查元素」或其它相似選項。更常見的替代方式是使用快捷鍵 F12。[13]
Web開發工具通常包含了HTML與DOM屬性查看器。這與瀏覽器「查看原始碼」功能的不同之處在於,HTML與DOM屬性查看器不僅允許你查看頁面DOM屬性當前的渲染結果,還允許你查看改動了屬性值之後頁面即時更新的渲染結果。[14]
除了選擇與編輯之外,HTML元素面板通常還會顯示DOM對象的屬性,例如CSS樣式屬性。[15]
現代瀏覽器支持使用插件或擴展來添加或增強DevTools功能。許多常用的插件實現了Web開發工具沒有的功能,例如禁用JavaScript,禁用CSS等等。例如Vue有Vue的Dev Tools插件[16][17]。
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.