Chrome--DevTools--Console 雨点打透心脏的1/2处 2023-01-23 12:49 28阅读 0赞 原文网址：[Chrome--DevTools--Console\_IT利刃出鞘的博客-CSDN博客][Chrome--DevTools--Console_IT_-CSDN] # 其他网址 # **官网** > [https://developer.chrome.com/docs/devtools/console/api/][https_developer.chrome.com_docs_devtools_console_api] **其他** > [Chrome控制台实用指南 - 知乎][Chrome_ -] > [Chrome 控制台console的用法 - SegmentFault 思否][Chrome _console_ - SegmentFault] > [Chrome控制台浏览器 console用法\_pw251的博客-CSDN博客][Chrome_ console_pw251_-CSDN] # 简介 # **说明** > Chrome浏览器自带开发者工具（Chrome Dev Tools），是不可或缺的开发者调试工具，console.log()都使用过，console还有很多功能。 **查看所有功能** > 法1：运行console命令 > > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][] **法2：console.dir(console)** > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][] # 技巧 # * 如果想要换行而不是直接执行命令，则按下：shift+enter * 查看某个元素的监听器：getEventListeners(document.querySelector('.someclass')); 注意：此方法是Chrome浏览器的，在JS中无法直接使用。 # console.clear # console.clear(); //清空控制台 # console.log家族 # **用法1：基本用法** > console.log ('普通信息') > console.info ('提示性信息') > console.warn ('警示信息') > console.error ('错误信息') > **结果如下** > > ![20210720222213394.png][] **用法2：输出对象** > **单纯对象** > > var myObj = { > name: 'haha', > sex: 'male', > obj: function(){ > console.log("hello"); > } > } > console.log(myObj); > > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][] > > **DOM对象** > > HTML文件： > > <!doctype html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <title>this is title</title> > </head> > > <body> > > <div> > 这是个Demo > </div> > > </body> > </html> > > 输出结果： > > ![20210720231942253.png][] **用法3：输出指定id的DOM节点** > 代码 > > <!doctype html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <title>this is title</title> > </head> > > <body> > > <div id="abc"> > 这是个Demo > </div> > > </body> > </html> > > 执行结果 > > ![20210721092018634.png][] > > 注意：用$('\#abc')可以达到同样效果。 **格式化** > console对象的上面4种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持下边几种。 > > console.log() 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。 > > <table style="width:500px;"> > <tbody> > <tr> > <td style="width:130px;"><strong>符号</strong></td> > <td style="width:369px;"><strong>含义</strong></td> > </tr> > <tr> > <td style="width:130px;"> <p>%d</p> <p>或%i</p> </td> > <td style="width:369px;">数字</td> > </tr> > <tr> > <td style="width:130px;">%s</td> > <td style="width:369px;">字符串</td> > </tr> > <tr> > <td style="width:130px;">%f</td> > <td style="width:369px;">浮点数</td> > </tr> > <tr> > <td style="width:130px;">%c</td> > <td style="width:369px;">css格式</td> > </tr> > <tr> > <td style="width:130px;">%o</td> > <td style="width:369px;">对象</td> > </tr> > </tbody> > </table> > > **示例** > > console.log("%d年%d月%d日",2011,3,26); > console.log("%s是%f","圆周率",3.1415926); > console.log("这个表示CSS样式%c红色","color:red", "炫酷吧") > > 结果： > > ![20210720225822120.png][] > > **对象输出示例** > > var dog = {}; > dog.name = "大毛"; > dog.color = "黄色"; > console.log("%o", dog); > > 结果： > > ![20210720230040353.png][] # console.group()，console.groupEnd() # **简介** > console.group() ：在控制台创建一个分组，随后创建的内容都会保存在里面； > console.groupEnd() ：表示着当前分组的结束。 > > 适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。 **示例** > console.group("app.bundle"); > console.warn("来自bundle模块的警告信息1");console.warn("来自bundle模块的警告信息2"); > console.groupEnd(); > console.group("app.bundle"); > console.log("来自bundle模块的信息1");console.log("来自bundle模块的信息2"); > console.groupEnd(); > > 结果如下 > > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][] > > 这样的控制台信息看上去就一目了然了，就不用再为了找这是属于那一行代码输出的再翻一遍源码了。 # console.dir() # **说明** > 输出打印对象的详细键值对信息。 > > 若该对象为HTML元素，则该元素的DOM的表达式会按DOM树输出。 这个方法是我经常使用的，比for in方便了很多，可以详细查对象的方法。 **示例1：普通对象** > var myObj = { > name: 'haha', > sex: 'male', > obj: function(){ > console.log("hello"); > } > } > console.dir(myObj); > > 结果 > > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4][] **示例2：DOM对象** > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5][] > > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6][] # console.assert() # **简介** > 对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。 > > 当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的。console.assert()就是最好的选择。 **示例** > var isDebug=false; > console.assert(isDebug,'开发中的log信息'); > > 结果 > > ![20210720232710410.png][] # console.count() # **简介** > 统计代码被执行的次数。 **示例** > function fun(){ > console.count('fun被执行的次数'); > } > fun(); > fun(); > fun(); > > 执行结果 > > ![20210720233036825.png][] # console.table() # **简介** > 传入的对象在控制台上以表格的形式呈现。 **示例** > let aa = [ > { > a: 1, > b: 2 > }, { > c: 3, > d: 4 > } > ] > console.table(aa); > > 结果： > > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 7][] # console.time()，console.timeEnd() # **简介** > 可以查看一段代码执行的耗时情况。 > > 在使用的时候这两个方法需要传递同一个参数，若不传，则为“default” **示例** > console.time("Array耗时"); > var array= new Array(10000000); > for (var i = array.length - 1; i >= 0; i--) { > array[i] = new Object(); > }; > console.timeEnd("Array耗时"); > > 结果： > > ![20210720235059153.png][] # console.profile()，console.profileEnd() # **简介** > 想要查看CPU使用相关的信息时，可以使用console.profile配合 console.profileEnd来完成这个需求。 **示例** > console.profile("Array耗时"); > var array= new Array(10000000); > for (var i = array.length - 1; i >= 0; i--) { > array[i] = new Object(); > }; > console.profileEnd("Array耗时"); > > 有人说，在Profiles面板里面查看就可以看到cpu相关使用信息，但我并没有找到。他们的测试结果是： > > ![c6f13338d3aba136779b0335dd42ccb2.png][] # 其他功能 # $\_ // 上一个表达式的值 $0~$4 // 最近5个最近选中的DOM元素 $ // 对JavaScript的document.querySelector() 的封装 $$ // 对JavaScript的 document.querySelectorAll 的封装 dir // 其实就是 console.dir keys // 取对象的键名, 返回键名组成的数组 values // 取对象的值, 返回值组成的数组 monitor，unmonitor //监听函数执行 debug，undebug //函数若执行则进入断点 ## $\_ ## **简介** > 上一个表达式的值 **示例** > ![2021072100160337.png][] ## $0~$4 ## **简介** > 代表了最近5个你选择过的DOM节点。 > > 在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。 **示例** > ![e140977d1de352b03337e4e2339a65f7.gif][] ## $ ## **简介** > Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点。 > > $(selector)是原生JavaScript的document.querySelector() 的封装。 **示例** > ![20210721002230833.png][] ## $$ ## **简介** > $$(selector)是对ocument.querySelectorAll() 的封装。返回的是所有满足选择条件的元素的一个集合。 **示例** > ![20210721002321230.png][] ## copy ## **简介** > 可以将在控制台获取到的内容复制到剪贴板。 > > 注意：他不依附于任何全局变量比如window，所以其实在JS代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的JS实现吧~这样我们就可以通过js代码进行复制操作而不用再依赖Flash插件了。 **示例** > ![20210721002444618.png][] > > 此时就可以ctrl+v粘贴了。 ## keys，values ## **简介** > keys：返回传入对象所有属性名组成的数组 > values：返回所有属性值组成的数组 **示例** > var myObj = { > name: 'haha', > sex: 'male', > obj: function(){ > console.log("hello"); > } > } > keys(myObj); > values(myObj); > > 结果 > > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 8][] ## monitor，unmonitor ## **简介** > monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。 > > 而unmonitor(function)便是用来停止这一监听。 **示例** > function sayHello(name){ > console.log('hello,' + name); > } > monitor(sayHello); > sayHello('abc'); > sayHello('def'); > unmonitor(sayHello); > > 结果 > > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 9][] ## debug，undebug ## **简介** > 也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。而undebug 则是解除该断点。 **示例** [Chrome--DevTools--Console_IT_-CSDN]: https://knife.blog.csdn.net/article/details/118741112 [https_developer.chrome.com_docs_devtools_console_api]: https://developer.chrome.com/docs/devtools/console/api/ [Chrome_ -]: https://zhuanlan.zhihu.com/p/24187505 [Chrome _console_ - SegmentFault]: https://segmentfault.com/a/1190000002511877 [Chrome_ console_pw251_-CSDN]: https://blog.csdn.net/pw251/article/details/104110592 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221004/71ddda41104f453f8618687e320ed2c1.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221004/8b028b9e676e4522b02e845eb53be890.png [20210720222213394.png]: /images/20221004/da54a520f3b64a5689e73d740f7fbdc1.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20221004/b48c6e34b43b4fc2914053b5df1a0e3a.png [20210720231942253.png]: /images/20221004/c8b94691d4c44c958e6b73eeb64537c6.png [20210721092018634.png]: /images/20221004/778de352295e491c8edf11c4c391ea47.png [20210720225822120.png]: /images/20221004/a7879e1eeab34ef088769cc0e1639ed6.png [20210720230040353.png]: /images/20221004/949fdd0926f14741855254d0c0a4e445.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: /images/20221004/eb48a73ebcb14a0dacc487ca03793f5e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4]: /images/20221004/6c8cf172d645433e8be46a00ac29854d.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5]: /images/20221004/9e1f53cea56f48328eaa8c44a407fb37.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6]: /images/20221004/ab538d83fc72474894c621d26804ba37.png [20210720232710410.png]: /images/20221004/0940b856cd324df78832ef430e5f73bf.png [20210720233036825.png]: /images/20221004/f6b55c46463d47c981d3ef8ea32a60c5.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 7]: /images/20221004/2072309fce1e45aca1735aa66bfadc16.png [20210720235059153.png]: /images/20221004/852ad8fc3488416a93d511f322b3dcca.png [c6f13338d3aba136779b0335dd42ccb2.png]: /images/20221004/1dbfb7dc64474eb9a131e0e529401c5b.png [2021072100160337.png]: /images/20221004/80ff488b1182431b892775820acb5488.png [e140977d1de352b03337e4e2339a65f7.gif]: /images/20221004/1e0bec32f37341baa758d8cf91a0e7b5.png [20210721002230833.png]: /images/20221004/7d7cd08edd4a41fe92550a3d3553ce0e.png [20210721002321230.png]: /images/20221004/5a565a579523421caacf9743392ff1c5.png [20210721002444618.png]: /images/20221004/c748fc99fa7a47eca7fa1c49dc4795ff.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 8]: /images/20221004/fdc53def6dde459c95cabec154f560be.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 9]: /images/20221004/c3682252fd3f4648a949022db778e0e4.png
还没有评论，来说两句吧...