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

Web開發工具一般內置於網頁瀏覽器或者作為瀏覽器的附加組件使用。大多數市面上常見的網頁瀏覽器,如Google ChromeFirefoxInternet ExplorerSafariMicrosoft EdgeOpera[2],都有內置的工具用於網站開發,而在其各自的插件中心可以下載到更多工具。

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

瀏覽器支持概覽

編輯

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

常用特性

編輯

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

HTML 和 DOM

編輯

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

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

擴展與插件

編輯

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

參考文獻

編輯
  1. ^ 1.0 1.1 微軟. DevTools 概述 - Microsoft Edge Developer documentation. learn.microsoft.com. 2023-12-08 [2024-05-16]. (原始內容存檔於2024-05-16) (中文(中國大陸)). 
  2. ^ 存档副本. [2021-04-05]. (原始內容存檔於2013-03-06). 
  3. ^ Growing Demand for Web Developers. Bright Hub. [2018-09-06]. (原始內容存檔於2020-06-19). 
  4. ^ Latest Application Development | Mobile Web Development - App Development, Application Trends. devworks.thinkdigit.com. [2018-09-06]. (原始內容存檔於2014-01-17). 
  5. ^ The Browser Console. Mozilla Hacks – the Web developer blog. [2018-09-06]. (原始內容存檔於2021-07-16) (美國英語). 
  6. ^ Web Console. MDN Web Docs. [2018-09-06]. (原始內容存檔於2021-06-25) (美國英語). 
  7. ^ Browser Console. Mozilla Developer Network. 13 August 2016 [15 March 2017]. (原始內容存檔於2017-05-30). 
  8. ^ Chrome DevTools Overview - Google Chrome. developer.chrome.com. [2018-09-06]. (原始內容存檔於2018-09-11). 
  9. ^ McCormick, Libby. F12 Developer Tools (Windows). msdn.microsoft.com. [2018-09-06]. (原始內容存檔於2014-12-24) (美國英語). 
  10. ^ erikadoyle. Microsoft Edge Developer Tools - Microsoft Edge Development. docs.microsoft.com. [2018-09-06]. (原始內容存檔於2017-10-13) (美國英語). 
  11. ^ Opera Browser | Faster, Safer, Smarter Web Browser. www.opera.com. [2018-09-06]. (原始內容存檔於2011-08-22) (英語). 
  12. ^ Inc., Apple. Tools - Safari - Apple Developer. developer.apple.com. [2018-09-06]. (原始內容存檔於2014-09-09) (英語). 
  13. ^ 存档副本. [2021-07-27]. (原始內容存檔於2013-04-03). 
  14. ^ McCormick, Libby. Introduction to F12 Developer Tools (Windows). msdn.microsoft.com. [2018-09-06]. (原始內容存檔於2017-11-07) (美國英語). 
  15. ^ Inspect and Edit Pages and Styles  |  Tools for Web Developers. Google Developers. [2018-09-06]. (原始內容存檔於2014-03-27) (英語). 
  16. ^ Vue Devtools. devtools.vuejs.org. [2024-05-16]. (原始內容存檔於2024-08-15). 
  17. ^ Microsoft. 创建用于自定义 DevTools UI 的扩展 - Microsoft Edge Developer documentation. learn.microsoft.com. 2023-03-29 [2024-05-16]. (原始內容存檔於2024-05-16) (中文(中國大陸)).