js调试学习总结

五个你必须知道的javascript和web 调试技术

http://blog.jobbole.com/51872/


在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。

Weinre移动调试
DOM 断点
debugger断点
native方法hook
远程映射本地调试
Weinre

在移动上面开发调试是很复杂的,所以就有了weinre。安装weinre可以实现pc来调试手机页面,所以对

于移动开发调试是很重要的哦~

weinre-demohttp://people.apache.org/~pmuellr/weinre/docs/latest/images/weinre-demo.jpg

安装weinre

weinre可以通过npm来安装:

JavaScript

npm install -g weinre
1
npm install -g weinre

安装完之后,可执行下面的命令来启动:

JavaScript

weinre --httpPort 8080 --boundHost -all-
1
weinre --httpPort 8080 --boundHost -all-

这样访问自己的127.0.0.1:8080按照提示在需要调试页面中插入一段js,然后就可以调试了。操作界面

类似Chrome的 DevTools,具体操作可以看下

http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html教程

原理

通过在需要调试的页面中引入一段weinre的js,实现pc和手机的socket通信,从而实现实时调试。

Tips

如果你嫌每次都要在调试的页面引入js麻烦,可以做个书签或者chrome插件
如果嫌安装麻烦,可以使用phonegap的weinre:http://debug.phonegap.com/
DOM断点

DOM断点是一个Firebug和chrome DevTools提供的功能,当js需要操作打了断点的DOM时,会自动暂停,

类似debugger调试。

使用DOM断点

选择你要打断点的DOM节点
右键选择Break on..
选择断点类型
120131122125746

Tips

Firebug中,DOM断点可以在Script> Breakpoints里面看到
chrome DevTools中,需要在Elements面板的DOM Breakpoints中看到
javascript的debugger语句

需要调试js的时候,我们可以给需要调试的地方通过debugger打断点,代码执行到断点就会暂定,这时

候通过单步调试等方式就可以调试js代码

使用javascript的断点

在需要打断点的地方添加debugger:

JavaScript

if (waldo) {
debugger;
}
1
2
3
if (waldo) {
debugger;
}


这时候打开console面板,就可以调试了


Tips


如果你不知道怎么调试,那么尽快看下:Chrome DevTools中断点部分的教程


原生代码的hook调试


因为浏览器自己会内置一些类似window对象这些原生的js方法,当你知道原生代码的确有问题,但是你


又不能跟踪调试的时候,你就可以用这个方法了。


举个例子


例如我们注意到了一个DOM的属性值发生了变化,但是我们不知道是哪里的代码导致的变化,所以我们可


以给DOM元素的setAttribute打个断点,代码如下:


JavaScript


var oldFn = Element.prototype.setAttribute;


Element.prototype.setAttribute = function (attr, value) {
    if (value === "the_droids_you_are_looking_for") {
        debugger;
    }
    oldFn.call(this, attr, value);
}


var oldFn = Element.prototype.setAttribute;
 
Element.prototype.setAttribute = function (attr, value) {
    if (value === "the_droids_you_are_looking_for") {
        debugger;
    }
    oldFn.call(this, attr, value);
}

这样,当元素的属性发生了变化的时候,就会执行到断点,你就可以在断点的栈中找出调用的地方来~

Tips

这种方法不保证在所有浏览器中有效,比如ios的safari 隐私模式下,我们就不可以修改localStorage

方法

远程映射本地调试

当线上某个js/css出现问题,我们可以用代理的方式,将远程的文件代理到本地来实现远程映射调试。

其实除了这个功能,还可以作为抓包工具,这在移动端是很重要的。推荐Mac用charles Proxy

