前端神器—Google Chrome Devtools细节详解_chrome devtools 设置离线-程序员宅基地

技术标签： Google CSS 前端 Chrome

本人是一位没出实习期的前端小菜鸟一枚，这几个月发现了Google Chrome Devtools的易用性非常高的小功能和小细节特意分享给大家。欢迎大家收藏点赞。新人需要鼓励哈哈

内容和图片均为原创，未经许可不得转载！！

Element

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

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

2. 快速调节样式的数值（如图）

tip：方向上下键就可以调整样式数值再也不用靠猜了

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

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

4. 用工具模拟css系列操作（如图）

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

5. 图形化CSS动画编写（如图）

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

6. CSS阴影图形化编写

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

7. 快速查看选中元素的信息（如图）

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

Console

1. 输出内容过滤器

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

2. Console优先级筛选

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

3. Console内的其他工具

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

Network

技巧

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

Vue DevTools（其他框架开发者请略过）

1. 快速定位组件的相对定位位置和dom树位置

如图不多说

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

如图

Security

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

Animations

打开这个组件，触发页面动画后会出现如图上。可以控制动画速度，拦截动画播放，手动拉动动画进行慢速播放。

Change

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

Network conditions

1. 基本操作

功能如图

2. 对页面进行限流（使用系统预设）

我相信大家都能看懂吧....这不用我说吧...

3. 对页面进行限流（使用自定义）

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

Quick source

在这里面写代码边写边生效~~~

Rendering

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

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

Search

输入内容，全局搜索（所有加载的文件内容）

Sensors

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

谢谢阅读！希望大家都能灵活地用到开发中！

本文链接：https://blog.csdn.net/yaly200/article/details/101217162

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

2024最新计算机毕业设计选题大全-程序员宅基地

文章浏览阅读1.6k次，点赞12次，收藏7次。大家好！大四的同学们毕业设计即将开始了，你们做好准备了吗？学长给大家精心整理了最新的计算机毕业设计选题，希望能为你们提供帮助。如果在选题过程中有任何疑问，都可以随时问我，我会尽力帮助大家。在选择毕业设计选题时，有几个要点需要考虑。首先，选题应与计算机专业密切相关，并且符合当前行业的发展趋势。选择与专业紧密结合的选题，可以使你们更好地运用所学知识，并为未来的职业发展奠定基础。要考虑选题的实际可行性和创新性。选题应具备一定的实践意义和应用前景，能够解决实际问题或改善现有技术。

dcn网络与公网_电信运营商DCN网络的演变与规划方法(The evolution and plan method of DCN)...-程序员宅基地

文章浏览阅读3.4k次。摘要：随着电信业务的发展和电信企业经营方式的转变，DCN网络的定位发生了重大的演变。本文基于这种变化，重点讨论DCN网络的规划方法和运维管理方法。Digest: With the development oftelecommunication bussiness and the change of management of telecomcarrier , DCN’s role will cha..._电信dcn

动手深度学习矩阵求导_向量变元是什么-程序员宅基地

文章浏览阅读442次。深度学习一部分矩阵求导知识的搬运总结_向量变元是什么

月薪已炒到15w？真心建议大家冲一冲数据新兴领域，人才缺口极大！-程序员宅基地

文章浏览阅读8次。近期，裁员的公司越来越多今天想和大家聊聊职场人的新出路。作为席卷全球的新概念ESG已然成为当前各个行业关注的最热风口目前，国内官方发布了一项ESG新证书含金量五颗星、中文ESG证书、完整ESG考试体系、名师主讲...而ESG又是与人力资源直接相关甚至在行业圈内成为大佬们的热门话题...当前行业下行，裁员的公司也越来越多大家还是冲一冲这个新兴领域01 ESG为什么重要？在双碳的大背景下，ESG已然成...

对比传统运营模式，为什么越拉越多的企业选择上云？_系统上云的前后对比-程序员宅基地

文章浏览阅读356次。云计算快速渗透到众多的行业，使中小企业受益于技术变革。最近微软SMB的一项研究发现，到今年年底，78％的中小企业将以某种方式使用云。企业希望投入少、收益高，来取得更大的发展机会。云计算将中小企业信息化的成本大幅降低，它们不必再建本地互联网基础设施，节省时间和资金，降低了企业经营风险。科技创新已成时代的潮流，中小企业上云是创新前提。云平台稳定、安全、便捷的IT环境，提升企业经营效率的同时，也为企业..._系统上云的前后对比

esxi网卡直通后虚拟机无网_esxi虚拟机无法联网-程序员宅基地

文章浏览阅读899次。出现选网卡的时候无法选中，这里应该是一个bug。3.保存退出，重启虚拟机即可。1.先随便选择一个网卡。2.勾先取消再重新勾选。_esxi虚拟机无法联网