本网站只能被运行在支持JavaScript脚本的环境中

各种Web浏览器中的开发工具

本节概述

为了确认各Web浏览器中对于各种API的支持及显示方面的区别,在各种主流浏览器的最新版中均内置Web开发工具。在老版本的Web浏览器中,这些开发工具被以插件或扩展等形式进行提供。本节介绍各Web浏览器中内置的开发工具。

各种Web浏览器中内置的开发工具

目前,Web网站或Web应用程序中可以使用的技术每一年都在不断地推陈出新。对于各种开发工具的熟练使用成为Web开发者必须掌握的一种手段。在目前最新版的各种主流浏览器中,均内置了一些便于开发者进行Web开发的开发工具。在这些开发工具中,提供如下所示的一些功能(在不同的浏览器中提供的功能也将有所不同)。

DOM树的确认及操作

在开发工具中将显示构成Web页面的DOM树。开发者可以对DOM树中的元素及属性值进行操作,可以在开发工具中修改元素样式。这些操作将会被即时反映在浏览器中。

对本地缓存数据的确认及操作

可以在开发工具中对各种本地缓存(IndexedDB、Cookie、应用程序缓存)中的数据进行确认及删除。

确认网络请求

可以在开发工具中对客户端请求及服务器端响应进行查看。可以确认客户端请求的种类及服务器端响应时间,可以查看客户端请求头及服务器端响应头中的各字段值,可以查看客户端请求数据即服务器端响应数据。

调试JavaScript脚本代码

可以在开发工具中通过对JavaScript脚本代码添加断点的方式来查看任一时刻的变量值及变量作用范围,可以执行脚本代码的单步调试。

控制台

可以在开发工具中提供的控制台中查看与Web页面相关的警告或错误信息以及JavaScript脚本代码中输出的日志信息。

由于各Web浏览器中内置的开发工具中所提供的功能各不相同,接下来针对各种浏览器介绍其开发工具中所提供的功能。

Internet Explorer 11开发者工具中所提供的功能

在Windows 8.1中,内置Internet Explorer 11浏览器。目前微软已公布Windows 7用Internet Explorer 11浏览器。

在Internet Explorer 11中,可以通过按下F12键打开开发者工具。

在Internet Explorer浏览器中内置的开发者工具中提供如下表所示的各种功能。

功能 概要
DOM资源管理器
  • DOM树的显示与实时编辑
  • CSS样式的显示与实时编辑
  • 盒模型的可视化编辑
  • 各种属性值的确认
  • 各种事件监听器的确认
控制台
  • 各种警告与错误信息的显示
  • JavaScript脚本代码中输出日志的显示
调试器
  • JavaScript脚本代码或脚本文件的显示
  • JavaScript脚本代码中断点的设置及JavaScript脚本代码的单步运行
  • 变量值与对象内容的观察
  • 异常的捕捉
网络 各种请求与响应的操作信息(HTTP请求方法、Cookie内容、客户端请求头及请求内容,服务器端响应头及响应内容、WebSocket端口发送数据等等)
UI响应
  • 针对各事件的性能分析报告
  • 针对各渲染种类的性能分析报告
探查器 在JavaScript脚本代码中定义的各函数及各种处理的耗费时间的分析报告
内存 对于内存堆(heap)的监视与记录
仿真
  • 对于viewport的仿真
  • 浏览器配置文件的修改
  • 画面尺寸,显示方向的修改
  • 地理位置信息的修改

在Internet Explorer浏览器中,自版本8开始就支持通过按下F12键打开开发者工具。在最新版的Internet Explorer 11浏览器中,添加了“UI响应”、“内存”及“仿真”功能。

Google Chrome浏览器中的开发者工具中所提供的功能

在Google Chrome浏览器中,通过点击“工具”菜单中的“开发者工具”子菜单或按下Ctrl+Shift+I快捷键(在Windows操作系统中)或按下Cmd+Option+I快捷键(在Mac OS X操作系统中)打开开发者工具。

在Google Chrome浏览器中内置的开发者工具中提供如下表所示的各种功能。

功能 概要
Elements
  • DOM树的显示与实时编辑
  • CSS样式的显示与实时编辑
  • 盒模型的可视化编辑
  • 各种属性值的确认
  • 各种事件监听器的确认
Resources 对本地缓存(IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage)中的数据进行确认及编辑。
Network/td> 各种请求与响应的操作信息(HTTP请求方法、Cookie内容、客户端请求头及请求内容,服务器端响应头及响应内容、WebSocket端口发送数据等等)
Sources
  • JavaScript脚本代码或脚本文件的显示
  • JavaScript脚本代码中断点的设置及JavaScript脚本代码的单步运行
  • 变量值与对象内容的观察
  • 异常的捕捉
Timeline
  • 针对各事件的性能分析报告
  • 针对各渲染种类的性能分析报告
  • 对于内存堆(heap)的监视与记录
Profiles 在JavaScript脚本代码中定义的各函数及各种处理的耗费时间的分析报告
Audit
  • 对网络相关改善方案的调查及提议
  • 对Web页面相关改善方案的调查及提议
Console
  • 各种警告与错误信息的显示
  • JavaScript脚本代码中输出日志的显示

Firefox浏览器中的开发者工具中所提供的功能

在Firefox浏览器中,可以通过点击“工具”菜单中的“Web开发者”子菜单下的各项子菜单或按下Ctrl+Shift+I快捷键(在Windows操作系统中)或按下Cmd+Option+I快捷键(在Mac OS X操作系统中)打开开发者工具。

在Firefox浏览器中内置的开发者工具中提供如下表所示的各种功能。

功能 概要
控制台
  • 各种警告与错误信息的显示
  • JavaScript脚本代码中输出日志的显示
查看器
  • DOM树的显示与实时编辑
  • CSS样式的显示与实时编辑
  • 盒模型的可视化编辑
  • 各种属性值的确认
  • 各种事件监听器的确认
调试器
  • JavaScript脚本代码或脚本文件的显示
  • JavaScript脚本代码中断点的设置及JavaScript脚本代码的单步运行
  • 变量值与对象内容的观察
  • 异常的捕捉
样式编辑器
  • CSS样式代码的显示与实时编辑
  • 启用或取消某项CSS样式属性
分析器 在JavaScript脚本代码中定义的各函数及各种处理的耗费时间的分析报告
网络 各种请求与响应的操作信息(HTTP请求方法、Cookie内容、客户端请求头及请求内容,服务器端响应头及响应内容、WebSocket端口发送数据等等)
3D视图 以3D形式显示DOM树的结构。
自适应设计模式 对自适应网站的设计结果进行确认。
开发者工具栏 显示命令行界面。可以在其中输入启动控制台、样式编辑器等功能的快捷键。