目录
- 1 Web开发工具
- 2 Web开发人员工具支持
- 3 最常用的功能
- ▪ HTML和DOM
- ▪ 网页资产，资源和网络信息
- ▪ 分析和审核
- ▪ JavaScript调试
Web开发工具
Web开发工具（通常称为devtools）允许Web开发人员测试和调试其代码。它们与网站构建者和集成开发环境（IDE）的不同之处在于它们不协助直接创建网页，而是它们是用于测试网站或Web应用程序的用户界面的工具。
Web开发工具是作为浏览器插件或Web浏览器中的内置功能提供的。最流行的网络浏览器，如谷歌浏览器，火狐，互联网浏览器，Safari浏览器和歌剧，有内置的工具，帮助Web开发人员和许多额外的附加组件可以在各自的插件下载中心找到。
Web开发工具允许开发人员使用各种Web技术，包括HTML、CSS、DOM、JavaScript以及由Web浏览器处理的其他组件。由于Web浏览器对更多功能的需求不断增长，流行的Web浏览器包含了更多面向开发人员的功能。
Web开发人员工具支持
几种著名的Web浏览器都支持Web开发人员工具，使Web设计人员和开发人员可以查看其页面的组成。这些都是浏览器内置的所有工具，不需要其他模块或配置。
- Firefox – F12 Web控制台/浏览器控制台（自Firefox 4起）。Web控制台适用于单个内容选项卡；浏览器控制台适用于整个浏览器。还存在许多插件，包括Firebug。
- Google Chrome – Chrome开发人员工具（DevTools）
- Internet Explorer和Microsoft Edge – F12 Web开发人员工具（从版本8开始）
- 歌剧 – 歌剧蜻蜓
- Safari – Safari Web开发工具（从版本3开始）
最常用的功能
通常，将鼠标悬停在网页上的某个项目上，然后从上下文菜单中选择“检查元素”或类似选项，即可访问浏览器中的内置Web开发人员工具。或者，F12键往往是另一个常见的快捷键。
HTML和DOM
HTML和DOM查看器和编辑器通常包含在内置的Web开发工具中。HTML和DOM查看器与Web浏览器中的视图源功能之间的区别在于，除了允许您更改HTML和DOM并查看HTML和DOM查看器之外，HTML和DOM查看器还允许您查看其呈现时的DOM。进行更改后，更改将反映在页面中。
除了选择和编辑外，HTML元素面板通常还将显示DOM对象的属性，例如显示尺寸和CSS属性。
网页资产，资源和网络信息
网页通常会以图像、脚本、字体和其他外部文件的形式加载并需要其他内容。Web开发工具还允许开发人员检查以树状结构列表形式在网页上加载并可用的资源。
Web开发工具还允许开发人员查看有关网络使用情况的信息，例如查看加载时间和带宽使用情况以及正在发送和接收的HTTP标头。
分析和审核
通过分析，开发人员可以捕获有关网页或Web应用程序性能的信息。利用此信息，开发人员可以提高其脚本的性能。审核功能可以在分析页面之后为开发人员提供建议，以进行优化以减少页面加载时间并提高响应速度。Web开发工具通常还提供时间轴功能，以提供呈现页面所需的时间，内存使用情况以及发生的事件类型的记录。
这些功能使开发人员可以优化其网页或Web应用程序。
JavaScript调试
JavaScript通常在网络浏览器中使用。Web开发工具通常包括一个面板来调试脚本，该面板允许开发人员在调试JavaScript时添加监视表达式，断点，查看调用堆栈，以及暂停、跳过、进入和退出功能。
通常包含一个JavaScript控制台。控制台允许开发人员键入JavaScript命令和调用函数，或查看在脚本执行期间可能遇到的错误。
