写在前面

本文包括浏览器调试，但不包括web移动调试。

本文的调试是在chrome浏览器中进行的

警报

不用说，这是不言自明的

控制台基本输出

每个人都必须使用console.log在控制台上输出一些东西。事实上，控制台还有其他方法：

Console.log('打印字符串')；//在控制台上打印自定义字符串console . error(‘我是个错误’)；//在控制台上打印自定义错误消息console . info(‘我是消息’)；//在控制台上打印自定义信息console . warn(‘我是警告’)；//在控制台上打印自定义警告消息console . debug(‘我是调试人员’)；//在控制台上打印自定义调试信息cosole . clear()；//清空控制台(下图截图中未显示)

请注意，上面的错误输出不同于throw的错误输出。前者只输出错误信息，无法捕捉，不会冒泡，也不会停止程序运行。

印刷格式

此外，控制台还支持类似于c语言的自定义样式和printf表单

console . log(“% s year”，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 :30 px；color : # 00f’)；Console.log('%c我是%c自定义样式'，-font-size :20 px；color:green '，' font-size :10 px；color : red’)；

DOM输出

下面简单的就不举例了，简单说一下：

var ul=document . getelementsbytagname(' ul ')；console . dirxml(ul)；//树输出表节点，即table及其innerHTML。由于document.getElementsByTagName是动态的，因此获得的结果必须是动态的

对象输出

var o={ name:'Lily '，age : 18 }；console . dir(obj)；//显示对象自己的属性和方法

对于多个对象的集合，您可以这样做以使输出更加清晰：

var stu=[{name:'Bob '，年龄：13，hobby:'playing'}，{name:'Lucy '，年龄：14，hobby:'reading'}，{name:'Jane '，年龄：11，hobby : ' shopping ' }]；console . log(stu)；console . table(stu)；

分组出去

//创建参数组console . group(' start ')；//组名用引号括起来，从console.log('sub1 ')开始；console . log(' sub 1 ')；console . log(' sub 1 ')；console . GroupEnd(' end ')；

函数计数和跟踪

函数fib(n){ //如果(n==0)返回，则输出前n个斐波那契序列值；Console.count('呼叫数')；//放在函数中，每当这段代码运行时，输出函数被执行的次数console . trace()；//显示函数调用轨迹(访问调用栈)var a=自变量[1]| | 1；var b=参数[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(真的，‘我错了’)；Console.assert(false，“我真的错了”)；

技术性能分析

函数F(){ var I=0；函数f(){ while(I==1000)；}函数g(){ while(I==100000)；} f()；g()；} console . profile()；f()；console . profile end()；

注意：Chrome开发者工具中的审核选项卡也可以实现性能分析。

调试器

这个重量级是博主最常用的，大概是C语言出身，真心喜欢单步调试。单步调试意味着单击、执行程序并查看当前范围内可见的所有变量和值。调试器告诉程序停止在那里进行单步调试，通常称为断点。

右侧的按钮如下：

暂停/恢复脚本执行：暂停/恢复脚本执行(程序执行在下一个断点停止)。跳过下一个函数调用：执行下一步的函数调用(跳到下一行)。进入下一个函数调用：进入当前函数。退出当前函数：退出当前执行的函数。停用/激活所有断点：关闭/打开所有断点(不会取消)。异常暂停：异常情况下的自动断点设置。事实上，右侧有许多强大的功能

watch:watch表达式Call Stack:栈中变量的调用在这里是递归调用，必须在内存栈中调用。范围：当前范围变量观察。断点：观察当前断点变量。XHR断点：面向Ajax的异步断点调试功能。DOM断点：主要包括以下DOM断点，注册方式如下图所示：节点属性发生变化时，在属性修改时中断

当节点内的子节点改变时，在子树修改时中断

移除节点时中断

全球听众：全球事件收听

事件监听器断点：事件监听器断点，列出所有页面和脚本事件，包括鼠标、键盘、动画、定时器、XHR等。

chrome中的调试技巧

1.DOM元素的控制台书签

Chrome开发者工具和Firebug都提供了书签功能，用来显示你在元素选项卡(Chrome)或者HTML选项卡(Firebug)中最后点击的DOM元素。如果依次选择A元素、B元素和C元素，那么美元；0表示c元素，美元；1代表要素b，美元；2代表a元素(这和美元的正则表达式；相似的符号，但顺序不同)

如果要调试f函数，可以使用debug(f)语句增加此断点。“源”选项卡的左侧面板上有一个“代码片段”子选项卡，可用于保存代码片段并帮助您调试代码。您可以使用Chrome开发工具“源代码”选项卡中的“漂亮打印”按钮来格式化压缩代码。在“网络”面板上，选择一个资源文件，然后右键单击“复制响应”以快速复制响应内容。使用媒体查询，这主要是为了在设备模式下调整不同分辨率的显示。选择元素，然后按Esc仿真传感器来模拟传感器。单击渐变效果样式图标(紫色图标)预览动画效果，并调整相应三次贝塞尔曲线的动画效果。按住Alt键并在“源”中拖动鼠标以选择多列内容。元素面板右键执行DOM元素节点，选择强制元素状态或点击右侧切换元素状态图标启动伪类。在“网络”面板中选择一张图片，用鼠标右键单击右边的图片，选择“复制为数据URI”，获取图片的数据网址(base64编码)。按住Ctrl键可以添加多个编辑光标并同时编辑多个位置。您可以通过按Ctrl+U来撤消编辑.在“元素”面板右侧的样式编辑器中，单击颜色十六进制编码前的小颜色块，将弹出一个调色板。按Alt键，双击DOM元素前面的箭头，展开DOM元素下的所有字节点元素。快捷方式：快速定位行：快捷方式Ctrl O(Mac:CMD O)，输入行号：列号搜索定位元素；快捷键Ctrl F(Mac:CMD F)，尝试在搜索栏中输入ID选择器或类选择器来定位元素。1.避免记录引用类型。

记录对象或数组时，请始终记住您正在记录的内容。录制原始类型时，使用带断点的观察表达式。如果是异步代码，请避免记录引用类型。

var arr=[{ num 3360 0 }]；setInterval(function(){ console . log(arr))；arr[0]。num=1；}, 1000);

这里，第一个属性中的对象引用的值是不可靠的。当您第一次在开发工具中显示此属性时，num的值已经确定。之后，无论你重新打开同一个引用多少次，它都不会改变。

2.尽可能多地使用源地图。有时生产代码不能使用源代码映射，但是无论如何都不应该直接调试生产代码。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。