随便进入一个网页，按下F12，都将看到如下的控制台
你可以对HTML标签做任何操作，修改它，移动它，删除它
在网页上抓取想要的图片：
有些图片是在background-image中，那就需要在css栏中抓取：
在浏览器也能很好的模拟移动端的效果，可以切换不同的机型与大小
可通过右下角的矩形图可以直观看出，当前标签的width、height、padding、margin、position的大小（如果有的话，否则属性是auto或-）
当一个标签被多个类修饰，我们也能看出究竟那些熟悉生效了，特别是有熟悉冲突的时候
我们不一定要修改代码来改变css，可以直接在浏览器调试
例如定位元素，可以在浏览器端动态调整元素的位置，鼠标左键属性值后，出现悬浮块后，保持鼠标位置不动，滚动滚轮即可改变数值的大小待满意后再记住数值，再代码中修改
当不确定是否要有某个css属性时，可以在这里增加调试，省去了css不合适又删掉的麻烦
特别是在复杂的场景，一个标签可能被十几个css类作用着。这样可以很方便找到生效的元素在哪个类中
控制台大多时候是输出console.log语句执行的代码
<body>
<div id="app">
<div class="child box">child</div>
</div>
</body>
<script>
console.log('hello,world')
console.log(document.querySelector('#app'))
</script>
实际上console就是一个js执行器
如果有人问你怎么执行javascript代码?需要下载类似java的JVM或者c语言的gcc编译器吗？
你就告诉她，直接打开任何一个网页，按下F12，console里面直接可以执行，而且上下文是联系的，你输出一句它执行一句，浏览器会为每一条语句用console.log()包裹，所以console.log(let str1 = "hello")会输出undefined，但是语句确实是执行成功了
与HTML的联系：
<body>
<div id="app">
<div class="child box">child</div>
</div>
<script>
//在控制台里执行，作用相当于新开一个script标签，然后在这里执行js代码
</script>
</body>
所以我们能通过document.querySelector()获取html元素
如果console里面的代码能联系上下文执行的话，那么我们是不是可以做这样一件事呢？
捕捉视频的标签，然后改变它的播放速率
对于某些没有倍速的网课来说，开个加速，视频分分钟结束（最快只能16倍）
如果你也在学习前端，如果这篇文章帮助到了你，欢迎点赞收藏加关注，后续将会推出更优质的内容~