003-CHROME开发者工具的小技巧
首先调试先进入到调试模式,快键键F12
1、代码格式化
有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个 { }
标签,chrome会帮你给格式化掉。
2、强制DOM状态
有些HTML的DOM是有状态的,比如<a> 标签,其会有 active,hover, focus,visited这些状态,有时候,我们的CSS会来定关不同状态的样式,在分析网页查看网页上DOM的CSS样式时,我们可以点击CSS样式上的 :hov
这个小按钮来强制这个DOM的状态。
3、动画
现在的网页上都会有一些动画效果。在Chrome的开发者工具中,通过右上角的菜单中的 More Tools
=> Animations
呼出相关的选项卡。于是你就可以慢动作播放动画了(可以点选 25%
或 10%
),然后,Chrome还可以帮你把动画录下来,你可以拉动动再画的过程,甚至可以做一些简单的修改。
4、直接编辑网页
在你的 console 里 输入下面的命令:
document.designMode = "on"
于是你就可以直接修改网页上的内容了。
P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L
(Windows下),CMD + K
(Mac下)
5、网络限速
你可以设置你的网络的访问速度来模拟一个网络很慢的情况。
network中如下 Custom自定义模拟就可以了
6、复制http请求
在 network选项卡里,点击 XHR 过滤相关的Ajax请求,然后在相关的请求上点鼠标右键,在菜单中选择: Copy
=> Copy as cURL
,然后就可以到你的命令行下去 执行 curl
的命令了。这个可以很容易做一些自动化的测试。
7、抓个带手机的截图
在device显示中,先选择一个手机,然后在右上角选 Show Device Frame
,然后你就看到手机的样子了,然后再到那个菜中中选 Capture snapshot,就可以抓下一个有手机样子的截图了。
8、设置断点
1》、js设置断点 ,source中找到即可
2》、给DOM设置断点
选中一个DOM,然后在右键菜单中选 Break on … 你可以看到如下三个选项:
3》、给XHR和Event Lisener设置断点
在 Sources 面页中,你可以看到右边的那堆break points中,除了上面我们说的给DOM设置断点,你还可以给XHR和Event Listener设置断点,载图如下:
9、关于Console技巧
1》、DOM操作
- chrome会帮你buffer 5个你查看过的DOM对象,你可以直接在Console中用 $0, $1, $2, $3, $4来访问。
- 你还可以使用像jQuery那样的语法来获得DOM对象,如:
$("#mydiv")
- 你还可使用
$$(".class")
来选择所有满足条件的DOM对象。
- 你可以使用
getEventListeners($("selector"))
来查看某个DOM对象上的事件(如下图所示)。 - 使用
monitorEvents($("selector"))
来监控相关的事件。比如: -
monitorEvents(document.body, "click");
2》、Console中的一些函数
1)monitor函数
使用 monitor函数来监控一函数,如下面的示例
2)copy函数
copy函数可以把一个变量的值copy到剪贴板上。
3)inspect函数
inspect函数可以让你控制台跳到你需要查看的对象上。如:
更多的函数请参数官方文档 – Using the Console / Command Line Reference
3》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)
4》、Console对象其他功能
- console对象除了上面的打日志的功能,其还有很多功能,比如:
- console.trace() 可以打出js的函数调用栈
- console.time() 和 console.timeEnd() 可以帮你计算一段代码间消耗的时间。
- console.profile() 和 console.profileEnd() 可以让你查看CPU的消耗。
- console.count() 可以让你看到相同的日志当前被打印的次数。
- console.assert(expression, object) 可以让你assert一个表达式
参看Google的官方文档 – Chrome DevTools
10、强刷
Developer Tools的时候,鼠标长按地址栏上的刷新按钮,会获得三个分别不同的刷新选项:正常重新加载,硬性重新加载和清空缓存并硬性重新加载。最后一个刷新选项对付缓存特别有用。
参看地址:
https://coolshell.cn/articles/17634.html
相关文章
- Chrome开发者工具详解
- SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息
- SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
- Web 应用中的 RAIL 模型 和 Chrome 开发者工具 Performances 面板对其的度量方法
- 使用 Chrome 开发者工具的 Memory 标签页分析内存泄漏问题
- 在 Chrome 开发者工具里通过 network 选项模拟网站的离线访问模式
- 如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
- Chrome 开发者工具 Initiator 面板单击后看不到 JavaScript 源代码的解决方法
- Chrome开发者工具对Vue应用的支持
- Chrome开发者工具一个有用的快捷键组合:Ctrl+Shift+E
- 介绍一个Material设计风格的Chrome开发者工具增强扩展
- Chrome开发者工具关于网络请求的一个隐藏技能
- 使用 Chrome 开发者工具的 Memory 标签页分析内存泄漏问题
- 如何在Chrome开发者工具里找出SAP Fiori frontend server的systen ID
- 使用Chrome开发者工具分析JavaScript garbage collector(垃圾回收器)的实现原理
- 利用Chrome开发者工具memory comparison分析一个时间段内的JavaScript代码内存占用率
- 继承的CSS类在Chrome开发者工具里的显示
- 小技巧:Chrome开发者工具里的Alt+单击
- 介绍一个Material设计风格的Chrome开发者工具增强扩展