本文着重介绍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 9Math.sqrt($_)
9 // As the last Result was 81$_
9 // As the Last Result is 9