Chrome 功能总结-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Chrome 功能总结

简介: 原文:https://developers.google.com/web/updates/2017/08/devtools-release-notes#await 1. 截图 以前截取网页我都用qq,直接ctrl+alt+a。

原文:https://developers.google.com/web/updates/2017/08/devtools-release-notes#await

1. 截图

以前截取网页我都用qq,直接ctrl+alt+a。现在chrome自带了截图功能,可以截取指定区域或者指定dom元素。

img_adc9af1dd74bf20903ee9a441b0fa1c0.png
screenshot.png

截取指定区域:按ctrl+shift+c, 然后按住鼠标左键不放,选取网页区域,最后松手会下载截图的图片。
截取指定dom元素:右键检查元素,按ctrl+shift+P打开命令面板。输入"capture node"。然后回车,就会下载内容为指定元素的图片。

2. 新api

在console中,可以直接使用queryObjects查询特定的constructor

  • queryObjects(Promise). 返回所有的 Promises.
  • queryObjects(HTMLElement). 返回所有的 HTML elements.
  • queryObjects(foo), foo是函数名。返回所有实例化new foo()后的对象。

console

$

看到$大家不要以为是jquery,其实是浏览器自带的一些api。这个在调试上就比较方便!

关于$的api,我知道的有几个,但是我使用过用的就下面两个。其它的没怎么了解,大家有需要可以自行上网查找资料!

$:返回第一个符合条件的元素,相当于document.querySelector

$$:返回所有符合条件的元素,相当于document.querySelectorAll

查找和监控事件

getEventListeners作用就是查找并获取选定元素的事件。用法如下

img_2c4960e60d1978ea63ac8573284b0d06.png
image.png

monitorEvents作用是监控你所选元素关联的所有事件,事件触发时,在控制台打印它们。

img_af618a96be0709cbc3b4718f19039e9d.png
image.png

img_2bbe55cb42789b58a8e54aad39ff7f45.png
image.png

getEventListenersmonitorEvents感觉在开发上用得并不多了,至少我没用过。但是感觉会有用,就提及一下

类似可以使用 monitor 来监控函数,每次调用该函数,就会打印出传入的参数。

var func1 = function(x, y, z) {
//....
};

输出:


img_23bddcc8e520fbf8b1c4335d8b39ce1a.png
image.png

参考:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章