[chrome devtools]Console面板

点解开发者工具控制台【Console】后，在最右侧找到点击出现如下面板：

【1】是否在控制台显示网络相关的日志信息，比如get请求 
【2】刷新或者跳转页面时，原先控制台已显示的日志是否继续保留在控制台上，就是刷新页面控制台信息不会清空
【3】当页面里内嵌了一个iframe时，如果iframe也在控制台输出一些信息，你不想看，而只想看自己的就可以勾选次选项
【4】重复打印同一个log时，是否进行分组，就是将相同的log放到一起，如下图。

 【5】当出现跨域问题时，是否将跨域的错误信息显示在控制台，勾选就会显示

 【6】控制台是否打印XmlHttpRequest请求
 【7】勾选后，就会出现灰色的提示

 【8】勾选后，输入过的东西再次输入可以快速出现提示

 【9】web开发的很多api只能在html的元素上执行click或者tap事件后才能执行，如果这些api你直接放到控制台执行就会报错如下

 如果想在控制台也能执行就需要勾选这个选项，才能成功在控制台执行如下：

treat code evaluation as user action意思就是说：将这个代码视为用户已经进行了click或者tap了html元素，不懂什么是user action参考：https://webkit.org/blog/13862/the-user-activation-api/ 

在Console面板中可以使用的一些api，类似console.log常用的就不在讲解了

• $_ ：返回控制台最近一次的执行结果
  
•  $0 - $4：显示最近5次右键检查过得元素
  在百度页面右键输入框，选择检查，然后再控制台输入$0就会显示刚才检查的元素
  
  如果又右键检查了另外一个元素，此时还想在控制台显示之前右键检查的输入框，输入$1即可
• $(selector,[startNode)]：Dom选择器，可以再控制台选择dom元素， 是document.querySelector()快捷方式
  
•  $(selector,[startNode)]：Dom选择器，可以再控制台选择dom元素， 是document.querySelectorAll()快捷方式
  
•  $x(path,[startNode])：XPath选择器在控制台选择dom元素
  
• clear：清除所有的历史操作记录，$0这样的操作就没值了
• copy(object)：将一个字符创的值复制到粘贴板
  
• debug(function)：当在控制台指定一个函数后，一旦程序执行了这个函数，断点就会进去
  
• dir(Object)：显示对象内容(js对象或者Dom对象)，它是console.dir()的快捷方式
  
• inspect(Object/Function)：跳转到element面板，并高亮显示元素，页面也会显示当前选中的元素,如果是funcation，会显示出函数
  
• getEventListeners(Object）：显示在对象上注册的所有事件，例如在js中通过addEventListener注册的时间，如下
  
• keys(Object)：显示一个json对象的所有key
  
• vaues(Object)：显示一个json对象所有的value值
  
• monitor(function)：当执行一个函数式，会显示出函数的参数和返回值，使用 unmonitor(function) 来停止函数监控
  
• monitorEvents(Object,[events])：监控某个对象的事件，一旦这个事件执行，监控就会被触发，显示出相应信息，使用 unmonitorEvents(object[, events]) 停止监控
  
  例子：监控control类型的所有的事件，此时我再改变浏览器窗口大小，还是可以成功显示出resize事件的执行log
  
• profile([name] and profileEnd([name])：记录一段时期内页面执行的分析情况
  
• queryObjects(Constructor)：查询出用某个构造函数创建的所有对象，意思就是通过类名查询出他所有已经创建的实例
  
• table(data [,columns])：表格的形式，显示对象的所有内容，它是console.table()的快捷方式