js调试学习总结
2016-07-25 17:48
459 查看
五个你必须知道的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.htmlhttp://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/1423986No.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!");}
临时起草，不会很全面，以后可能也会慢慢补充进来更多弱智错误的。
========
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Linux 自检和 SystemTap
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- Python 七步捉虫法
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法