AJAX调试技术 IE篇

     AJAX技术在WEB开发中是一种最常用的开发技术，因为具有的一些优秀的特点，成为广大程序员优先使用的技术之一。AJAX可以在局部刷新的情况下从服务端抓取数据，给用户良好的体验，而传统的页面刷新则采用重定向或者是转发的方式，需要整页面的刷新，在刷新期间会出现一个空白页。AJAX技术从诞生到现在已经变的相当稳定，同时也出现了很多开源框架，例如大名鼎鼎的jQuery，Ext JS等框架，这些框架的出现不仅可以很好的解决局部刷新的问题，还有诸多好处，例如：浏览器特征屏蔽，使用这些框架不用考虑浏览器兼容性的问题；快速开发功能界面，Ext JS提供了丰富的用户控件，使用这些控件，大家可以快速的开发出所需的功能界面。

AJAX给程序员带来诸多好处的同时，也给软件的开发调试带来了很多困难，软件调试是软件开发过程中的一把牛刀，用好这把牛刀，大家可以在开发过程中游刃有余的解决问题。本文主要讲解如何利用浏览器的调试器来调试AJAX程序。

 

1   使用IE的调试器调试AJAX程序

     在IE9以上的版本里，已经内置了调试工具，IE9以下的版本，需要自行安装，大家可以在百度上搜索IE调试工具，自行下载，本文不在阐述。

浏览器调试工具可以为我们做很多事情，例如查看HTML代码、查看资源的网络状态、控制台、脚本调试等功能，下面我们依次讲解一下这些功能。按F12键，可以打开IE调试工具。如下图：

 

 

1.1         HTML调试

    HTML选项卡可以查看HTML元素，任何显示在界面中的HTML元素和隐藏元素都可以在这里看，给调试HTML代码带来极大的方便，使用“单击选择元素”的小箭头可以快速选和定位元素。

 

 

     下面我们用小箭头来定位“消费项目管理”菜单，结果如下：

 

    

       在右侧的小窗口中可以修改样式，并且可以立即在浏览器中生效，用这种办法调试样式，可以不用更改代码，待样式调好后，再更改对应的代码，省去了频繁的修改代码和发布代码的麻烦。

 

1.2         网络资源调试

     网络资源调试器是AJAX调试中非常重要的调试步骤，用好了网络资源调试器，可以快速定位服务端的问题，例如服务器500异常，图片无法下载（404），服务端超时，性能测试等等问题。网络调试需要熟悉几种常见的HTTP状态，下面给出常见的HTTP状态对照表：

 

200

请求已成功，请求所希望的响应头或数据体将随此响应返回

304

文档未改变

404

资源未找到

500

服务器异常

 

下图是网络调试窗口：

 

    

         AJAX使用的数据格式有两种，一种是XML，一种是JSON，由于JSON是键值对组成的数组，比XML的体积要小很多，传输速度更快，所以JSON数组在AJAX中的应用更为广泛，我们可以使用网络调试工具查看JSON数组返回是正确，以http://localhost:8080/MCS/queryMenu这个URL为例，单击这个URL，可以展开该URL的详细信息，包括请求标头、请求正文、响应正文、Cookie、发起程序、计时信息，将选择卡切换到响应正文一栏，可以看到响应的JSON数组，这个JSON数组则是AJAX程序的数据源。如下图：

 

 

1.3         脚本调试

 

     AJAX的核心是Java Script，在编写脚本的过程中，通常会遇到各种各样的问题，各种服务端语言例如Java、C#、C++等等语言都有自己的调试器，可以进行逐过程和逐语句的调试，为程序开发带来了很大的方便，很多莫名其妙的问题，看一下堆栈瞬间就明白了，既然调试器在软件开发中是如此的重要，那么Java Script到底有没有调试器呢？当然有啦，不过IE推出调试器比Firefox晚，IE6版本的调试器是很难用的，但后续的IE版本都有增强，到了IE9，调试器功能也可以和FireBug有的一比了，我想大概是因为Firefox是开放技术体系的原因，因为FireBug本身也是有网友编写的开源软件，而IE则是一直不开放源码的，所以IE调试器一般都是由微软官方推出，也许是微软人力资源有限的原因，所以推出的调试器比市场其他浏览器要晚。由于Windows操作系统在中国是主流操作系统，所在大家在开发WEB程序时也是以IE作为主要浏览器，所以，WEB程序在IE浏览器上的兼容性显得尤为重要。IE的脚本调试器和其他语言一样，首先需要设置断点。将调试器切换到脚本选项卡，并在你需要调试的脚本中设置一个断点，双击代码对应的行即可，这里，我们对第32行代码设置断点，然后启动调试，单击某一个菜单后，程序进入调试状态，并且以黄色背景高显示，如下图：

 

 

     

      大家可能会问了，如果我的代码量很庞大，找起来很费劲怎么办？我们可以在代码里加上debugger关键字，debugger可以在代码中打上一个断点，如果需要打多个断点，用多个debugger即可，我们来看一下，用debugger打断点和在调试器中直接打断点是一样的效果。如下图：

 

 

1.4   控制台

      控制台的作用主要用来输出错误信息，任何的脚本程序错误都会在控制台显示出来，故控制台是调试脚本程序重要的工具之一，我们也可以在控制台输出自己的信息，我想大部份程序员都喜欢用alert输出调试信息，其实这种办法也有很不方便的地方，如果程序员在调试完程序后忘记删除alert语句，而把代码部署到了生产环境，会影响客户体验。所以最好的办法是直接在控制台输出，我们在脚本中加入下列代码，就可以在控制台中输入自定义的调试信息：

console.info("这是一个调试信息");

 

控制台截图：