Chrome 功能总结

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

1. 截图

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

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作用就是查找并获取选定元素的事件。用法如下

image.png

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

image.png

image.png

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

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

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

输出:

image.png

参考:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 自动输入建议 顶

material-auto-suggest-input是一个输入字段,在用户输入时提供自动完成输入的建议。

11240
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 8 自定义指令

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容。 前面提到AngularJS的四大特性:   1 MVC ...

19590
来自专栏IT开发技术与工作效率

VBA登录抓取网络数据

29840
来自专栏calmound

JavaScript基础1

JavaScript写在<script></script>之间    <script type="text/javascript">表示在<script></s...

35360
来自专栏杂七杂八

numpy和pandas中的axis

在numpy和pandas中经常出现axis轴这个概念,下面就详细的看看这个轴到底是什么意思 使用0值表示沿着每一列或行标签\索引值向下执行方法 使用1...

29570
来自专栏前端侠2.0

table锁定列的一个方法.及琢磨思路

这是从http://stackoverflow.com找到一个一链接,删除多余的css,加上色就是上图。

35920
来自专栏十月梦想

Vue实现简单todoList以及jquery实现对比

上一篇文章,了解了Vue的hello world程序;这次简单了解两个vue指令,v-for和v-model,来实现一个简单的todolist;

21430
来自专栏青青天空树

MFC--响应鼠标和键盘操作

  一.  理解鼠标事件.之前对鼠标事件的认识仅仅局限于处理控件的单击与双击事件.但实际鼠标的操作包含很多.这里将以一个画图的小程序讲解对鼠标的响应.

12910
来自专栏河湾欢儿的专栏

vue 入门

vue 的发展史 2013.12.24 发布0.7.0 2014.1.27发布0.8.0 2014.2.25 发布0.9.0 2014.3.24发布0....

8710
来自专栏有趣的django

微信小程序入门(四)

WXSS(WeiXin Style Sheets)是一套样式语言,用于WXML的组件样式

28320

扫码关注云+社区

领取腾讯云代金券