如何调试 XMLHttpRequest

作者:手气不错 发布时间:August 12, 2008 分类:奇技淫巧

在编写 XMLHttpRequest 请求时,需要掌握服务器端返回的内容。

针对 Firefox 浏览器,我们常用的 Firebug 就能非常好的完成这一任务。打开 Firebug 针对目标站点的网络监视选项,则在每次使用 XMLHttpRequest 时,控制台会增加条相应的信息(同时会标明是 GET 方法还是 POST 方法)。

http://files.gracecode.com/2008_08_11/1218449715.gif

点击该信息条目后,就会出现 Params、Headers 以及 Response 三个标签,分别对应的是 HTTP 参数、HTTP 头、以及 回应信息。其中,Response 信息就是服务器返回的信息(图示中为服务器返回的 JSON 格式的数据)。

http://files.gracecode.com/2008_08_13/1218628504.png

另外,Headers 标签中显示的是 HTTP 头信息(分别为请求头以及回应头),在这里可以找到额外有用的信息,比如服务器信息、缓存信息、浏览器发送的 Cookie 头,以及 Content-type 属性(内容属性,可能会包含 charset 参数,指明字符编码)。

http://files.gracecode.com/2008_08_13/1218624529.png

同时,在控制台信息比较多时,会显得比较杂乱。Firebug 还专门提供的网络监控面板,根据上图所示有个 XHR 标签,它主要的功能就是提供异步调用监测。

针对 Explorer 等浏览器,监视 XMLHttpRequest 需要第三方工具的支持。在这里推荐的是 Fiddler,这一强大的网络监视工具。

在安装好 Fidder 以后,先打开 Exploer 浏览器,到需要监视 Exploer 浏览器的网络使用况时,打开 Fidder(通常在 Exploer 工具栏上有相应的启动按钮),就可以看到如下的界面

http://files.gracecode.com/2008_08_13/1218628924.png

选择某个具体的项目,查看其相应的内容。比如选取 Raw 按钮,则可以看到原始的 HTTP 相应记录

http://files.gracecode.com/2008_08_13/1218628608.png

这样,使用 Fidder 就可以获取某个针对特定程序的 HTTP 记录。

还有板凳

  1. 大猫 August 17th, 2008 at 11:09 pm #1
    大猫

    嘿嘿,钟情firebug

    ie developer toolbar不能查css的样式来源很麻烦...都不知道被什么给影响了

Yahoo 统计