Chrome操作指南——入门篇(十五)monitor

简介: Chrome操作指南——入门篇(十五)monitor

前言


用vue的watch属性的小伙伴应该就很熟悉监听这个概念,在chrome中,他以很贴心的给我们提供了两个方法,一个是monitor,一个是monitorEvents。这两个方法从事的也是监听相关的工作,不过 vue 中 watch 还是有点不同的,它可以监听我们的方法是否被调用,以及当前节点的事件。在某些情况下,对于我们的调试工作还是很有帮助的, 下面我们就来看看这两个方法是如何使用的把。


monitor


  • monitor:ƒ monitor(function) { [Command Line API] }。可以监听任何你传入的方法,当方法被执行时,会在console控制台中打印出来。包括调用的函数名,以及给相应函数传递的参数。


我们先声明一个info实例,构造它的name 和 age 属性。并给他添加getName 和 getInfo两个方法,在getInfo内部调用 getName 方法。然后我们在通过monitor监听getName方法。看看会发生什么。


class Info {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getName(){
  return `我是${this.name}。`
  }
  getInfo() {
    return this.getName() + `我今年${this.age}岁`;
  }
}
复制代码


1669369197956.png


我们可以看到,我们监听了monitor(getName)方法,每次直接或间接调用的时候,都会在console中输出日志。这样就可以避免写很多console.log()了。


monitorEvents


  • monitorEvents:ƒ monitorEvents(object, [types]) { [Command Line API] }。可以用来监听dom节点的click、mouse等等。打印mouseEvent


monitorEvents($$('.hot-refresh-text')[0], 'click')
复制代码


1669369215998.png


我们监听了换一换的点击事件,当每次点击的时候,都会打印mouseEvent实例。当然我们也监听change、blur以及mouse等等。打开你的大脑,开发有趣的功能把。

相关文章
|
3月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
4月前
|
Web App开发 前端开发 JavaScript
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
|
6月前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
137 2
|
6月前
|
Web App开发 Java Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中,使用自定义运行时部署程序时,发现Chrome层已经建立但运行程序仍然缺失如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
452 0
|
Web App开发
chrome配置selenium操作
chrome配置selenium操作
119 0
|
Web App开发 SQL 存储
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
|
Web App开发 存储 前端开发
Chrome操作指南——入门篇(二)
Chrome操作指南——入门篇(二)
Chrome操作指南——入门篇(二)
|
Web App开发 开发者
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
|
Web App开发 前端开发 开发者
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command