你不知道的 Chrome DevTools 玩法

大家好,我是若川。今天再分享一篇 chrome devtools 的文章。之前分享过多篇。
Chrome DevTools 全攻略!助力高效开发  
前端容易忽略的 debugger 调试技巧


‍笔者在前段时间的开发时,需要通过 Chrome DevTools来分析一个接口,调试中发现了控制台中的 copy 函数,非常的好用,进而发现了新世界,学习到了 Chrome 一些奇怪的调试技巧,这里总结分享给大家,希望能对各位的开发起到帮助!

多图预警,建议在Wifi环境下阅读本文章。

开发者工具函数

copy

copy 函数可以让你在 console 里拿到任意的资源,甚至包括一些变量,在复制一些特别冗长的数据时特别有用,当复制完成后,直接使用 ctrl + v 即可。

copy 接受一个变量作为参数,如果有多个参数,则忽略第一个后面的所有参数,当需要复制不存在变量名的数据时,可以配合 Store As Global 来使用。

Store As Global

当我们从控制台获取一些数据却没有变量名时(在开发时特别常见),可以通过右键点击数据旁的小三角形,通过其来储存为全局变量,变量名为 temp1 一直延续下去,就可以配合 copy 获取变量名打印了,该功能对 HTML 元素同样适用。

$

这个 $jQuery 中的 $ 有部分相似之处,均可以作为选择器来使用,这里依次介绍其用法。

首先是 $0 ~ $4 可以获取点击的 HTML 元素,其中 $0 对应着最后一次点击的元素,$1 次之,依序排列直到$4

根据这个操作可以很轻易的复制一个元素,并对其执行一些 DOM 操作。

还可以作为选择器使用,其中 有两种用法,分别是单 $ 和双 $,需要注意的是,双 $ 返回的并非 NodeList而是一个纯正的数组,直接方便了我们在控制台调用API????。

有时仅仅需要获取上一次输出没有变量名的数据该怎么办?这时你心中应该有一个答案,就是通过 Store As Global 把其变为一个变量,但是这样太麻烦了,$_ 可以帮你解决这个烦恼,其返回结果就是上次执行结果的引用。

这里可以看到并不会重新计算一遍结果,而是直接引用。

最后关于$ 命令操作是重磅戏,可以通过 $i 安装 NPM 库,这是一条未曾设想过的道路,笔者查阅发现时,属实被震撼到了。在Console Importer 插件的帮助之下,就可以帮助我们实现这一操作!首先在谷歌应用商店安装好该插件后,在命令台输入 $i('lodash') 后,神奇的事情就会出现。

此时就可以在 Console 中使用 Lodash 了!

getEventListeners

可以方便的获取元素绑定的事件,特别是配合 $ 使用,不过获取事件功能也可以在 Element 中查看,主要是当元素嵌套层级深且复杂时,可以不用点击而通过选择器来查看元素。

monitor

这是 DevTools 自带的监听器,简单的说明就是监听函数的函数,使用起来很简单,直接套娃就行。目前没发现有什么特别方便的地方和使用它的需求,了解即可。

Preserve Log

在我们调试页面时,经常遇到页面跳转或刷新的情况,此时打印的输出会被刷新掉????,看不到想要的数据。在调试面板最右边的齿轮图标处,有 Preserve Log选项,可以保存上一次打印的输出,这里用 Math.random 作演示。

inspect

inspect 提供了一个可以快速跳转到 DOM 元素对应位置的方法,对于一些嵌套层级复杂或者未知的元素,可以通过 inspect 配合调试,将元素的选择器至传入函数中,则会自动跳转到其对应位置。

元素面板

元素面板即为 Elements 面板的内容,我们一般用其获取对应元素的信息,比如 Styles && Computed && Layout 等,其中我们会对元素做一些操作,比如操作一个元素的显隐要怎么办?其中一个答案就是右键该元素,然后选择 Hide Element,但这样做有点麻烦,能不能有更好更快的办法呢?答案是有的,直接选择该元素,在键盘上按下 "h" 即可切换元素的显隐状态,Amazing!

不仅如此,还可以直接拖动元素达到调整元素位置的功能。

Layout

Layout 是归属于元素面板的子面板,在其中可以查看元素的布局,特别是对于 flex && grid 来说,简直是好用的不得了,接下来我们先看 grid 布局的操作:

当用户点击一个使用 grid 布局的元素时,则会显示出其所有的小方格。

当然这还不够,我们还想要知道更详细的信息,比如每个格子所占的容量,宽度是多少,可以点击 Overlay display settings 下的选项来操作。

其中第一个下拉框可以选择展示 line namesline numbers,也就是线段的别名和线段对应的序号。

后续三个选项分别为

  • 显示轨道大小:切换以显示或隐藏轨道大小。

  • 显示区域名称:在具有命名网格区域的网格的情况下,切换以显示或隐藏区域名称。

  • 扩展网格线:默认情况下,网格线仅显示在带有display: grid或display: inline-grid设置在其上的元素内部;当打开此选项时,网格线沿每个轴延伸到视口的边缘。

