谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)
工欲善其事必先利其器
命令菜单
按Cmd + Shift + P
(如果使用Windows
,则按Ctrl + Shift + P
)打开“命令”菜单。
或者
截取DOM生成图片
先打开命令行, 输入 Screenshot
Screenshot Capture area screenshot
点击后可以在可视区类似微信截图一样的截取,会直接给你下载个png格式的图片。下边的也是一样
这个不好截图,自己试一下便知
Screenshot Capture full size screenshot
全屏截图 并不只是页面可视区域,而是包含滚动条在内的所有页面内容。 页面有多长就截取多长,非常给力了
Screenshot Capture node screenshot
这个需要先用小光标先选中一个dom元素,然后再点这个命令,就会把你刚才选择的dom节点截图下来
Screenshot Capture screenshot
截取全屏这个只截取到可视部分
在控制台中使用上次操作的返回值
使用$_
可以引用在控制台执行的前一步操作的返回值。
通过拷贝请求相关信息或者整体拷贝请求
Network
面板内,对于某个请求
下边这是个动图但是不会循环,点出去看一眼就知道了
找到Copy
点卡之后会看到可以复制 request header,可以 复制 response header
还可以复制 整体请求 as cURL 可以直接复制到系统自带命令行工具里执行和查看
重新发起xhr
请求
非常实用的功能,当想二次发起请求就不用刷新页面了 直接 Replay XHR
编辑页面上的任何文本
在控制台输入document.body.contentEditable="true"
或者document.designMode = 'on'
就可以实现对网页的编辑了。
这个还是比较实用的,比如你要测试一个DOM
节点文字太长时,样式是否会混乱,或者要去直接修改页面元素去满足一些业务需求时。
当然你去点a链接还是会跳转的
动画检查
DevTools
中有一个动画面板,默认情况下它是关闭的。它可以让你控制和操纵 CSS
动画,并且可视化这些动画是如何工作的。
要打开该面板,可以在 DevTools
右上角菜单 → More tools
中打开 Animations
:
默认情况下,DevTools
会“监听”动画。一旦触发,它们将被添加到列表中。你能看到这些动画块如何显示。在动画本身上,DevTools
会向我们展示哪些属性正在更改,例如 background-color
或 transform
。
然后,我们可以通过使用鼠标拖动或调整时间轴来修改该动画。
网络面板(Network
)的幻灯片模式
这个功能好看但不实用
启动Network
面板下的Capture screenshots
就可以在页面加载时捕捉屏幕截图
复制调试数据
比较实用
通过全局的方法 copy() 演示
有时候想要复制打印出来的数据
这个样子模拟下
console
中打印了一堆数据,可以将它存储为一个全局变量。只需要右击它,并选择 “Store as global variable”选项。第一次使用的话,它会创建一个名为 temp1
的变量,第二次创建 temp2
,第三次 ... 。通过使用这些变量来操作对应的数据。
在网慢的设备和cpu差的设备进行测试
找到 Performance
在Chrome DevTools
中通过CMD/Ctrl + Shift + p
打开命令菜单。 然后命令行 Show Performance
CSS/JS 代码使用率
打开命令菜单行,输入 Drawer Show Coverage
点击reload
按钮开始检测
点击相应文件即可查看具体的覆盖情况(蓝色的为用到的代码,红色表示没有用到的代码,不同主题颜色不同)
保存资源中的图片或者复制成为base64
最后一个知识点,在webpack中设置source-map是可以直接在vue文件下打断点调试的
觉得不错就点赞关注收藏。
谷歌浏览器调试工具比较令人兴奋的实用操作(一定有你不知道的)相关推荐
- 能够提高开发效率的Eclipse实用操作
概要: 工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个"器".本文会从 Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟后,不用鼠标 ...
- rust睡觉按键没反应_腐蚀Rust有哪些实用操作 腐蚀Rust实用操作汇总-游侠网
腐蚀Rust很多新手玩家可能会在搜寻物资和对战过程中在无用的操作上浪费很多时间,不清楚这个游戏有哪些实用操作,今天小编为大家带来"喵呜经"分享的腐蚀Rust实用操作汇总,希望能够帮 ...
- Excel文件 实用操作小技巧
Excel文件实用 操作小技巧 目录 1.为Excel文件 添加打开密码 审阅 - 保护工作簿 - 保护结构和窗口-输入密码点击确定 2.为Excel文件 添加作者信息 在Exce文件 图标上右键 ...
- Word实用操作技巧之文字编辑(转)
Word实用操作技巧之文字编辑(转) 为了发挥Word 的强大功能,建议你在使用时试试以下的技巧,灵活运用这些技巧,可以使你迅速成为Word高手(这里我们以Word XP为例,其他版本请参考操作). ...
- 大学计算机基础实用教程重点知识,大学计算机基础实用操作教程
<高等学校计算机应用规划教材:大学计算机基础实用操作教程>紧抓基础操作,突出重点,遵循教学规律.对于计算机实际操作过程的细节不求面面俱到,但对其中典型的功能都做了比较详细的讲解.此外,&l ...
- CASS实用操作:绘制房子与绿地
在工作中有一些小技巧如果能够熟练使用可以提高我们的工作效率,今天来介绍一下cass的实用操作. 1 画房子 直接输入ff ,按照我们需要花房屋的结构直接选择需要画的房屋. 如果我们打点时有些地方无法打 ...
- Excel实用操作技巧
Excel实用操作技巧九则 1.快速输入大写中文数字 将光标移至需要输入大写数字的单元格中.利用数字小键盘在单元格中输入相应的小写数字(如12345).右击该单元格,点击"设置 ...
- 终身受益!10个Word实用操作技巧让你事半功倍
终身受益!10个Word实用操作技巧让你事半功倍 现在是讲效率的年代,使用Word来进行平时的办公处理也是一样,那么,我们怎样才能够在Word中"快"起来呢?那就请看看Word中快 ...
- redis实用操作小结
redis实用操作小结 键的命名 通常情况下是使用冒号来划分键名,如user:id:name 这些冒号在早期的Redis版本中作为存储命名空间数据的概念.在早期版本中,redis只支持字符串,如果想存 ...
最新文章
- outlook邮箱显示一直启动中_Outlook 2016 无法正常启动,显示“正在处理” 然而处理了好几天也没有处理完...
- 如果机房的线路老化了要怎么做才对?
- 使用二分查找向一个有序数组中插入一个数据
- 阿里高级技术专家方法论:如何写复杂业务代码?
- Java的设计模式 之 简单的工厂模式(一)
- Java用观察者模式重构复杂的业务代码
- matlab 中ctf,CTF中常见的web
- java ppt转图片,怎么用POI将PPT的内容转换为图片
- Java关于中查询数据时,报错java.lang.IllegalArgumentException: HOUR_OF_DAY: 0 -> 1的问题
- android手机邮箱权限,Android手机邮箱设置方法
- 考研复试问题之数据库概论
- 深度deepin文件管理上锁无法正常新建和保存文件的解决办法
- Spring Cloud微服务实战
- HTTP协议概述 基本概念说明
- OSChina 周四乱弹 ——跌倒,就在那附近找找好吃的。
- has an unsupported return type
- 试题 算法训练 后缀数组——最长重复子串
- Debian 下 mysql workbench 报 tables could not be fetched.
- Wormhole for mac(在Mac上控制iOS和Android设备)
- Pandas学习(3)——Pandas基础