开发者工具

(重定向自Web开发工具

开发者工具(通常称作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) (中文(中国大陆)).