文字描述可能看起来不好理解,下面有动图挨个解释????。

第一选项可以很清楚的看到每行每列的宽度,第二个选项可以看到每一个“块”的别名,第三个选项可能看的不是很清楚,其延伸 grid 的线段至视口边缘,可以仔细观察最下方和最右方,发现会多了几条虚线。

Grid overlays 有一个颜色块和一个带有鼠标的虚线块,其功能也很有用,分别是自定义每个 grid 的网格覆盖颜色和突出显示网格。

都说到 grid 了,怎么能不提 flex ?目前在 Chrome 91 版本来看,调试 flex 的功能是要更多一些的,喜欢 grid 的不要担心,在92版本会同步两者的功能!

这里介绍其最新的特性,通过元素面板的 Styles 子面板,在对应元素的样式里多了一个小按钮,点击该按钮能够很方便的切换 flex 的各种布局。

Animations动画组

还记得刚来组里时,第一个需求需要用到动画展示。当时调试动画全靠一点一点的数值修改,浪费了很多时间。最近发现调试工具中有动画组的概念,能够很方便的调试和观察动画。不过该功能隐藏的很深,藏在 More Tools 里。

里面的功能异常强大,能够捕捉所有当前在运作的动画组,并且修改其速度和耗时,在需要多个动画配合的时候非常好用。这里是 Codepen的官网 可通过它来感受 Animations 的强大,其由上至下分为4个区域:

  1. 最上方的区域可以清除所有捕捉的动画组,或者更改当前选定动画组的速度。

  2. 第二行可以选择不同的动画组,此时下方面板将会更新为当前动画组的动画时间线。

  3. 在中间拥有时间线的区域,可以理解为动画的进度条,可以通过拖动来跳转到动画对应的时间点。

  4. 在最下方的区域里,可以修改选定的动画。

在使用动画组捕捉动画后,我们可以进行慢速播放,重播动画。把鼠标放在动画上面则可以看动画预览,这里最棒的就是可以体验不同动画组合过后的效果,并修改动画组的时间与延迟,甚至是关键帧偏移。

可以拖动动画的实心圆,也就是其关键帧,来控制动画的持续时间(最左和最右的两个实心圆)。也可以拖动中间的实心圆来控制运动曲线,可以通过调试来获得最想要的效果。

中间有一条红色的线,可以拖动它来控制当前动画执行的过程在哪里,这里注意左侧的拖动和右侧动画的转变。

有了动画组,排列组合再也不是梦!

完结撒花

本次介绍的功能多是一些笔者认为实用的功能,比如各种命令行函数,又或者是 Chrome 的新特性,比如 flex && grid 的调试功能,这些功能在开发中若是处置得当,能够很好的提升开发效率,当然还有很多很多调试功能没有介绍,毕竟如何利用好 DevTools 也是一门很深的学问,这些特性就留在日后开发中挖掘再来补坑吧。


最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。


推荐阅读

我在阿里招前端,该怎么帮你(可进面试群)
我读源码的经历

在字节做前端一年后,有啥收获~
老姚浅谈:怎么学JavaScript?

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。

点击方卡片关注我、加个星标

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab拟合四次函数表达式,用matlab编写程序求以幂函数作基函数的3次、4次多项式的最小二乘曲线拟合,画出数据散点图及拟合曲线图...

