龙喵专栏 /前端 /内容

前端神器—Google Chrome Devtools使用细节详解

版权声明:龙喵网
网站网址:http://ailongmiao.com/

Google Chrome Devtools的易用性非常高的小功能和小细节 特意分享给大家。欢迎大家收藏+点赞

Element

1. styles内 悬浮样式名可以高亮符合样式名的所有元素(如图)

前端神器—Google Chrome Devtools使用细节详解

这个功能还是比较有用的,适用于查看自己写的样式到底用在了哪些元素上,方便看到样式是否起冲突。

2. 快速调节样式的数值(如图)

tip:方向上下键就可以调整样式数值 再也不用靠猜了
前端神器—Google Chrome Devtools使用细节详解

3. 对于字体颜色,背景颜色等需要用到色值的,可以直接在控制台进行取色或编辑(如图)

前端神器—Google Chrome Devtools使用细节详解

这个不仅可以手动取色,还可以再次取网页内其他元素的颜色

4. 用工具模拟css系列操作(如图)

前端神器—Google Chrome Devtools使用细节详解

这个比较有意思...有些鼠标悬浮的样式,鼠标移出就没有了。对于解决无法停留保存样式的问题,这样做还是很简单的,而且便于操控。

5. 图形化CSS动画编写(如图)

前端神器—Google Chrome Devtools使用细节详解

这个我具体没用过哈....因为很少写动画....但是看起来可以图形化调整运动曲线,比较有意思

6. CSS阴影图形化编写

前端神器—Google Chrome Devtools使用细节详解

这个可以图形化调整阴影的XY偏移度,模糊程度,扩散程度

7. 快速查看选中元素的信息(如图)

前端神器—Google Chrome Devtools使用细节详解

这个有点意思,之前大家在做一些业务时,不少情况下需要console.log一下元素。看看他的属性。还可以看到选中元素的子元素,高度等等

Console

1. 输出内容过滤器

前端神器—Google Chrome Devtools使用细节详解

这个可以快速输入关键字 查找你想要的console是否支持正则自测

2. Console优先级筛选

前端神器—Google Chrome Devtools使用细节详解

这个可以快速筛选console的优先级,看到你想看到的调试信息

3. Console内的其他工具

前端神器—Google Chrome Devtools使用细节详解

这里面包含了“调试信息带时间戳”“显示XMLHttpRequests请求情况”等等,请自测

Network

技巧

前端神器—Google Chrome Devtools使用细节详解

这里面包含了“隐藏data开头的小图片链接”,“开启离线模式”,“对页面限速限制延迟”等一系列功能

Vue DevTools(其他框架开发者请略过)

1. 快速定位组件的相对定位位置和dom树位置(如图)

前端神器—Google Chrome Devtools使用细节详解

2. 快速查看元素的组件名 并定位组件树位置

前端神器—Google Chrome Devtools使用细节详解

Security

可以看到页面加载以来所有请求的domain(不是hosts更正一下)

前端神器—Google Chrome Devtools使用细节详解

更多工具

请如图寻找 我要开始了咳咳

前端神器—Google Chrome Devtools使用细节详解

Animations

前端神器—Google Chrome Devtools使用细节详解

打开这个组件,触发页面动画后会出现如图上。

可以控制动画速度,拦截动画播放,手动拉动动画进行慢速播放。

Change

前端神器—Google Chrome Devtools使用细节详解

这个非常有用啊啊啊啊啊啊啊。尤其是你在页面修改css后,回过头就忘记修改了哪一些......这个工具可以看到页面加载以来所有你的临时手动修改

Network conditions

1. 基本操作(功能如图)

前端神器—Google Chrome Devtools使用细节详解

2. 对页面进行限流(使用系统预设)

前端神器—Google Chrome Devtools使用细节详解

3. 对页面进行限流(使用自定义)

前端神器—Google Chrome Devtools使用细节详解

点击上一张图的 "Add" 后,点击本章图的“Add custom profile”就会出现上图的情况 根据实际情况调整~~

Quick source

前端神器—Google Chrome Devtools使用细节详解
在这里面写代码 边写边生效

Rendering

前端神器—Google Chrome Devtools使用细节详解

这里是各种监视器的地方,包括fps帧率监视器。

做HTML5/移动端游戏开发必备~~可以实时看到FPS,GPU的Memory占用~~

Search

前端神器—Google Chrome Devtools使用细节详解
输入内容,全局搜索(所有加载的文件内容)

Sensors

前端神器—Google Chrome Devtools使用细节详解

这个可以模拟当前设备的位置,还可以模拟手机水平传感器参数。只需要拖动图中的手机就好

版权声明:龙喵网
网站网址:http://ailongmiao.com/

作者:王圣松

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/57.html

[ web前端导航 ]:http://ailongmiao.com/web/

相关阅读

    评论

    继续阅读

    无障碍 Web 开发

    无障碍 Web 开发

    Web前端 2019-06-04 5

    良好的 Web 可访问性,就是把你的网站建设成让尽可能多的人都觉得好用,可以让每一个人受益。语义化 HTML 也是确保 Web 良好访问性的

    禁止用户打开HTML页面调试

    Web前端 2019-05-18 5

    有时为了防止别人调试我们的HTML页面,盗取代码等行为,介绍一些能够阻止用户在浏览器中打开调试窗口的方法,这些方法只能一定程度的提

    细数CSS伪元素及其用法

    Web前端 2019-03-29 12

    CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

      选择打赏方式

    打赏

    打赏