Firebug 和 Chrome 自带的开发人员工具相比起来有哪些优缺点

chrome的开发者工具的众多功能中，最炫的要数network这一项了，下面通过一个实例，来说明它有多好用:

a)打开浏览器，在百度图片输入关键字【昆虫】，如下图

 

因为百度图片具有懒加载的特性，当页面向下滚动时，会从服务器加载新的图片资源。而这一过程，通常是用Ajax实现的。因此我们推测，图片可以通过发送ajax请求（本质上就是http请求）来得到

 

b)在浏览器界面，鼠标右键选择【审查】，打开chrome开发者工具

 

c) 选择【network】标签页，分析网络请求

d)重新刷新页面，并向下滚动页面，触发懒加载。涉及到的网络请求如下图所示，我们重点关注xhr请求，因为有很大可能，就是请求图片信息的ajax请求

e) 我们注意到第一个xhr请求的地址，是logininfo，所以不太可能是请求图片。所以我们将焦点放到第二和第三个xhr请求上。点击第二个xhr请求，具体信息如下所示

 

从上图信息可以发现，这个xhr请求中有一些关于搜索相关的参数，【queryWord=%E6%98%86%E8%99%AB】通过将信息进行URL解码，得出的结果为【queryWord=昆虫】，证明这个就是我们所要的，取得图片的xhr请求。

解码结果如图

 

 

复制整个xhr请求的url地址，粘贴到浏览器的地址栏中，得到了该请求的响应数据。数据片段如下图

 

我们注意到，数据中有一个data数组，并且每个元素中，都有一个objURL的属性，其值为：

”ippr_z2C$qAzdH3FAzdH3Frtv_z&e3Bcbrtv_z&e3Bv54AzdH3FcbrtvAzdH3F8cAzdH3Fn9AzdH3FbcAzdH3FddbcbPICRhY_8ad9_z&e3B3r2”

可以推测出，其值为加密后的url，具体加密后和加密前对应关系如下所示：

 

当然，上面的结果，也是通过chrome的源代码查看，得到的。

 

看，在chrome 开发者工具的窥视下，我们的页面，仿佛脱去了外衣，没有一丝神秘。

来源：千锋HTML5