谷歌浏览器开发者工具系列21:使用console面板的五个技巧

介绍

Console控制台中包含了非常多的小技巧,帮助我们提高调试效率以及体验。今天我们就来介绍其中几种。

在JS代码中定位DOM元素

在控制台中使用inspect()函数可以直接跳转到Elements中制定的元素上。可以在控制台中输入下面这段的代码后回车,然后你就会看到目标元素被选中了(有一层深色的背景)。

inspect($('p'));

提示:inspect接受的参数,是用浏览器自带的选择器(类似jQuery)选择出来的元素对象

复制JS表达式到粘贴板中

使用copy方法将目标文本拷贝到粘贴板中去:

copy(Object.keys(window));

给console的结果加上样式

为了更好的区分console打印的结果,可以给console.log函数加上css代码来控制输入的样式。例如你再羡慕加入这段代码打印出来的文字就会带有样式效果:

console.log('%cHello world', 'font-size:40px;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);');

wp editor md bba1fffc3f62e0e1bdba679abe690c99 - 谷歌浏览器开发者工具系列21:使用console面板的五个技巧

使用values函数

使用values函数可以让你打印一个对象的所有值的列表。

values({a:1, b:2, c:3});// [1,2,3]

javascript也提供了这个方法Object.values供我们使用。

清空控制台

使用CMD + K或者Ctrl + L来清除控制台的信息。你也可以点击控制台右上角的禁止标志来清除这些信息。

发表回复 0