郑州网站优化怎样做,美工培训哪个机构好,网站建设思维导图模板,广州高端网站开发大家好#xff0c;我是若川。今天再分享一篇 chrome devtools 的文章。之前分享过多篇。Chrome DevTools 全攻略#xff01;助力高效开发 前端容易忽略的 debugger 调试技巧笔者在前段时间的开发时#xff0c;需要通过 Chrome DevTools来分析一个接口#xff0c;调试中发… 大家好我是若川。今天再分享一篇 chrome devtools 的文章。之前分享过多篇。Chrome DevTools 全攻略助力高效开发 前端容易忽略的 debugger 调试技巧笔者在前段时间的开发时需要通过 Chrome DevTools来分析一个接口调试中发现了控制台中的 copy 函数非常的好用进而发现了新世界学习到了 Chrome 一些奇怪的调试技巧这里总结分享给大家希望能对各位的开发起到帮助多图预警建议在Wifi环境下阅读本文章。开发者工具函数copycopy 函数可以让你在 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 作演示。inspectinspect 提供了一个可以快速跳转到 DOM 元素对应位置的方法对于一些嵌套层级复杂或者未知的元素可以通过 inspect 配合调试将元素的选择器至传入函数中则会自动跳转到其对应位置。元素面板元素面板即为 Elements 面板的内容我们一般用其获取对应元素的信息比如 Styles Computed Layout 等其中我们会对元素做一些操作比如操作一个元素的显隐要怎么办其中一个答案就是右键该元素然后选择 Hide Element但这样做有点麻烦能不能有更好更快的办法呢答案是有的直接选择该元素在键盘上按下 h 即可切换元素的显隐状态Amazing不仅如此还可以直接拖动元素达到调整元素位置的功能。LayoutLayout 是归属于元素面板的子面板在其中可以查看元素的布局特别是对于 flex grid 来说简直是好用的不得了接下来我们先看 grid 布局的操作:当用户点击一个使用 grid 布局的元素时则会显示出其所有的小方格。当然这还不够我们还想要知道更详细的信息比如每个格子所占的容量宽度是多少可以点击 Overlay display settings 下的选项来操作。其中第一个下拉框可以选择展示 line names 和 line 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个区域:最上方的区域可以清除所有捕捉的动画组或者更改当前选定动画组的速度。第二行可以选择不同的动画组此时下方面板将会更新为当前动画组的动画时间线。在中间拥有时间线的区域可以理解为动画的进度条可以通过拖动来跳转到动画对应的时间点。在最下方的区域里可以修改选定的动画。在使用动画组捕捉动画后我们可以进行慢速播放重播动画。把鼠标放在动画上面则可以看动画预览这里最棒的就是可以体验不同动画组合过后的效果并修改动画组的时间与延迟甚至是关键帧偏移。可以拖动动画的实心圆也就是其关键帧来控制动画的持续时间最左和最右的两个实心圆。也可以拖动中间的实心圆来控制运动曲线可以通过调试来获得最想要的效果。中间有一条红色的线可以拖动它来控制当前动画执行的过程在哪里这里注意左侧的拖动和右侧动画的转变。有了动画组排列组合再也不是梦完结撒花本次介绍的功能多是一些笔者认为实用的功能比如各种命令行函数又或者是 Chrome 的新特性比如 flex grid 的调试功能这些功能在开发中若是处置得当能够很好的提升开发效率当然还有很多很多调试功能没有介绍毕竟如何利用好 DevTools 也是一门很深的学问这些特性就留在日后开发中挖掘再来补坑吧。最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。推荐阅读我在阿里招前端该怎么帮你可进面试群我读源码的经历在字节做前端一年后有啥收获~老姚浅谈怎么学JavaScript················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。点击上方卡片关注我、加个星标今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
