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