话不多话，我们开始。

代码格式化

有很多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中用 $0, $1, $2, $3, $4来访问。

• 你还可以使用像jQuery那样的语法来获得DOM对象，如：$("#mydiv")

• 你还可使用 $$(".class") 来选择所有满足条件的DOM对象。

• 你可以使用 getEventListeners($("selector")) 来查看某个DOM对象上的事件（如下图所示）。

• 你还可以使用 monitorEvents($("selector")) 来监控相关的事件。比如：

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的样式，如下所示：

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中的格式化，你可以参看如下表格：

除了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，你就可以看到所有的快捷键了

如果你知道更多，也欢迎补充！

（全文完）

1）Firefox：Regular Expressions Tester

2）Chrome：Regular Expression Checker

在Google Chrome的开发站点上，又有了一个很热的BUG——Issue  41467（上一次的一热议的BUG是的《Go语言更名Issue 9》），这个BUG目前已被关闭。不过在其它地方还在热议中，如：Reddit.com。基本上来说，90%以上的程序员反对的，他们希望Google的Chrome可以给一个设置关闭或打开这一功能。

一些程序员觉得这是违反了RFC，并且觉得这是在向End User传播一种很不好的东西，那就是网址可以不用http://，这样一来会给程序员增加很多麻烦，比如：他们的程序无法使用http://这一关键字来检查用户的输出，等等。

iPhone浏览器的也是这样的， 不过当你把光标放到地址栏中，其会显示http://，广大程序员希望Chrome也实现这一方案。然而，Issue  41467目前的状态是“WontFix”，呵呵。

有人说，如果你在地址栏中直接输入网址，没有协议前缀，默认就是http://，Google用的就是这个特性，然后，你可以试试在地址栏中输入“ftp.gnu.org/gnu”，你会发现，自动加入的不是http://而是ftp://，呵呵。

有人说，既然你要省，不如也把www.和后面的.com加上/也省了，因为这些都是默认的嘛。直接打google就OK了。Chrome开发团队说，没有www.和.com/只能算是一个主机名，不能算是DNS域名。呵呵。

还有人说，搞这种隐藏的最恶心的就是Windows，隐藏文件后缀名，隐藏系统文件，太扯了，于是，像sexy_girls.jpg.exe，huge-tits.jpg.src这样玩意儿让某些电脑知识薄弱意志不坚定的人深受其害。

如果有空，请留下你的观点。