共回答了18个问题采纳率:83.3%x[0.0 0.1 0.2 0.3 0.5 0.8 1.0]; %输入数组>> y[1.0 0.41 0.50 0.61 0.91 2.02 2.46];>> f1inline(poly2sym(polyfit(x,y,3))); %polyfit拟合得到系数,poly2sym由系数得到多项式,inline转换内联函数>> f2inline(pol…

排版人员 快速排版_选择排版前应了解的事项

排版人员 快速排版Design is everywhere, and with design comes text and the content that you’re trying to reach the user with. But before creating your design and choosing what font you want to use, there are some things you should know that will help you a…

matlab光顺拐点,基于MATLAB的最大误差双圆弧逼近曲线的算法及实现.pdf

基于MATLAB的最大误差双圆弧逼近曲线的算法及实现.pdf第31卷第6期 基于MⅢB的最大误差双圆弧逼近曲线的算法及实现文章编号:1004—2539120町】06一唧一∞基于MAⅡ.AB的最大误差双圆弧逼近曲线的算法及实现淮海工学院机械工程系,扛苏连云港笠a…

若川诚邀你加源码共读群,帮助更多人学会看源码~

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找。回复pdf,可以获取前端优质书籍。最近我创建了一个源码共读的前端交流群,希望尝试帮…

体育木地板的施工

文章来源:http://www.bjfhrd.com 体育木地板上有许多暗门,以制造特殊效果,如火焰、烟雾,使房屋、树木、山或人物在一瞬间出现或销售。这种特殊的要求,对于专业体育木地板德施工就有了一定的要求。 专业体育木地板施工&…

imessage_重新设计iMessage以获得更好的用户体验— UX案例研究

imessage体验设计 (EXPERIENCE DESIGN) Communication is a vital part of our everyday lives. We almost don’t even have to think about it. With social media and our devices as prime tools, we’re constantly finding new ways to stay connected. Instant messagin…

mysql 生成时间轴,MYSQL 时间轴数据 获取同一天数据的前3条

创建表数据CREATE TABLE praise_info (id bigint(20) NOT NULL AUTO_INCREMENT COMMENT ID,pic_id varchar(64) DEFAULT NULL COMMENT 图片ID,created_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间,PRIMARY KEY (id),KEY pic_id (pic_id) USING BTREE) ENGINEInn…

【招聘】永辉招前端

大家好,我是若川。这应该招聘第六期。友情帮好友宣传招聘。之前在跟各位读者朋友分享下公众号运营策略 文中提到 公众号主旨是帮助5年内前端小伙伴提升,找到好工作,所以有招聘文。上海 高级前端 本科 25k-50k 16薪岗位职责:1、…

C语身教程第三章: C说话挨次筹算匹面(1)

C说话挨次筹算本课先容C说话挨次筹算的根基要领和根基的挨次语句。从挨次流程的角度来看,挨次可以分为三种根基构造, 即挨次构造、分支构造、循环构造。 这三种根基构造可以组玉成部的种种重年夜挨次。C说话供给了多种…

插图 引用 同一行两个插图_插图的目的

插图 引用 同一行两个插图If you’re a designer in tech you’ve likely come across them. Any search for UI or product design on Dribbble will yield at least a few. Amid the sea of pastel blues and pinks, accented neon purples and gamboge yellows, these facel…

php 转码iconv,PHP iconv()函数转字符编码的问题(转)

在php函数库有一个函数:iconv(),iconv函数库能够完成各种字符集间的转换,是php编程中不可缺少的基础函数库。最近在做一个小偷程序,需要用到iconv函数把抓取来过的utf-8编码的页面转成gb2312,发现只有用iconv函数把抓取…

VSCode 竟然可以无缝调试浏览器了!

大家好,我是若川。今天周末,分享一篇相对比较简单的文章。学习源码系列、面试、年度总结、JS基础系列。2021-07-16 微软发布了一篇博客专门介绍了这个功能,VSCode 牛逼!在此之前,你想要在 vscode 内调试 chrome 或者 e…

最少的编码

Knowing how to code HTML email can bring you many opportunities, such as working as a digital designer, collaborating with front end developers, finding freelancing projects.知道如何对HTML电子邮件进行编码可以为您带来许多机会,例如担任数字设计师&a…

Hulu CEO预计网站本年营收将达5亿美元

网易科技讯 3月2日动静,据国外媒体报道,美国在线视频网站Hulu CEO杰森吉拉尔(Jason Kilar)明天不日发挥分析,Hulu本年告白及订阅营收将达5亿美元,是去年的两倍。吉拉尔周一在由互联网告白局举办的“2011年年…

webRTC——浏览器里的音视频通话

背景 webRTC是Google在2010年收购GIP公司之后获得的一项技术。如下图所示,它提供了音视频的采集、处理(降噪,回声消除等)、编解码、传输等技术。webRTC的目标是实现无需安装任何插件就可以通过浏览器进行P2P的实时音视频通话及文件传输,来看看…

面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的

1. 前言大家好,我是若川。好久以前我有写过《面试官问系列》,旨在帮助读者提升JS基础知识,包含new、call、apply、this、继承相关知识。其中写了 面试官问:this 指向 文章。在掘金等平台收获了还算不错的反馈。最近有小伙伴看我的…

转:Python: threading.local是全局变量但是它的值却在当前调用它的线程当中

原文地址:http://www.cnblogs.com/fengmk2/archive/2008/06/04/1213958.html 在threading module中,有一个非常特别的类local。一旦在主线程实例化了一个local,它会一直活在主线程中,并且又主线程启动的子线程调用这个local实例时&#xff0c…

matlab的边缘检测方法,常用图像边缘检测方法及Matlab研究

2011 年 2 月 15 日第 34 卷第 4 期 现代电子技术 Modern Electronics Technique Feb. 2011 Vol. 34 No. 4 常用图像边缘检测方法及 Matlab 研究 韦  炜 (西安文理学院 , 陕西 西安   710065) 摘  要 :边缘检测在数字图像处理中有着重要的作用。为了在实际应用中能够选择最佳…

单选按钮步骤流程向导 js_创建令人愉快的按钮的6个步骤

单选按钮步骤流程向导 jsThere is no modern interactive UI without buttons. They are an fundamental part of every digital solution. Learn how to improve the style of your buttons and delight users with perfect style.没有按钮,就没有现代的交互式UI。…

Android 四大组件之 Activity

什么是 Activity? Activity 是 Android 的四大组件之一,是用户操作的可视化界面,它为用户提供了一个完成操作指令的窗口。 当我们创建完 Activity 之后,需要调用 setContentView(view) 方法来完成界面的显示,以此来为用…