多了解一下Chrome开发者控制台

作为一名前端开辟者，Chrome内置的┞菲握台是必须懂得的，它拥有异常丰富的特点功能，对我们的开辟赞助灰常大年夜！

注：本身 $() 应当是 document.querySelector()，但今天测试倒是返回一组值，待讲究。

1、元素选择器($)

如不雅你接触过JQuery，那么对$()肯定不陌生，这是元素选择器，用来选择HTML元素，但如今，我们要懂得的是控制台中的$()。

打开百度，按F12打开控制台

$() 相当于JavaScript中的 document.querySelectorAll()，返回一个数组（后者返回的昵噜数组对象）。

就像上图所示，可以 $()[index] 返回某一个元素。

其实还有不少快捷键：

偏向键盘的高低键

copy(content) // 将content（也可以说是content）复制到剪贴板

2、console

console信赖大年夜家用的最多，这里就不多介绍了，可以看这篇文┞仿：《JavaScript在浏览器上的调试技能》

3. 让Chrome变成编辑器

在Chrome中，我们只需一行敕令即可让其变成编辑器：

document.body.contentEditable=true

4. clear()

如不雅你想清空控制台和内存，只需如许：

clear()

接着点回车键即可。

下面再介绍一些有趣实用的功能：

1、截图

其实chrome供给了一个截图功能，但貌似只能在移动模式。

2. 代码格局化

3. 打开敕令菜单

按Cmd + Shift + P（Mac）或Ctrl + Shift + P（Windows，Linux）打开敕令菜单。

4、隐蔽部分console日记

如不雅日记太多，我们可以隐蔽掉落部分 Console 日记（在输出日记的脚本上单击右键，filter -> hide）

这里还发清楚明了一个不错的关于Chrome开辟对象的文档：Chrome开辟对象文档

【编辑推荐】

外媒速递：敏捷软件开辟傍边最为常见的十类缺点
十个免费的web前端开辟对象 – Envato – Medium
给Android开辟者的31个Pro 版进阶小贴士
对话立异—51CTO首届开辟者大年夜赛启动啦！
化解谷歌AI霸权的另一种思路？开辟平台的生态围剿

【义务编辑：张燕妮 TEL：（010）68476606】

有些时刻，我们在控制台的Sources中查看CSS或JavaScript文件时，会看到一堆紧缩的代码，但只需点击一下这里：

$ // 相当于 document.querySelector 。$$ // 相当于 document.querySelectorAll 。$_ // 返回上一个表达式的值$0-$4 // 返回比来5个Elements面板选中的DOM元素。dir // console.dirkeys // 取对象的键名, 返回键名构成的数组values // 去对象的值, 返回值构成的数组

　　推荐阅读

　　被阿里挖来的高级别华人科学家，聊聊AI带来的想象空间

他曾是亚马逊最高等其余华人科学家，他也是 1 年前轰动全球零售业的亚马逊无人零售店项目 Amazon Go 的重要策划者。而如今，他的身份是阿里巴巴 iDST 首席科学家兼副院长。付出肯定是一个>>>详细阅读

本文标题：多了解一下Chrome开发者控制台

地址：http://www.17bianji.com/lsqh/37908.html

1/2 1