写在前面：本文包括浏览器调试，不包括web移动端调试。本文调试是在chrome浏览器中进行的。无需多说警报，它是不言自明的。控制台的基本输出肯定是大家都在用console.log在控制台输出一些东西。其实控制台还有其他的方法：console.log("printstring");//在控制台打印自定义的字符串console.error("Iamanerror");//在控制台console打印自定义的错误信息.info("我是一个信息");//在控制台打印自定义信息console.warn("我是一个警告");//在控制台打印自定义警告信息console.debug("我是一个调试器");//在控制台打印自定义调试信息console.clear();//清空控制台（下面截图中没有）注意上面输出的错误和throw输出的错误不同。前者只输出错误信息，无法捕获，不会冒泡，不会停止程序运行。格式化输出另外，控制台还支持自定义样式和类似c语言的printf形式：console.log("%s年",2016);//%s表示字符串console.log("%d年%d月",2016,11);//%d表示整数console.log("%f",3.1415926);//%f十进制console.log("%o",console);//%o表示对象console.log("%c自定义样式","font-size:30px;color:#00f");console.log("%c我是%c自定义样式","font-size:20px;color:green",“字体大小：10px；颜色：红色”）；DOM输出下面比较简单，就不举例了，简单说一下：varul=document.getElementsByTagName("ul");console.dirxml(ul);//树输出表节点，即
以及它的innerHTML，由于document.getElementsByTagName是动态的，所以结果一定是一个动态对象outputvaro={name:"Lily",age:18};console.dir(obj);//显示对象自身的属性和方法对于多个对象的集合，您可以这样做以使输出更清晰：varstu=[{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];console.log(stu);控制台表（stu）；分组输出//创建参数组console.group("start");//引号内的组名，自己做fromconsole.log("sub1");console.log("sub1");console.log("sub1");console.groupEnd("end");函数计数跟踪functionfib(n){//输出前n斐波那契数列值if(n==0)return;console.count("Numberofcalls");//放在函数中，每当这段代码运行时，输出函数的执行次数console.trace();//显示函数调用轨迹（访问调用栈）vara=arguments[1]||1;varb=arguments[2]||1;console.log("fib="+a);[a,b]=[b,a+b];fib(--n,a,b);}fib(6);注意：Chrome开发者工具中的Sources选项卡也会显示调用堆栈时序console.time()//计时开始fib(100);//使用上面的函数计算100个斐波那契数console.timeEnd()//计时结束，输出duration断言语句，c++调试中经常用到。在js中，当表达式或参数为真时，什么也不会发生，为假时，程序终止并报错。console.assert(true,"我错了");console.assert(false,"我真的错了");性能分析functionF(){vari=0;functionf(){while(i++==1000);}functiong(){while(i++==100000);}f();g();}console.profile();F();console.profileEnd();注意：Chrome开发者工具中的Audits选项卡也可以进行性能分析。重量级调试器是博主最常用的。可能出身于C++，对单步调试有着发自内心的热爱。单步调试就是点击执行一个程序，可以查看当前范围内可见的所有变量和值。调试器就是告诉程序停在那里进行单步调试，俗称断点。右侧按钮如下：Pause/Resumescriptexecution：暂停/恢复脚本执行（程序执行在下一个断点处停止）。Stepovernextfunctioncall：执行下一步的函数调用（跳转到下一行）。进入下一个函数调用：进入当前函数。Stepoutcurrentfunction：跳出当前执行函数。Deactive/Activeallbreakpoints：关闭/开启所有断点（不会取消）。Pauseonexceptions：异常情况自动设置断点。其实右边还有很多强大的功能：Watch:WatchexpressionCallStack:栈中变量的调用，这里是递归调用，必须在内存栈中调用。Scope：当前作用域变量观察。BreakPoints：要观察的当前断点变量。XHRBreakPoints：面向Ajax，专为异步断点调试而设计。DOMBreakPoints：主要包括以下DOM断点。注册方式如下图：BreakonattributesmodificationsBreakonsubtreemodificationsinsideanodeBreakonsubtreemodifications当节点被移除时BreakonnoderemovalGlobalListeners：全局事件监听EventListenerBreakpoints：事件监听断点，列出所有页面和脚本事件，包括：鼠标、键盘、动画、定时器、XHR等。chrome中的调试技巧1.DOM元素的控制台书签：Chrome开发者工具和Firebug都提供了书签功能，可以将你最后点击的DOM元素显示在元素标签页(Chrome)或HTML标签页(Firebug)。如果依次选择A元素、B元素、C元素，则\$0表示C元素，\$1表示B元素，\$2表示A元素（这个和正则表达式的\$符号类似，只是顺序是不同的）。2.如果要调试f函数，可以用debug(f)语句加这种断点。3、在Sources选项卡的左侧面板中有一个代码片段（Snippet）子选项卡，可以用来保存代码片段，帮助你调试代码。4.你可以使用Chrome开发者工具的Sources选项卡中的Format按钮（PrettyPrintButton）来格式化压缩后的代码。5.在Network面板中，选择一个资源文件，右键CopyResponse可以快速复制响应内容。6、使用mediaquery，这个主要是调整DeviceMode下不同分辨率的显示。7.选择Elements，按Esc>Emulation>Sensors进行传感器模拟。8、点击淡入效果样式图标（紫色图标），可以预览动画效果，并调整对应贝塞尔曲线（cubic-bezier）的动画效果。9、在Source中按住Alt键，拖动鼠标选择多列内容。10.右键点击Elements面板执行DOM元素节点，选择ForceElementState或者点击右边的ToggleElementState图标启动伪类。11、在Network面板中选中一张图片，右击右边的图片，选择copyitasaDataURI，就可以得到图片的DataURL（base64编码）。12、按住Ctrl键，可以添加多个编辑光标，同时编辑多个地方。按Ctrl+U撤消编辑。13、在Elements面板右侧的Style编辑器中，点击颜色十六进制代码前的小色块，会弹出一个调色板。14、按住Alt键，双击DOM元素前面的箭头，展开DOM元素下的所有字节点元素。15、快捷键：快速定位到行：快捷键Ctrl+O（Mac：CMD+O），输入：行号：列号定位元素搜索：快捷键Ctrl+F（Mac：CMD+F），试试在搜索栏中输入ID选择器或类选择器来定位元素。调试过程注意事项1.避免记录引用类型在记录对象或数组时，永远记住你在记录什么。记录基本类型时，使用带断点的监视表达式。如果是异步代码，请避免记录引用类型。vararr=[{num:0}];setInterval(函数(){console.log(arr);arr[0].num+=1;},1000);这里，第一个属性中对象引用的值是不可靠的。num的值是在您第一次在开发人员工具中显示此属性时确定的。无论您重新打开同一个引用多少次，它都不会改变。2.尽可能使用sourcemaps。有时生产代码不能使用源映射，但无论如何您都不应该直接调试生产代码。
