开发者工具
开发者工具（通常称作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]。
参考文献
编辑- ^ 1.0 1.1 微软. DevTools 概述 - Microsoft Edge Developer documentation. learn.microsoft.com. 2023-12-08 [2024-05-16]. （原始内容存档于2024-05-16） （中文（中国大陆））.
- ^ 存档副本. [2021-04-05]. （原始内容存档于2013-03-06）.
- ^ Growing Demand for Web Developers. Bright Hub. [2018-09-06]. （原始内容存档于2020-06-19）.
- ^ Latest Application Development | Mobile Web Development - App Development, Application Trends. devworks.thinkdigit.com. [2018-09-06]. （原始内容存档于2014-01-17）.
- ^ The Browser Console. Mozilla Hacks – the Web developer blog. [2018-09-06]. （原始内容存档于2021-07-16） （美国英语）.
- ^ Web Console. MDN Web Docs. [2018-09-06]. （原始内容存档于2021-06-25） （美国英语）.
- ^ Browser Console. Mozilla Developer Network. 13 August 2016 [15 March 2017]. （原始内容存档于2017-05-30）.
- ^ Chrome DevTools Overview - Google Chrome. developer.chrome.com. [2018-09-06]. （原始内容存档于2018-09-11）.
- ^ McCormick, Libby. F12 Developer Tools (Windows). msdn.microsoft.com. [2018-09-06]. （原始内容存档于2014-12-24） （美国英语）.
- ^ erikadoyle. Microsoft Edge Developer Tools - Microsoft Edge Development. docs.microsoft.com. [2018-09-06]. （原始内容存档于2017-10-13） （美国英语）.
- ^ Opera Browser | Faster, Safer, Smarter Web Browser. www.opera.com. [2018-09-06]. （原始内容存档于2011-08-22） （英语）.
- ^ Inc., Apple. Tools - Safari - Apple Developer. developer.apple.com. [2018-09-06]. （原始内容存档于2014-09-09） （英语）.
- ^ 存档副本. [2021-07-27]. （原始内容存档于2013-04-03）.
- ^ McCormick, Libby. Introduction to F12 Developer Tools (Windows). msdn.microsoft.com. [2018-09-06]. （原始内容存档于2017-11-07） （美国英语）.
- ^ Inspect and Edit Pages and Styles | Tools for Web Developers. Google Developers. [2018-09-06]. （原始内容存档于2014-03-27） （英语）.
- ^ Vue Devtools. devtools.vuejs.org. [2024-05-16]. （原始内容存档于2024-08-15）.
- ^ Microsoft. 创建用于自定义 DevTools UI 的扩展 - Microsoft Edge Developer documentation. learn.microsoft.com. 2023-03-29 [2024-05-16]. （原始内容存档于2024-05-16） （中文（中国大陆））.