CHROME开发者工具的小技巧(转载)

原文地址 https://coolshell.cn/articles/17634.html/comment-page-1#comments
Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，因此，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不必定，也欢迎你们补充交流。

话很少话，咱们开始。

代码格式化
有不少css/js的代码都会被 minify 掉，你能够点击代码窗口左下角的那个 { } 标签，chrome会帮你给格式化掉。

强制DOM状态
有些HTML的DOM是有状态的，好比 标签，其会有 active，hover， focus，visited这些状态，有时候，咱们的CSS会来定关不一样状态的样式，在分析网页查看网页上DOM的CSS样式时，咱们能够点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。

动画
如今的网页上都会有一些动画效果。在Chrome的开发者工具中，经过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。因而你就能够慢动做播放动画了（能够点选 25% 或 10%），而后，Chrome还能够帮你把动画录下来，你能够拉动动再画的过程，甚至能够作一些简单的修改。

直接编辑网页
在你的 console 里 输入下面的命令：

1
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中用 $0, $1, $2, $3, $4来访问。
你还可使用像jQuery那样的语法来得到DOM对象，如：$("#mydiv")
你还可以使用 $$(".class") 来选择全部知足条件的DOM对象。
你可使用 getEventListeners($("selector")) 来查看某个DOM对象上的事件（以下图所示）。

你还可使用 monitorEvents($("selector")) 来监控相关的事件。好比：
1
monitorEvents(document.body, "click");

Console中的一些函数
1）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的样式，以下所示：

1
console.log("%c左耳朵", "font-size:90px;color:#888")

因而，你能够定义一些相关的log函数，如：

1
2
3
4
5
6
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来打印，以下所示：

1
2
3
4
5
6
7
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，你就能够看到全部的快捷键了

若是你知道更多，也欢迎补充！

（全文完）