[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()的快捷方式
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值