Web开发工具

Web 开发工具（通常称作devtools）是一种网页开发者测试和调试代码的工具。不同于网站创建器或者集成开发环境，Web 开发工具不直接参与网站的创建，而用于测试网站或网页应用的用户界面。

Web 开发工具一般内置于网页浏览器或者作为浏览器的附加组件使用。大多数市面上常見的网页浏览器，如Google Chrome、Firefox、Internet Explorer、Safari、Microsoft Edge和Opera[1]，都有内置的工具用于网站开发，而在其各自的插件中心可以下载到更多工具。

Web 开发工具便于开发人员調試各种浏览器网页处理技术，例如HTML、CSS、DOM、JavaScript。随着对浏览器的功能需求越来越高，[2] 流行的浏览器已经包含了更多面向开发者的特性。[3]

浏览器支持概览

一些知名的浏览器都支持 Web 开发工具，使得网页设计师与开发者可以查看其页面的构成。所有这些工具都内置于浏览器，不需要额外的模块或配置。

常用特性

使用Web开发工具的通常做法是，鼠标悬停在页面元素上方，然后在右键菜单中选择“检查元素”或其它相似选项。更常见的替代方式是使用快捷键 F12。[12]

HTML 和 DOM

Web 开发工具通常包含了 HTML 与 DOM 属性查看器。这与浏览器“查看源代码”功能的不同之处在于，HTML 与 DOM 属性查看器不仅允许你查看页面 DOM 属性当前的渲染结果，还允许你查看改动了属性值之后页面即时更新的渲染结果。[13]

除了选择与编辑之外，HTML 元素面板通常还会显示 DOM 对象的属性，例如 CSS 样式属性。[14]

扩展与插件

现代浏览器支持使用插件或扩展来添加或增强功能。许多常用的插件实现了 Web 开发工具没有的功能，例如禁用 JavaScript，禁用 CSS 等等。

参考文献
  1. . [2021-04-05]. （原始内容存档于2013-03-06）.
  2. . Bright Hub. [2018-09-06]. （原始内容存档于2020-06-19）.
  3. . devworks.thinkdigit.com. [2018-09-06]. （原始内容存档于2014-01-17）.
  4. . Mozilla Hacks – the Web developer blog. [2018-09-06]. （原始内容存档于2021-07-16） （美国英语）.
  5. . MDN Web Docs. [2018-09-06]. （原始内容存档于2021-06-25） （美国英语）.
  6. . Mozilla Developer Network. 13 August 2016 [15 March 2017]. （原始内容存档于2017-05-30）.
  7. . developer.chrome.com. [2018-09-06]. （原始内容存档于2018-09-11）.
  8. McCormick, Libby. . msdn.microsoft.com. [2018-09-06]. （原始内容存档于2014-12-24） （美国英语）.
  9. erikadoyle. . docs.microsoft.com. [2018-09-06]. （原始内容存档于2017-10-13） （美国英语）.
  10. . www.opera.com. [2018-09-06]. （原始内容存档于2011-08-22） （英语）.
  11. Inc., Apple. . developer.apple.com. [2018-09-06]. （原始内容存档于2014-09-09） （英语）.
  12. . [2021-07-27]. （原始内容存档于2013-04-03）.
  13. McCormick, Libby. . msdn.microsoft.com. [2018-09-06]. （原始内容存档于2017-11-07） （美国英语）.
  14. . Google Developers. [2018-09-06]. （原始内容存档于2014-03-27） （英语）.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.