流行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浏览器中内置的开发者工具中提供如下表所示的各种功能。

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

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

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

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

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

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

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