Chrome 开发者工具的小技巧
来源:陈皓 - 酷壳 CoolShell ;链接:
https://coolshell.cn/articles/17634.html
Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充交流。
代码格式化
有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个 { }
标签,chrome会帮你给格式化掉。
强制DOM状态
有些HTML的DOM是有状态的,比如<a> 标签,其会有 active,hover, focus,visited这些状态,有时候,我们的CSS会来定关不同状态的样式,在分析网页查看网页上DOM的CSS样式时,我们可以点击CSS样式上的 :hov
这个小按钮来强制这个DOM的状态。
动画
现在的网页上都会有一些动画效果。在Chrome的开发者工具中,通过右上角的菜单中的 More Tools
=> Animations
呼出相关的选项卡。于是你就可以慢动作播放动画了(可以点选 25%
或 10%
),然后,Chrome还可以帮你把动画录下来,你可以拉动动再画的过程,甚至可以做一些简单的修改。
直接编辑网页
在你的 console 里 输入下面的命令:
document.designMode = "on";
于是你就可以直接修改网页上的内容了。
P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L
(Windows下),CMD + K
(Mac下)
网络限速
你可以设置你的网络的访问速度来模拟一个网络很慢的情况。
复制HTTP请求
这个是我很喜欢 的一个功能,你可以在 network选项卡里,点击 XHR 过滤相关的Ajax请求,然后在相关的请求上点鼠标右键,在菜单中选择: Copy
=> Copy as cURL
,然后就可以到你的命令行下去 执行 curl
的命令了。这个可以很容易做一些自动化的测试。
友情提示:这个操作有可能会把你的个人隐私信息复制出去,比如你个人登录后的cookie。
抓个带手机的图
这个可能有点无聊了,不过我觉得挺有意思的。
在device显示中,先选择一个手机,然后在右上角选 Show Device Frame
,然后你就看到手机的样子了,然后再到那个菜中中选 Capture snapshot,就可以抓下一个有手机样子的截图了。
我抓的图如下(当然,不是所有的手机都有frame的)
设置断点
除了给Javascript的源代码上设置断点调试,你还可以:
给DOM设置断点
选中一个DOM,然后在右键菜单中选 Break on ... 你可以看到如下三个选项:
给XHR和Event Lisener设置断点
在 Sources 面页中,你可以看到右边的那堆break points中,除了上面我们说的给DOM设置断点,你还可以给XHR和Event Listener设置断点,载图如下:
关于Console中的技巧
DOM操作
chrome会帮你buffer 5个你查看过的DOM对象,你可以直接在Console中用 1, 3, $4来访问。
你还可以使用像jQuery那样的语法来获得DOM对象,如:
$("#mydiv")
你还可使用
$$(".class")
来选择所有满足条件的DOM对象。你可以使用
getEventListeners($("selector"))
来查看某个DOM对象上的事件(如下图所示)。
- 你还可以使用
monitorEvents($("selector"))
来监控相关的事件。比如:
monitorEvents(document.body, "click");
Console中的一些函数
1)monitor函数
使用 monitor函数来监控一函数,如下面的示例
monitor函数
2)copy函数
copy函数可以把一个变量的值copy到剪贴板上。
3)inspect函数
inspect函数可以让你控制台跳到你需要查看的对象上。如:
更多的函数请参数官方文档:Using the Console / Command Line Reference
Console的输出
我们知道,除了console.log
之外,还有console.debug
,console.info
,console.warn
,console.error
这些不同级别的输出。另外一个鲜为人知的功能是,console.log
中,你还可以对输出的文本加上css的样式,如下所示:
console.log("%c左耳朵", "font-size:90px;color:#888");
于是,你可以定义一些相关的log函数,如:
console.todo = function( msg){console.log( '%c%s %s %s', 'font-size:20px; color:yellow; background-color: blue;', '--', msg, '--');
}
console.important = function( msg){console.log( '%c%s %s %s', 'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;', '--', msg, '--');
}
关于console.log中的格式化,你可以参看如下表格:
指示符 | 输出 |
---|---|
%s | 格式化输出一个字符串变量 |
%i or %d | 格式化输出一个整型变量的值 |
%f | 格式化输出一个浮点数变量的值 |
%o | 格式化输出一个DOM对象 |
%O | 格式化输出一个Javascript对象 |
%c | 为后面的字符串加上CSS样式 |
除了console.log打印js的数组,你还可以使用console.table来打印,如下所示:
var pets = [{ animal: 'Horse', name: 'Pony', age: 23 },{ animal: 'Dog', name: 'Snoopy', age: 13 },{ animal: 'Cat', name: 'Tom', age: 18 },{ animal: 'Mouse', name: 'Jerry', age: 12}
];
console.table(pets)
关于console对象
- console对象除了上面的打日志的功能,其还有很多功能,比如:
- console.trace() 可以打出js的函数调用栈
- console.time() 和 console.timeEnd() 可以帮你计算一段代码间消耗的时间。
- console.profile() 和 console.profileEnd() 可以让你查看CPU的消耗。
- console.count() 可以让你看到相同的日志当前被打印的次数。
- console.assert(expression, object) 可以让你assert一个表达式
这些东西都可以看看Google的Console API的文档
。
其实,还有很多东西,你可以参看Google的官方文档 - Chrome DevTools
关于快捷键
点击在 DevTools的右上角的那三个坚排的小点,你会看到一个菜单,点选 Shortcuts
,你就可以看到所有的快捷键了
如果你知道更多,也欢迎补充!(全文完)
欢迎关注我的个人公众号:超级码里奥
如果这对您有帮助,欢迎点赞和分享,转载请注明出处
Chrome 开发者工具的小技巧相关推荐
- Chrome开发者工具使用小技巧
正所谓不用Chrome的开发者不合格,不晓得Chrome开发者工具进行web调试也不是合格的web开发者.所以本文总结了Chrome开发者工具使用的一些小技巧. 一:首先来说下如何打开开发者工具吧: ...
- CHROME开发者工具的小技巧
Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充 ...
- Chrome 35个开发者工具的小技巧
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具.大多数可能熟悉关于chorme的许多特点,例如使用c ...
- chrome开发者工具各种骚技巧
作者:老姚 链接:https://juejin.im/post/5af53823f265da0b75282b0f 对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了.最近大神(@ ...
- Chrome 开发者工具各种骚技巧
点击上方的终端研发部,右上角选择"设为星标" 作者:老姚 链接:https://juejin.cn/post/6844903604839514125 前言 对于每个前端从业者来说, ...
- Jerry和您聊聊Chrome开发者工具
Chrome开发者工具是Jerry日常工作使用的三大调试器之一.虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用.不信? 用Chrome打开我们常用的网站,按F12, ...
- 小技巧:Chrome开发者工具里的Alt+单击
在Chrome开发者工具里单击一个元素左边的小三角符号,只会展开其继承结构的第一层直接子节点: 而Alt+Click,可以将该元素第一个子节点,以及该子节点原型链上的节点全部展开.将下图和上图进行比较 ...
- Chrome开发者工具使用console.trace的一个小技巧
我们在Chrome开发者工具里调试的时候,有时需要把函数执行的调用堆栈信息保存到本地以便进一步处理: 然而Call stack列表下的数据无法复制粘贴. 其实,我们只需要在console控制台里,输入 ...
- chrome开发者工具功能拾遗:Sources面板篇
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能.也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工 ...
最新文章
- 大白话带你认识Kafka
- SSH框架搭建问题总结
- 深度丨深度强化学习研究的短期悲观与长期乐观(长文)
- 如何通过终端快速删除文件和目录(bash shell)[关闭]
- RPM 包相关命令详解
- 成都东万计算机学校,东兴区东方科技职业技术学校
- 2016微软开发者峰会在京举办 纳德拉要来做演讲
- openshift_红帽Openshift:入门–云中的Java EE6
- 人类跌落梦境显示无法连接服务器,人类跌落梦境手游进不去闪退怎么办 人类跌落梦境无法进入解决方法...
- Linux定时任务:crontab安装与检查
- elasticsearch配置优化
- [转载] Python: fnmatch模块 (Unix B-Shell通配符的文件名匹配)
- sql 求相交的行_SQL相交
- 机器学习实现计算不规则图形面积_【名师课堂】苏教数学五年级上2.11校园绿地面积...
- Java利用poi-tl实现富文本HTML转Word
- opencv+python图像匹配——模版匹配、特征点匹配
- 如何斩获KDD Cup 2020两冠一季?美团广告团队公开解决方案
- html图片有的不显示不出来的,css背景图片不显示有哪些原因?
- 产品学习:智能生产调度管理系统
- 01 ArcGIS空间分析--水文分析--利用水文分析方法提取山谷山脊线