Javascript调试命令 – 你只会Console.log（）_前端开发者

https://www.rokub.com

控制台对象提供对浏览器控制台的接入（如Firefox的web控制台）。
不同浏览器上它的工作方式是不一样的，但这里会介绍一些大都会提供的接口特性。
控制台对象可以在任何全局对象中访问，如Window，WorkerGlobalScope以及通过属性工作台提供的特殊定义。
它被浏览器定义为Window.Console，也可以简单的控制台调用。
最常用的方法就是Console.log（），就是在控制台输出内容。
刚开始学前端的时候看到大家都是用的Console.log（），几乎没有见过Console的其他用法，难道Console真的没有别的用法了？查了一下后发现Console还是非常强大的，至于为什么很少看到有人用可能是因为用过都删掉了吧。
在此记录一下Console的其他用法。
注意：因为Console对象提供对浏览器控制台的接入所以在不同浏览器中的支持及表现形式可能不一样，但是调试内容只有我们开发者会看，所以保证开发环境能用这些方法就可以了，下面演示全部都为铬上面的效果。
分类输出不同类别信息的输出的console.log（ ‘文字信息’）; console.info（ ‘提示信息’）; console.warn（ ‘警告信息’）; console.error（ ‘错误信息’）; 1 2 3 4控制台。log（’文字信息’）; 安慰。info（’提示信息’）; 安慰。警告（’警告信息’）; 安慰。错误（’错误信息’）;分组输出使用Console.group（）和Console.groupEnd（）包裹分组内容。
还可以使用Console.groupCollapsed（）来代替Console.group（）生成折叠的分组。
console.group（ ‘第一个组’）; 的console.log（ “1-1”）; 的console.log（ “1-2”）; 的console.log（ “1-3”）; console.groupEnd（）; console.group（ ‘第二个组’）; 的console.log（ “2-1”）; 的console.log（ “2-2”）; 的console.log（ “2-3”）; console.groupEnd（）; 1 2 3 4 5 6 7 8 9 10 11控制台。group（’第一个组’）; 安慰。日志（“1-1”）; 安慰。日志（“1-2”）; 安慰。日志（“1-3”）; 安慰。groupEnd（）; 安慰。group（’第二个组’）; 安慰。日志（“2-1”）; 安慰。日志（“2-2”）; 安慰。日志（“2-3”）; 安慰。groupEnd（）; Console.group（）还可以嵌套使用console.group（’第一个组’）; console.group（ “1-1”）; console.group（ “1-1-1”）; 的console.log（ ‘内容’）; console.groupEnd（）; console.groupEnd（）; console.group（” 组（“2-2”）; 安慰。groupEnd（）; 安慰。groupEnd（）;表格输出使用console.table（）可以将传入的对象或数组以表格形式输出。
适合排列整齐的元素var Obj = {Obj1：{a：“aaa”，b：“bbb”，c：“ccc”}，Obj2：{a：“aaa”，b：“bbb”，c：“ccc “}，Obj3：{a：”aaa“，b：”bbb“，c：”ccc“}，Obj4：{a：”aaa“，b：”bbb“，c：”ccc“}} console.table （的OBJ）; var Arr = [[“aa”，“bb”，“cc”]，[“dd”，“ee”，“ff”]，[“gg”，“hh”，“ii”]，] console.table （ARR）; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 var Obj = {Obj1：{a：“aaa”，b：“bbb” ，c：“ccc”，Obj2：{a：“aaa”，b：“bbb”，c：“ccc”}，Obj3：{a：“aaa”，b：“bbb”，c：“ccc” }，Obj4：{a：“aaa”，b：“bbb”，c：“ccc”}}控制台。表（Obj）; var Arr = [[“aa”，“bb”，“cc”]，[“dd”，“ee”，“ff”]，[“gg”，“hh”，“ii”]，]控制台。table（Arr）;查看对象使用Console.dir（）显示一个对象的所有属性和方法在Chrome中Console.dir（）和Console.log（）效果相同var CodeDeer = {nema：’CodeDeer’，blog：’ www.xluos.com’，} console.log（“console.dir（CodeDeer）”）; console.dir（CodeDeer）; 的console.log（ “执行console.log（CodeDeer）”）; 的console.log（CodeDeer）; 1 2 3 4 5 6 7 8 9 10 var CodeDeer = {nema：’CodeDeer’，博客：’www.xluos.com’，}控制台。日志（“console.dir（CodeDeer）”）; 安慰。dir（CodeDeer）; 安慰。日志（“console.log（CodeDeer）”）; 安慰。日志（CodeDeer）;查看节点使用控制台。
当第一个参数或返回值为真时，不输出内容当第一个参数或返回值为假时，输出后面的内容并抛出异常console.assert（true，“你永远看不见我”）; console.assert（（function（）{return true;}）（），“你永远看不见我”）; console.assert（false，“你看得见我”）; console.assert（（function（）{return false;}）（），“你看得见我”）; 1 2 3 4 5控制台。assert（true，“你永远看不见我”）; 安慰。assert（（function（）{return true;}）（），“你永远看不见我”）; 安慰。assert（false，“你看得见我”）; 安慰。assert（function（）{return false;}）（），“你看得见我”）;计次输出使用Console.count（）输出内容和被调用的次数（function（）{for（var i = 0; i <3; i ++）{console.count（“运行次数：”）;}}）（）1 2 3 4 5（function（）{for（var i = 0; i <3; i ++） {console。count（“运行次数：”）;}}）（）追踪调用堆栈使用Console.trace（）来追踪函数被调用的过程，在复杂项目时调用过程非常多，用这个命令来帮助你清。
function add（a，b）{console.trace（“Add function”）; 返回a + b; } function add3（a，b）{return add2（a，b）; } function add2（a，b）{return add1（a，b）; } function add1（a，b）{return add（a，b）; } var x = add3（1，1）; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18功能add（a，b）{console。跟踪（“添加功能”）; 返回a + b; } function add3（a，b）{return add2（a，b）; } function add2（a，b）{return add1（a，b）; } function add1（a，b）{return add（a，b）; （），var x = add3（1，1）;计时功能使用Console.time（）和Console.timeEnd（）包裹需要计时的代码片段，输出运行这段代码的事件
Console.time（）中的参数作为计时器的标识，具有唯一性。
中的参数作为计时器的标识，具有唯一性。
Console.timeEnd（）中的参数来结束此标识的计时器，并以毫秒为单位返回运行时间。
中的参数来结束此标识的计时器，并以毫秒为单位返回运行时间。
最多同时运行10000个计时器。
console.time（ “铬中循环1000次的时间”）; for（var i = 0; i <1000; i ++）{} console.timeEnd（“Chrome中循环1000次的时间”）; 1 2 3 4 5 6控制台。时间（“Chrome中循环1000次的时间”）; for（var i = 0; i <1000; i ++）{}控制台。在Chrome自带的调试工具中并没有找到在哪里查看这两个方法生成的分析报告。
应该需要其他的调试工具。
具体参考这里：HTTP：//www.oschina.net/transl…有趣的CONSOLE.LOG（）最后再来介绍一下强大的Console.log（），这个方法有很多的用法（其他输出方法的用法，如error（）等，可以参照log（）使用）。
一，提示输出可以再输出的对象，变量前加上提示信息，增加辨识度var ans = 12345; 的console.log（ “这是临时变量ANS的值：”，ANS）; 1 2 var ans = 12345; 安慰。log（“这是临时变量ans的值：”，ans）;二，格式化输出占位符含义％s字符串输出％d或％i整数输出％f浮点数输出％o打印javascript对象，可以是整数，字符串以及JSON数据样例：var arr = [“小明”，“小红”]; 的console.log（ “欢迎％S和％S两位新同学”，ARR [0]，ARR [1]）; 的console.log（ “圆周率整数部分：％d，带上小数是：％F”，3.1415,3.1415）; 1 2 3 4 5 var arr = [“小明”，“小红”]; 安慰。log（“欢迎％s和％s两位新同学”，arr [0]，arr [1]）; 安慰。log（“圆周率整数部分：％d，带上小数是：％f”，3.1415，3.1415）;三，自定义样式使用％c为打印内容定义样式，再输出信息前加上％c，后面写上标准的css样式，就可以为输出的信息添加样式了console.log（“％cMy时尚消息”，“颜色：红色; font-style：italic”）; console.log（“％c3D Text”，“text-shadow：0 1px 0＃ccc，0 2px 0＃c9c9c9,0 3px 0 #bbb，（0，＃f22），color-stop（0.15，＃f2f），color-stop（0.3，＃22f），color-stop（0.3，＃22f），background-image：-webkit-gradient（线性，左上，右上，停止（0.45，＃2ff），停止颜色（0.6，＃2f2），停止颜色（0.75，＃2f2），停止颜色（0.9，＃ff2），停止颜色（1，＃f22））;颜色：透明; -webkit-background-clip：text; font-size：5em;’ ）; 安慰。log（’％cMy name is classicemi。’，’color：#fff; background：＃f40; font-size：24px;’）;总结Console的用法很多，有些再调试过程中非常实用，可以节省很多时间。（0，＃f22），color-stop（0.15，＃f2f），color-stop（0.3，＃22f），color-stop（0.3，＃22f），background-image：-webkit-gradient（linear，left top，right top，停止（0.45，＃2ff），停止颜色（0.6，＃2f2），停止颜色（0.75，＃2f2），停止颜色（0.9，＃ff2），停止颜色（1，＃f22））;颜色：透明; -webkit-background-clip：text; font-size：5em;’ ）; 安慰。log（’％cMy name is classicemi。’，’color：#fff; background：＃f40; font-size：24px;’）;总结Console的用法很多，有些再调试过程中非常实用，可以节省很多时间。颜色：#fff; 背景：＃f40; font-size：24px;’ ）;总结Console的用法很多，有些再调试过程中非常实用，可以节省很多时间。颜色：#fff; 背景：＃f40; font-size：24px;’ ）;总结Console的用法很多，有些再调试过程中非常实用，可以节省很多时间。