前端神器—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

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

智能推荐

5个超厉害的资源搜索网站，每一款都可以让你的资源满满！_最全资源搜索引擎-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏41次。生活中我们无时不刻不都要在网站搜索资源，但就是缺少一个趁手的资源搜索网站，如果有一个比较好的资源搜索网站可以帮助我们节省一大半时间！今天小编在这里为大家分享5款超厉害的资源搜索网站，每一款都可以让你的资源丰富精彩！网盘传奇一款最有效的网盘资源搜索网站你还在为找网站里面的资源而烦恼找不到什么合适的工具而烦恼吗？这款网站传奇网站汇聚了4853w个资源，并且它每一天都会持续更新资源；..._最全资源搜索引擎

Book类的设计(Java)_6-1 book类的设计java-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏18次。阅读测试程序，设计一个Book类。函数接口定义：class Book{}该类有四个私有属性分别是书籍名称、价格、作者、出版年份，以及相应的set 与get方法；该类有一个含有四个参数的构造方法，这四个参数依次是书籍名称、价格、作者、出版年份。裁判测试程序样例：import java.util.*;public class Main { public static void main(String[] args) { List <Book>_6-1 book类的设计java

基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地

文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。

有状态和无状态登录

传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。

九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地

文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度

搜索引擎的发展历史

搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。

随便推点

控制对象的特性_控制对象特性-程序员宅基地

文章浏览阅读990次。对象特性是指控制对象的输出参数和输入参数之间的相互作用规律。放大系数K描述控制对象特性的静态特性参数。它的意义是：输出量的变化量和输入量的变化量之比。时间常数T当输入量发生变化后，所引起输出量变化的快慢。（动态参数） ..._控制对象特性

FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地

文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp