开发者工具

开发者工具（通常称作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]。