Chrome控制台隐藏的必备技能

Chrome作为目前市场份额最大的浏览器，也是我最钟爱的浏览器，当然有其过人之处。作为一个开发人员，对于浏览器的控制使用肯定是必不可少的，今天我们一起来看看Chrome浏览器的开发者控制台中几个常用的小技巧吧。

神器之一：$_、$、$$、$0、$1、$2、$3、$4、

• $  这个其实就是一个 document.querySelector
• $$ 这个可以理解为 document.querySelectorAll
• $_  上一个表达式的值
• $0-$4  是最近5个Elements面板选中的DOM元素

在控制台执行$('body') 可以看到打印出一个dom对象，调用html方法打印出body里边所有的html内容

 接下来我们看看如何找出一个网页里边所有img标签的数量呢，可以通过$('img').length

 可以看到，是不是算出来了，接下来我们继续看，如果获取img所有的src属性：

//获取所有img的总数量
var imgLength = $('img').length
//循环打印出所有img的src值
for(var i=0;i<imgLength;i++){
   console.log($('img')[i].src)
}

我们可以看到结果出来了。下面我们看看$_

 

可以看到，我们输出了字符串Hello World，输入$_，返回了上次的结果。

打开控制台，在元素上面点击，选中后$0到$4会记录下最近选择得一个元素，不如我最后点击的是script标签，那么$0就是script对象，看图：

看到这里大家应该明白了吧。

另外在控制台里边还可以改变JS中定义的变量值，比如代码中定义了

var x = 0

在控制台输入console.log(x) ，会输出0， 在控制台执行 x = 1,再次输出会发现x=1了，这也是调试中非常重要的，可以不用每次改js代码刷新浏览器。

$的用处还可以下下面这些形式：

1. $('#lg')  通过ID去获取
2. $("#lg img").length 获取lg div下面的img标签
3. $('#lg img')[0].src  获取lg div下面第0个img元素的src

还有其他的用法大家可以去自行探索哦。

document.body.contentEditable=true

在控制台执行这句话可以编辑网页的内容。

有问题可以在下方评论，技术问题可以私聊我。