chrome dev tools中控制台的小技巧

前端之家收集整理的这篇文章主要介绍了chrome dev tools中控制台的小技巧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文着重介绍js控制台中的小技巧,虽然实用性不是非常大,但一些小技巧还是相当方便的

选取DOM元素

类似于Jquery选取Dom元素,控制台也可以轻松的获取dom元素。
比如

$$(‘tagName’)` 或 `$$(‘.class’),即可匹配对应的元素。
由于返回的是数组对象,所以添加下标即可获得对应的某个元素。
$$(‘.className’)[0]` 和 `$$(‘.className’)[1] 分别给你返回第一个和第二个元素

直接在浏览器进行文本编辑

之前的操作一般都是进入Dom元素,然后右键editText进行文本的编辑,其实还有更方便的方法,让你无需检查元素。

document.body.contentEditable=true

这样既可直接在页面上进行文本的编辑

查找DOM元素的关联事件

getEventListeners($(‘firstName’)).click[0].listener

比如通过本代码,可以直接查找到ID为firstName的元素的点击事件

查询代码块执行时间

这个功能主要依靠console.time("time")console.timeEnd("time")函数来完成,可以记录特定代码块内的执行耗时
比如:

console.time('myTime'); //Starts the timer with label - myTime
for(var i=0; i < 100000; i++){
2+4+5;
}
console.timeEnd('mytime'); //Ends the timer with Label - myTime
//Output - myTime:12345.00 ms`

将变量数据输出为表格形式

直接通过console.table(varName)即可完成操作
比如

var myArray=[{a:1,b:2,c:3},{a:1,c:3,d:4},{k:11,f:22},c:3}]
console.table(myArray);

检索最近一个结果的值

通常会在控制台进行计算,而通过$_可以直接将上一个计算中的结果,运用到下一个计算结果当中。

2+3+4
9 //- The Answer of the SUM is 9

$_
9 // Gives the last Result

$_ * $_
81 // As the last Result was 9

Math.sqrt($_)
9 // As the last Result was 81

$_
9 // As the Last Result is 9

猜你在找的程序笔记相关文章