(http://www.charlesproxy.com/), windows用户使用fiddler(http://fiddler2.com/)

这个就不多说了,直接上国内的几篇文章:

http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html
http://www.cnblogs.com/TankXiao/p/3063871.html
========

前端开发必备工具-网页调试工具

http://support.zhongsou.net/news/8317219.html
在前端开发中我们经常会要调试页面,主要html、css调试和js调试,这里整理一些工具:

一、firefox网页调试插件

1.firefox插件Firebug

主要用于html、css的调试和js调试;推荐指数:


从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码;要编

写精致的CSS样式表展示每个页面模块;要调试javascript给页面增加一些更活泼的要素;要使用Ajax给

用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面,才能交出一份同样优秀的作业。为帮

助广大正处于Web2.0洪流中的开发人员,在这里为大家介绍一款轻巧灵活的辅助开发工具。(转载请注明

出处:WEB前端开发 http://www.css88.com/)
介绍下载请参见: http://www.css88.com/archives/130

2.firefox插件Web Developer 1.1.6(最新版本,中文版)

主要用于html、css、js的查看和编辑;推荐指数:
Firefox上开发和调试web站点的不二之选。Web developer toolbar包含了一系列工具,从cookie管理到

CSS调试,从导航线到屏幕标尺,功能简直是多得说不完。
仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口,就能

一窥它的强大。推荐网页开发者和网页设计者使用,能够帮助你方便的对页面进行调整和完善;

介绍下载请参见:http://www.css88.com/archives/417

3.firefox插件JavaScript Debugger Venkman:

主要用于JavaScript调试;推荐指数:
一个基于Mozilla的浏览器的JavaScript调试环境,是Mozilla浏览器的一个扩展。Venkman基于Mozilla 

JavaScript调试API(js/jsd),js/jsd API 构成了 Netscape JavaScript Debugger 1.1的基础,

Netscape浏览器4.x系统都提供了这个调试工具。Venkman是目前比较流行的JavaScript调试工具。强烈

推荐这个刚下载了一个Mozilla免费调试器 JavaScript Debugger。这个调试器的前身为Netscape的

JavaScript调试器,它是Mozilla的一个附加产品。Venkman JavaScript调试器既是一个图形,也是一个

控制台调试器。下载并安装Venkman JavaScript调试器后,就可以通过“工具|Web开发|JavaScript调试

器”菜单启动它。这个附加产品允许你查看和调试位于源文件或网页中的JavaScript.(转载请注明出处

:http://www.css88.com)
Venkman相关下载:https://addons.mozilla.org/zh-CN/firefox/addon/216

 
二、ie网页调试插件

 
1.SuperPreview微软的网页开发调试利器

主要用于html、css的调试和各个浏览器(目前只能针对IE6-IE8)的页面呈现测试;推荐指数:

SuperPreview 是微软将推出的 Expression Web 3 的一部分,主要用于页面的调试,目前的 

Expression Web SuperPreview 允许用户对比他们的站点在 IE 6 与 IE 7, IE 8 中的外观,而在将来

的完整版中,还将支持 Firefox, Safari, Google Chrome(可能)以及更多浏览器;
介绍下载请参见:http://www.css88.com/archives/760
 
2.Internet Explorer Collection让你同时拥有IE1-IE8
主要用于Internet Explorer 浏览器(IE1-IE8)各个版本的页面呈现测试;推荐指数:
Internet Explorer Collection可以使你的计算机同时安装IE1-IE8,不过这个工具对vista系统支持不

是很好,最近还有一个发现,Internet Explorer Collection和IE8正式版似乎有冲突,IE8正式版的下

拉框会不能使用,提示“阻止了什么弹出窗口…”,尝试了几百次无法解决,最后我卸载了Internet 

Explorer Collection,这个问题就再也没出现过。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/687

3.IE Developer Toolbar及IE8 开发人员工具

主要用于html、css的调试和js调试;推荐指数:

虽然这玩意改了时髦的名字,但是却也不是什么新玩意,它的前身是“IEdevtoolbar”。但是,以前只

是IE的一个插件而已。而在IE8中,浏览器已经自动集成了这玩意,不仅改了个有点土鳖的名字,而且功

能也加强了很多。开发人员工具在IE8的工具菜单下,或者直接点击F12快捷键也可以呼叫出来。


微软的英特网探索者开发工具条是IE上最好的DOM检查和CSS调试工具。由于IE具有高市场占有率而又在

整个渲染模型上充满缺陷(比如臭名昭著的hasLayout边距重叠BUG),调试IE是web开发必不可少的步骤


——没有这个工具条,IE的调试将会成为一场噩梦。虽然IE Developer Toolbar要比Firebug稍微弱智一


点,不过他至少能帮你驯服IE这头怪兽。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/1005和http://www.css88.com/archives/1008


4.IE下的调试工具IE WebDeveloper

主要用于html、css的调试和js调试;推荐指数:


IE WebDeveloper可以让你检查和编辑你的HTML DOM, 显示错误信息, 日志信息, 显示网站源代码, 监视

DHTML事件和HTTP流量. 如果你是一个开发人员或设计人员, 但平常又喜欢使用IE, 那IE  webdeveloper

是个不错的选择.它的功能可以和火狐下的Firebug相媲美,甚至有些功能还强于Firebug。
IE WebDeveloper允许直接地在浏览器窗口中浏览、传输和更新HTML DOM。该软件可以实时分析网页并且

显示为一种允许你察看表格风格、Javascript脚本,表格以及其它网页元素的树形风格。该软件还可以

在浏览器中交互式地突出显示被选择的网页元素,因此你可以在实际网页中定位其代码。 查看style元

素,定位div等等。且支持一键w3c检查(包括HTML/XHTML/CSS/Javascript tutorial等)。虽然用起来

不如Firebug那么得心应手,但是毕竟解决了我们在ie上调试工具不足的问题。(转载请注明出处:

http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/967


 
5.IETester-同时拥有IE6、IE7、IE8(Vista兼容)


主要用于Internet Explorer 浏览器各个版本的页面呈现测试;推荐指数:




虽然以前我写过IE6、IE7、IE8共存的解决方案,但是看到IETester这个软件以后那些都已经没有意义了


(那些办法副作用比较大,而且实现起来有些难度)。使用IETester能够较好的解决,测试网页兼容性


的多IE版本的需求。暂时已经支持IE5.5——IE8beta1,我想这已经足够了。还在苦苦找寻IE6和IE7共存


或者IE7和IE8共存的朋友,可以试试这个软件。当然这个软件也不是万能的,在最后,官方非常厚道的


给出了暂时存在的重要bug列表。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/345和http://www.css88.com/archives/564
 

6.前端调试利器DebugBar

主要用于html、css的调试和js调试;推荐指数:

前端调试工具有很多,比如FireFox firebug, FireFox Web Developer, DOM Inspector,遨游的

PageView,IE WebDeveloper V2,还有IE8自带的开发工具 等等,这里我再推荐一个DebugBar;
大家肯定都知道ieTester(点击查看ieTester相关信息),大家都用ieTester来测试各个IE版本的页面兼容

性,其实新版的ieTester(点击下载目前最新版的ieTester v0.3.2 )还有一个很强大的页面调试插件:

DebugBar。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/785


7.用vs2008调试Javacscript
主要用于js调试;推荐指数:


面对一大段的JavaScript脚本,以前总是会很头疼,找不到调试这些代码的方法。如果出现什么错误或

异常,总是要从头分析,然后插入很多Alert(),调试起来很麻烦。
Visual Studio 2008中JavaScript所具有的另外一个特性,是它提供了更加强大的JavaScript调试功能

,这使得JavaScript的使用及构建AJAX应用都变得容易很多。同样,这项功能在免费的Visual Web 

Developer Express版本中和Visual Studio中都具有。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/982

三、其他调试工具

1.用Aptana调试JavaScript教程


主要用于js的调试和各个浏览器;推荐指数:


1.       你必须安装firefox浏览器;
2.       到http://support.aptana.com/asap/browse/STU-1769 下载并安装aptanadebugger 及 


firebug;这两个都是firefox插件;这样我们就可以调试脚本了。
介绍下载请参见:http://www.css88.com/archives/685
2.Opera Developer Tools
Opera下的DOM,CSS查看工具,类似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/
3.webkit
Safari下的开发调试工具
http://nightly.webkit.org/
========

Fiddler教程(Web调试工具)

http://www.cnblogs.com/anny-1980/p/4537922.html
http://kb.cnblogs.com/page/130367/

Fiddler的基本介绍

  Fiddler的官方网站:  www.fiddler2.com

      Fiddler的官方帮助:http://docs.telerik.com/fiddler/knowledgebase/quickexec

  Fiddler官方网站提供了大量的帮助文档和视频教程, 这是学习Fiddler的最好资料。

  Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允

许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统,并且

能使用.net语言进行扩展

  你对HTTP 协议越了解, 你就能越掌握Fiddler的使用方法。你越使用Fiddler,就越能帮助你了解

HTTP协议。

  Fiddler无论对开发人员或者测试人员来说,都是非常有用的工具。

  Fiddler的工作原理

  Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888。当Fiddler退

出的时候它会自动注销,这样就不会影响别的 程序。不过如果Fiddler非正常退出,这时候因为Fiddler

没有自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler。

  同类的其它工具

  同类的工具有: httpwatch, firebug, wireshark

  Fiddler 如何捕获Firefox的会话

  能支持HTTP代理的任意程序的数据包都能被Fiddler嗅探到,Fiddler的运行机制其实就是本机上监

听8888端口的HTTP代理。 Fiddler2启动的时候默认IE的代理设为了127.0.0.1:8888,而其他浏览器是需

要手动设置的,所以将Firefox的代理改为 127.0.0.1:8888就可以监听数据了。

  Firefox 上通过如下步骤设置代理

  点击: Tools -> Options,  在Options 对话框上点击Advanced tab - > network tab -> setting.

  Fiddler如何捕获HTTPS会话

  默认下,Fiddler不会捕获HTTPS会话,需要你设置下, 打开Fiddler  Tool->Fiddler Options-

>HTTPS tab

  选中checkbox, 弹出如下的对话框,点击"YES"

  点击"Yes" 后,就设置好了。

  Fiddler的基本界面

  看看Fiddler的基本界面

  Fiddler的HTTP统计视图

  通过陈列出所有的HTTP通信量,Fiddler可以很容易的向您展示哪些文件生成了您当前请求的页面。

使用Statistics页签,用户可以通过选择多个会话来得来这几个会话的总的信息统计,比如多个请求和

传输的字节数。

  选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间。从条形图表中还可以分

别出哪些请求耗时最多,从而对页面的访问进行访问速度优化

  QuickExec命令行的使用

  Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令。

  常见得命令有:

  help  打开官方的使用页面介绍,所有的命令都会列出来

  cls    清屏  (Ctrl+x 也可以清屏)

  select  选择会话的命令

  ?.png  用来选择png后缀的图片

  bpu  截获request

  Fiddler中设置断点修改Request

  Fiddler最强大的功能莫过于设置断点了,设置好断点后,你可以修改httpRequest的任何信息包括

host, cookie或者表单中的数据。设置断点有两种方法:

  第一种:打开Fiddler 点击Rules-> Automatic Breakpoint  ->Before Requests(这种方法会中断

所有的会话)

  如何消除命令呢?  点击Rules-> Automatic Breakpoint  ->Disabled

  第二种:  在命令行中输入命令:  bpu www.baidu.com   (这种方法只会中断www.baidu.com)

  如何消除命令呢?  在命令行中输入命令 bpu

  看个实例,模拟博客园的登录, 在IE中打开博客园的登录页面,输入错误的用户名和密码,用

Fiddler中断会话,修改成正确的用户名密码。这样就能成功登录:

  1. 用IE 打开博客园的登录界面  http://passport.cnblogs.com/login.aspx


  2. 打开Fiddler,  在命令行中输入bpu http://passport.cnblogs.com/login.aspx

  3. 输入错误的用户名和密码,点击登录

  4. Fiddler 能中断这次会话,选择被中断的会话,点击Inspectors tab下的WebForms tab 修改用

户名密码,然后点击Run to Completion 如下图所示。

  5. 结果是正确地登录了博客园

  Fiddler中设置断点修改Response

  当然Fiddler中也能修改Response:

  第一种:打开Fiddler 点击Rules-> Automatic Breakpoint  ->After Response  (这种方法会中断

所有的会话)

  如何消除命令呢?  点击Rules-> Automatic Breakpoint  ->Disabled


  第二种:  在命令行中输入命令:  bpuafter www.baidu.com   (这种方法只会中断www.baidu.com)


  如何消除命令呢?  在命令行中输入命令 bpuafter,


  具体用法和上节差不多,就不多说了。


  Fiddler中创建AutoResponder规则


  Fiddler 的AutoResponder tab允许你从本地返回文件,而不用将http request 发送到服务器上。


  看个实例:


  1. 打开博客园首页,把博客园的logo图片保存到本地,并且对图片做些修改。

  2. 打开Fiddler 找到logo图片的会话, 
http://static.cnblogs.com/images/logo_2012_lantern_festival.gif,  把这个会话拖到
AutoResponer Tab下

  3. 选择Enable automatic reaponses 和Unmatched requests passthrough

  4. 在下面的Rule Editor 下面选择 Find a file... 选择本地保存的图片.  最后点击Save 保存下


  5.   再用IE博客园首页, 你会看到首页的图片用的是本地的。

  Fiddler中如何过滤会话

  每次使用Fiddler, 打开一个网站,都能在Fiddler中看到几十个会话,看得眼花缭乱。最好的办法

是过滤掉一些会话,比如过滤掉图片的会话。Fiddler中有过滤的功能, 在右边的Filters tab中,里面

有很多选项, 稍微研究下,就知道怎么用。


  Fiddler中会话比较功能


  选中2个会话,右键然后点击Compare,就可以用WinDiff来比较两个会话的不同了(当然需要你安装


WinDiff)


  Fiddler中提供的编码小工具


  点击Fiddler 工具栏上的TextWizard,  这个工具可以Encode和Decode string.


  Fiddler中查询会话


  用快捷键Ctrl+F打开Find Sessions的对话框,输入关键字查询你要的会话。 查询到的会话会用黄


色显示。


  Fiddler中保存会话


  有些时候我们需要把会话保存下来,以便发给别人或者以后去分析。  保存会话的步骤如下:

  选择你想保存的会话,然后点击File->Save->Selected Sessions

  Fiddler的script系统

  Fiddler最复杂的莫过于script系统了,官方的帮助文档: 


http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp。


  首先先安装SyntaxView插件,Inspectors tab->Get SyntaxView tab->Download and Install 


SyntaxView Now... 如下图


  安装成功后Fiddler 就会多了一个Fiddler Script tab,如下图:

  在里面我们就可以编写脚本了, 看个实例让所有cnblogs的会话都显示红色。

  把这段脚本放在OnBeforeRequest(oSession: Session) 方法下,并且点击"Save script"


if (oSession.HostnameIs("www.cnblogs.com")) {
  oSession["ui-color"] = "red";


}


  这样所有的cnblogs的会话都会显示红色。


  如何在VS调试网站的时候使用Fiddler


  我们在用visual stuido 开发ASP.NET网站的时候也需要用Fiddler来分析HTTP, 默认的时候


Fiddler是不能嗅探到localhost的网站。不过只要在localhost后面加个点号,Fiddler就能嗅探到。


  例如:原本ASP.NET的地址是 http://localhost:2391/Default.aspx,  加个点号后,变成 


http://localhost.:2391/Default.aspx 就可以了

HTTP Request header


  使用Fiddler 能很方便的查看Reques header, 点击Inspectors tab -> Request tab -> headers  


如下图所示.


  header 有很多,比较难以记忆,我们也按照Fiddler那样把header 进行分类,这样比较清晰也容易


记忆。


  Cache 头域


  If-Modified-Since


  作用: 把浏览器端缓存页面的最后修改时间发送到服务器去,服务器会把这个时间与服务器上实际


文件的最后修改时间进行对比。如果时间一致,那么返回304,客户端 就直接使用本地缓存文件。如果


时间不一致,就会返回200和新的文件内容。客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显


示在浏览器中。


  例如:If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT


  实例如下图


  If-None-Match


  作用: If-None-Match和ETag一起工作,工作原理是在HTTP Response中添加ETag信息。 当用户再次


请求该资源时,将在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服务器验证资源的ETag


没有改变(该资源没有更新),将返回一个304状态告诉客户端使用 本地缓存文件。否则将返回200状态


和新的资源和Etag.  使用这样的机制将提高网站的性能


  例如: If-None-Match: "03f2b33c0bfcc1:0"


  实例如下图


  Pragma


  作用: 防止页面被缓存, 在HTTP/1.1版本中,它和Cache-Control:no-cache作用一模一样


  Pargma只有一个用法, 例如: Pragma: no-cache


  注意: 在HTTP/1.0版本中,只实现了Pragema:no-cache, 没有实现Cache-Control


  Cache-Control


  作用: 这个是非常重要的规则。 这个用来指定Response-Request遵循的缓存机制。各个指令含义如





  Cache-Control:Public   可以被任何缓存所缓存()


  Cache-Control:Private     内容只缓存到私有缓存中


  Cache-Control:no-cache  所有内容都不会被缓存


  还有其他的一些用法, 我没搞懂其中的意思, 请大家参考其他的资料


  Client 头域


  Accept


  作用: 浏览器端可以接受的媒体类型,


  例如:  Accept: text/html  代表浏览器可以接受服务器回发的类型为 text/html  也就是我们常


说的html文档,


  如果服务器无法返回text/html类型的数据,服务器应该返回一个406错误(non acceptable)


  通配符 * 代表任意类型


  例如  Accept: */*  代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)


  Accept-Encoding:


  作用: 浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(


gzip,deflate),(注意:这不是只字符编码);


  例如: Accept-Encoding: gzip, deflate


  Accept-Language


  作用: 浏览器申明自己接收的语言。 


  语言跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等;


  例如: Accept-Language: en-us


  User-Agent


  作用:告诉HTTP服务器, 客户端使用的操作系统和浏览器的名称和版本.


  我们上网登陆论坛的时候,往往会看到一些欢迎信息,其中列出了你的操作系统的名称和版本,你


所使用的浏览器的名称和版本,这往往让很多人感到很 神奇,实际上,服务器应用程序就是从User-


Agent这个请求报头域中获取到这些信息User-Agent请求报头域允许客户端将它的操作系统、浏览 器和


其它属性告诉服务器。


  例如: User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; 


CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; 


.NET4.0E)


  Accept-Charset


  作用:浏览器申明自己接收的字符集,这就是本文前面介绍的各种字符集和字符编码,如gb2312,


utf-8(通常我们说Charset包括了相应的字符编码方案);


  例如:


  Cookie/Login 头域


  Cookie:


  作用: 最重要的header, 将cookie的值发送给HTTP 服务器


  Entity头域


  Content-Length


  作用:发送给HTTP服务器数据的长度。


  例如: Content-Length: 38


  Content-Type


  作用:


  例如:Content-Type: application/x-www-form-urlencoded


  Miscellaneous 头域


  Referer:


  作用: 提供了Request的上下文信息的服务器,告诉服务器我是从哪个链接过来的,比如从我主页


上链接到一个朋友那里,他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链


接访问他的网站。


  例如: Referer:http://translate.google.cn/?hl=zh-cn&tab=wT


  Transport 头域


  Connection


  例如: Connection: keep-alive   当一个网页打开完成后,客户端和服务器之间用于传输HTTP数


据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接


  例如:  Connection: close  代表一个Request完成后,客户端和服务器之间用于传输HTTP数据的


TCP连接会关闭, 当客户端再次发送Request,需要重新建立TCP连接。


  Host(发送请求时,该报头域是必需的)


  作用: 请求报头域主要用于指定被请求资源的Internet主机和端口号,它通常从HTTP URL中提取出


来的


  例如: 我们在浏览器中输入:http://www.guet.edu.cn/index.html


  浏览器发送的请求消息中,就会包含Host请求报头域,如下:


  Host:http://www.guet.edu.cn


  此处使用缺省端口号80,若指定了端口号,则变成:Host:指定端口号


HTTP Response header


  同样使用Fiddler 查看Response header, 点击Inspectors tab ->Response tab-> headers  如下


图所示


  我们也按照Fiddler那样把header 进行分类,这样比较清晰也容易记忆。


  Cache头域


  Date


  作用:  生成消息的具体时间和日期


  例如: Date: Sat, 11 Feb 2012 11:35:14 GMT 


  Expires


  作用: 浏览器会在指定过期时间内使用本地缓存


  例如: Expires: Tue, 08 Feb 2022 11:35:14 GMT


  Vary


  作用:


  例如: Vary: Accept-Encoding


  Cookie/Login 头域


  P3P


  作用: 用于跨域设置Cookie, 这样可以解决iframe跨域访问cookie的问题


  例如: P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI 


DSP COR


  Set-Cookie


  作用: 非常重要的header, 用于把cookie 发送到客户端浏览器, 每一个写入cookie都会生成一个


Set-Cookie.


  例如: Set-Cookie: sc=4c31523a; path=/; domain=.acookie.taobao.com


  Entity头域


  ETag


  作用:  和If-None-Match 配合使用。 (实例请看上节中If-None-Match的实例)


  例如: ETag: "03f2b33c0bfcc1:0"


  Last-Modified:


  作用: 用于指示资源的最后修改日期和时间。(实例请看上节的If-Modified-Since的实例)


  例如: Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT


  Content-Type


  作用:WEB服务器告诉浏览器自己响应的对象的类型和字符集,


  例如:


  Content-Type: text/html; charset=utf-8


  Content-Type:text/html;charset=GB2312


  Content-Type: image/jpeg


  Content-Length


  指明实体正文的长度,以字节方式存储的十进制数字来表示。在数据下行的过程中,Content-


Length的方式要预先在服务器中缓存所有数据,然后所有数据再一股脑儿地发给客户端。


  例如: Content-Length: 19847


  Content-Encoding


  WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象。


  例如:Content-Encoding:gzip


  Content-Language


  作用: WEB服务器告诉浏览器自己响应的对象的语言者


  例如: Content-Language:da


  Miscellaneous 头域


  Server:


  作用:指明HTTP服务器的软件信息


  例如:Server: Microsoft-IIS/7.5


  X-AspNet-Version:


  作用:如果网站是用ASP.NET开发的,这个header用来表示ASP.NET的版本


  例如: X-AspNet-Version: 4.0.30319


  X-Powered-By:


  作用:表示网站是用什么技术开发的


  例如: X-Powered-By: ASP.NET


  Transport头域


  Connection


  例如: Connection: keep-alive   当一个网页打开完成后,客户端和服务器之间用于传输HTTP数


据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接


  例如:  Connection: close  代表一个Request完成后,客户端和服务器之间用于传输HTTP数据的


TCP连接会关闭, 当客户端再次发送Request,需要重新建立TCP连接。


  Location头域


  Location


  作用: 用于重定向一个新的位置, 包含新的URL地址
========

JS 代码调试经验总结(菜鸟必读)

http://ztreeapi.iteye.com/blog/1559335


 
任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作。


一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出


编程者的水平高低以及分析问题的准确度。


在长期解答 zTree 相关问题时,也的确发现很多的问题其实不算什么问题,仅仅是编程者不会调试造成


的,通过自己日常工作观察,这里面有态度问题也有思考问题的方式方法,


本篇文章主要是帮助大家在调试代码时,如何建立解决问题的思路。所以并不会专门介绍不同浏览器的


具体调试方法。(在网上关于 chrome、firefox、ie 等浏览器的具体调试方法已经有很多了,这里就不


一一描述啦。)另外,俗话说的好——“js、html 和 css 是一家”,因此在讲述中也会稍带有html 和 


css 的内容。
 
一、 遇到错误怎么办?


1、 调整心态
 
2、 寻找特征


我们遇见的错误表象一般分为以下几种
 
直接报告 js 语法错误
 
js 报错,但报错地点不是出问题的根源
 
js 无报错,但功能无效
 
3、 怀疑一切
 
二、 如何让错误现出原形?
 
1、 化繁为简
临床表现:莫名其妙的报错,不方便调试,单纯看代码无法解释出错原因。
主要病因:js脚本冲突、Css冲突、DOM的ID冲突、DOM标签缺失等多种由于冲突产生的bug根源
排查方法:熟练使用 Delete / Backspace 键,对代码不断进行区域删除,直到症状消失,最后一次删


除的区域很可能就是导致错误的根源。进一步查找根源可以在目标区域使用更小单位的区域定义反复使


用此方法。
注意:
 
对于 js 代码建议分别以类库  功能  行 为单位进行删除测试
对于 HTML 代码建议按照页面结构先删除最内部的 tag,由内及外,这样可以迅速发现由于 tag 缺失造


成的错误,同时也能保证每次删除的都是整段的代码,避免由于删除产生新的错误。
对于 css 代码建议按照css文件  定义的class系列  行 为单位批量进行删除测试
 
忌:对于确认与相关功能有关的部分不要随便删除。
副作用:使用此方法也可以很好的确认错误原因是js造成的还是css造成的。
 
2、 顺藤摸瓜
临床表现:错误信息较准确,能够按照提示的错误逐层跟踪,使用“化繁为简”能够基本定位的错误类



主要病因:基本语法错误、逻辑错误、不严谨(最常见的有:数组下标越界,null空指针导致的对象找


不到,undefined未初始化,NaN数字计算错误等)
排查方法:利用浏览器的调试工具(F12是个很好的功能键):跟踪代码;利用console.log 输出监控对


象(IE无效);利用 alert监控(最无奈的方法,用于极端情况);把调试代码加载报错命令行的前面



注意:
 
对于无js 报错的情况,直接调试无效功能的代码即可。有时候会发现之所以功能无效的原因居然是没有


调用该代码!(是不是很可笑?我承认我犯过这种错误。)
逻辑错误往往不太容易想清楚,这时候可以适当结合“化繁为简”的思路进行调试。
当你使用的是类似于 jQuery 这种js库时,如果报错信息处于js库内,首先要更换为未压缩的js代码进


行调试,然后分析是自己的哪段代码会调用相关功能。
 
忌:钻牛角尖!当按照此方法仍无法找到错误根源时,说明这并不是一个准确的错误信息,肯定有其他


潜在的因素在产生错误。立刻更改切入点,不要在一个地方长时间浪费时间。(这种时候,可以参考下


一个方法:“反复对照”)
 
3、 反复对照
临床表现: 应用普通方法很难定位错误,前两种方法怎么用都还是找不到头绪。
主要病因: 逻辑复杂、功能互相绑定难以剥离、页面对象内容复杂、有的页面正常有的页面不正常、兼


容问题等
排查方法: 对付这种复杂的麻烦,排查方法也会很繁琐,但并不是什么特别高深的技术,只是需要多做


一些体力活儿而已。
 
方法一:检查可疑的代码,细化功能点,每次只修改一个地方,修改一次就测试一次,直到发现导致错


误的关键代码。
方法二:制作最简单的Demo 只实现需要的功能,当功能正常后,与出错的正式代码进行比较(比较中可


以适当使用方法一)
方法三:以正常功能(或出错)的代码为原型,修改一个地方就生成一个测试的备份,每个测试的案例


都只有一处与原始代码不同,编上号码,在特殊环境下逐一测试,检查导致错误的根源(我曾经用这个


方法解决了韩文系统下IE8加载公司内部flash 不能正常发声的bug)
 
注意:
 
使用此法一定要有耐心
此方法技术含量低,任何人都可以快速掌握,解决某些疑难杂症基本上可以说是药到病除!
 
4、 积累经验
临床表现:部分浏览器报错、事件响应异常、js操作DOM无效、PC 和 触屏系统功能不一致等
主要病因:各种兼容问题
排查方法:对于某些有明显特征的报错要熟记于胸,看到这些情况能立刻想到应该是哪些原因导致的。


(最明显的例子:Json对象多了一个逗号的情况,只有ie报错)
注意:
 
有个很基础的问题,但有很多初学者出错——没有搞清楚页面 html、css、js 的加载顺序,导致js 操


作失败。(去Google 或 Baidu 搜索:“html css js 加载顺序”)
日常工作要细心,勤观察。认真对待每一次查找错误的工作,对于部分非常特殊的情况可以记下来。
熟练利用 Google、Baidu 等搜索引擎,有时候自己第一次遇到的情况,别人早都知道如何解决了。
 
忌:粗心大意、不求甚解
 
5、 细节决定成败
以上四种查找错误的方法全部都依赖于一个核心——细节!细节往往比你的技术水平更重要。说一句夸


张点儿的话,能有多少那么高深的技术等着你去做?好好把自己手上的工作认真完成吧!但请记住了,


当你重视细节以后,你距离去做高深技术的机会应该也就不远了。
 
三、 如何修正错误?
老程序员们应该已经深有体会,改Bug 最头疼的还是找错,一旦找到错误后,真正解决问题可能真的是


只有几分钟。下面针对一些常见的错误原因与修改思路总结一下:
 
1、 基本语法、语言基础
逗号、分号、双引号、单引号 以及 各种括号 估计都曾导致过你的代码错误吧?这些东西记牢,必须知


道什么时候应该使用什么,不要为了简化代码而精简这些符号。
例如:if / for 等语句后面的 { } 最好还是带上吧。
补充,对于js中的Number 数字的范围希望大家有一定的了解,因为这个范围肯定和后台语言中的Long不


一样的。(已经有不止一个朋友跟我说 zTree 会自动修改节点的id,当我看到案例后,原来是数字溢出


了!)
 
2、 条件严谨
对 Array 或者操作对象属性时,尽可能让条件判断语句写的完整、全面一些。
例如:判断 a.abc 的时候,最好别忘了判断 a 是否存在;或者操作Array时先判断一下Array 是否存在


,要操作的下标是否越界等。
 
3、 注意兼容(css & js)
警惕部分浏览器不一致或者出错的情况,很多情况都是兼容造成的。如果自己经验不够,直接去Google 


或者 Baidu。慢慢的自己经常接触到的一些兼容问题就会牢记下来了。
补充,有时候要注意页头 W3C的定义,曾经有朋友问我 zTree 异常的问题,最终发现是 W3C只写了一半



 
4、 逻辑陷阱
条件过于复杂;循环、判断反复嵌套都是容易导致逻辑陷阱的因素。遇到这种情况,如果自己实在无法


解决那么请个身边的高手来吧,让他帮你讲解一下。我相信,除了那些有点儿自闭的人来说,别人都会


愿意帮助你解决问题的(前提是你自己别太遭人恨了,呵呵)
补充:多去看看有关 重构 的技术书籍!会让你提高很多的。
 
5、 异步加载
其实异步加载出现的问题往往属于逻辑陷阱,但我必须要提出来专门讲述,因为在这上面犯错的人太多


了!!!!这里专门详细讲述一遍处理方法:
 
对于异步加载出现了异常,请按照以下流程进行逐一排查:
1)页面是否有报错,是否执行到 ajax 部分的代码?(如果正常请看下一条)
 
2)用浏览器的调试工具监控网络,ajax 加载的url 地址是否正确?(如果正常请看下一条)
 
3)用浏览器的调试工具监控网络,传递给url 的参数是否正确?(如果正常请看下一条)
 
4)用浏览器的调试工具监控网络,从url 返回的数据是否正确?(如果正常请看下一条)
 
5)在 ajax 的success中编写调试代码,调试异步加载后的处理方法是否正确
如果以上几步都正常,那么我可以告诉你异步加载本身是一切正常的,还有错怎么办?继续往下看
 
当异步加载确定正常后,就需要考虑另一个重要问题,也就是我在上一篇文章《这些年我们爱犯的弱智


错误(菜鸟必看)》中专门讲述的易犯的错误——异步加载的疏忽
1)千万不要在执行了 ajax 之后立刻去执行应该在异步加载完成之后再运行的代码。因为你执行这段代


码的时候,ajax根本没有完成呢。(最明显的现象:运行时时好时坏,但如果我加入了alert 会发现每


次都正常了)
这种情况,请将你的代码转移到 ajax的 success 或 error 里面去执行
 
2)当你设置了某些特殊开关时,一定不要忘了在 ajax 的error 里面进行重置,否则很可能因为一次网


络异常,就会造成你的页面js 功能失效。这种错误常常是地雷级别的,很难被发现。
 
6、 神奇的setTimeout
对于移动设备 或者 某些特殊情况,可以适当考虑使用 setTimeout 来解决问题。
我遇到比较特例的情况:有两个js的事件因为不同的功能在同时对同一个DOM操作时会导致IE8崩溃,显


然这是IE的bug,但我无法去要求微软做什么…最终使用 setTimeout 让其中一个功能延迟100-200毫秒


再执行,轻松搞定!
 
7、 别在一棵树上吊死
做前端的人都很郁闷要适配n多的浏览器,往往会遇到一些自己无法解决的问题(因为是浏览器bug 造成


的),遇到这种情况怎么办?一般来说寻找一下有没有 hacker的方法,如果没有,那么就换一种思路,


看看是否可以有其他方案来实现类似的功能。如果各种努力都做了…还有人不满意的话,那么告诉他浏


览器的bug,让项目管理者来决定到底如何处理吧——这种情况死而无憾了!
========

这些年我们爱犯的弱智错误(菜鸟必看)

http://ztreeapi.iteye.com/blog/1423986
 


    No.1  大小写不一致
    把这个弱智错误名列榜首,可是当之无愧,从菜鸟到高手,能有几人逃得过?
    错误描述:一会儿用 id、pid;一会儿又是 Id、pId。当然要乱套了。
    避免办法:养成良好的命名习惯很重要。看着文档做功课时要仔细。


    No.2  输入错误
    其实这个错误和大小写不一致类似。
    错误描述:输入变量时左右手指出现了节奏时差,变量名中某两个字母站错了位置,本来应该输入 


function 结果一不小心输入了 fucntion,如果不仔细看怎么看怎么对。另外多个字母少个字母的情况


也时有发生。
    避免办法:敲代码时要尽量集中精神,避免三心二意。检查错误时可以把正常的代码和错误部分的


代码粘贴到一起,对比查看,往往很容易能够发现这种错误。(推荐多玩玩儿“找不同”,也会不同程


度的提升纠错能力)


Js代码  收藏代码
//两行放在一起对比,是不是一眼就能看出来错误的地方呢?  
var children = function() { var _this = this; var iCounter = 0;  iCounter++;}  
var children = funtcion() { var _this = this; var iCounter = 0;  icounter++;}  
   
    No.3  多余的逗号
    相信10个人中至少有8个人犯过这种错误。
    错误描述:主要是对于 JSON 对象中,最后一个对象后面仍保留一个逗号。这种情况下对于 


firefox、chrome 等浏览器来说运行起来一切正常,可是放到 ie 上就报错,再加上 ie 还很难调试,


所以对于菜鸟来说往往很难找到源头。
    举例: {"a":1, "b":2, "c":3,}
    出现这种错误最常见的情况就是在 Server 端利用循环语句批量生成 JSON 数据字符串的时候。
    避免办法:这个的确没有太好的办法彻底避免,只能是让你的脑子里多一根经,一旦批量制作 JSON 


格式的内容时,就要小心最后面是不是会多一个逗号。


    No.4  数组的长度
    错误描述:关于数组的使用时,总会时不时的出现一些下标越界 或者 null 方面的错误。
    举例:某个 function 中一段代码  a[0] = a[1]+1; 大部分时候正常,但偶尔会出现错误。
    避免办法:产生这个错误一般来说是没有养成使用数组时要首先对 数组对象进行检查的习惯,例如


首先判断 a!=null; 另外还要判断 a.length 是否满足你需要用到的 index 值。这个就是个习惯问题。


    No.5  诡异的计数器
    这是一个 zTree 中曾经犯下的弱智错误,但由于原先使用多棵树的用户并不多,所以很长时间都没


有暴露出来。
    错误描述:有一个全局变量用于计数,但有多个不同的地方都在使用这一个计数器,当其中某处忘


记了其他地方还在使用这个计数器时,可能会对其进行清零重置。。OMG,这样可就糟糕了吧,别的地方


因为计数器归零会容易导致某些值冲突。
    避免办法:对于全局变量的使用要规范,对于改变全局变量的地方越少越好,或者封装成固定的方


法,要清楚全局变量的作用,修改时一定要慎重。


    No.6  难以理解的等式
    写代码就少不了 if;你在使用 if 的时候是否总会出现莫名其妙的结果呢? 看看下面这段代码的


结果,比较一下 a/b 的等式结果吧:


Js代码  收藏代码
var a = 0;  
var b = "0";  
  
if (a) {console.log(1);}              // false  
if (!!a) {console.log(2);}           //  false  
if (b) {console.log(3);}             //  true  
if (!!b) {console.log(4);}           //  true  
if (a == false) {console.log(5);}    // true  
if (!!a == false) {console.log(6);} //  true  
if (b == false) {console.log(7);}    //  true  
if (!!b == true) {console.log(8);}  //  true  
  
 
    错误描述:对于 number 和 string 在 if 表达式中,如果值是  0 或 "0" 时总会让你措手不及。 


 
    避免办法:建议对于非 boolean 对象的在判定时采用 !! 进行标准的 boolean 转换,同时要记住 


js 中对于 0 这个特殊情况的判定,再结合你的需求编写正确的判定表达式。


    No.7  JSON 对象的理解
    有的初学者对于 server 端的对象能够争取理解,但是放到 js 中时往往开始变得糊涂了。
    错误描述:错误的认为只要 {}里面的内容相同,那么这两个对象就是一样的。
    举例:认为 var a = {"id":1}; var b = {"id":1} 那么 a == b (正确答案: a != b)
    避免办法:需要正确理解 JSON 对象的定义。 每次 {} 就相当于生成一个新的 JSON 对象。


    No.8  js 文件加载顺序
    你是不是出现过js 文件都加载了,可是还总报 undefined 的错误呢?
    错误描述:由于先加载了使用某个对象的代码,后加载了定义该对象的代码,导致报错。
    举例:
 
Js代码  收藏代码
// a.js 文件  
function a() {return "a";}  
  
// b.js 文件  
alert(a());  
  
 
    避免办法:牢记先要定义对象,然后才能使用对象,确保 js 文件的加载顺序。


    No.9  浏览器的兼容问题
    前两天看到一句话,大概意思是:“作为一个 前端 程序员来说,很少有人能够如此幸运——只兼


容一款浏览器”。
    错误描述:在某个浏览器下调整的好好的,怎么换个浏览器就不好使了??
    避免办法:如果让你完全牢记所有会出现兼容问题的代码,貌似不太现实。一般来说只能记住一些


常用的,或者是利用 jQuery 等架构减轻遇到这些问题的可能性。再有就是要提高警惕,一旦出现此类


情况,就要考虑一下是不是因为 js 的兼容问题造成的呢?(然后就去 google 一下,如果被墙了,那


么就去百度吧!呵呵)
    补充:在不少情况下,往往是 css 的兼容出现了错误,让你误以为是 js 的错误。


    No.10  异步加载的疏忽(一)
    对于一个菜鸟来说,对于异步加载的理解很关键,也是一个经常容易犯错误的地方。
    错误描述:用 Ajax 去给某个对象赋值,紧接着 Ajax 的代码后面就执行了使用这个对象的代码。


然后你就会发现明明 Ajax 返回的结果是正确的,为何还不能正常执行呢??
    避免办法:对于需要确保 Ajax 执行完毕后才能执行的代码,一定要在 Ajax 的 success 和 error 


这两个回调函数中进行。绝对不能紧跟在 Ajax 的代码后面立刻执行。 一定要深刻理解“异步加载”的


含义,以及它最简单的工作原理。


    No.11  异步加载的疏忽(二)
    上面说了一定要在 Ajax 的 success 和 error 这两个回调函数中执行必要代码,success 不就可


以了,为何还要在 error 中执行呢??
    错误描述:对于某些在 Ajax 前设定的标识,只在 Ajax 的 success 中修改标识,会发现一旦 


server 或 网络异常导致 Ajax 出错时,就会出现一些很难理解的错误现象。
    举例:
 
Js代码  收藏代码
//这段代码简单的实现避免同时多个 ajax 执行的代码,只有当 ajax 完成后才能重新 ajax  
//一旦ajax过程出现错误后,这段代码将导致 goAjax 永远不会再进行 ajax 调用  
var a = true;  
  
function goAjax() {  
  if (a) {  
    a = false;  
    //这里用 jQuery 的 ajax 调用举例  
    $.ajax({  
       success: function(msg) {  
           a = true;  
       }  
  
    });  
  }  
}  
  
 
    避免办法:对于必要的标识,一定要在 error 中设置相应的数据恢复,避免由于 ajax 异常导致程


序逻辑错误。
    例如上面的代码需要增加:
    error: function() { a = true;}


    No.12  jQuery 搜索DOM对象是否存在的判定
    这是一个刚使用 jQuery 时非常容易犯的错误。
    错误描述:var a = $("#test"); if(!!a) {alert("ok!");} 运行这段代码你会发现,永远都会 


alert,不管是否存在 id = "test" 的DOM
    避免办法:jQuery 的 $ 方法查找对象,始终都会返回一个 jQuery 对象的,不管是否存在查找的


结果。检查是否有结果请利用 length 属性,比如 if(a.length>0) {alert("ok!");}


    临时起草,不会很全面,以后可能也会慢慢补充进来更多弱智错误的。 
========

你可能感兴趣的:(web前端,javascript,调试)