原文地址https://coolshell.cn/articles/17634.html/comment-page-1#commentsChrome开发者工具是非常强大的东西，相信程序员们并不陌生，但是有些小功能可能不为大众所知，所以写这篇文章来罗列你可能不知道的功能。有些功能可能比较实用，有些则不一定。欢迎大家补充交流。话不多说，让我们开始吧。代码格式化有很多css/js代码会被压缩，你可以点击代码窗口左下角的{}标签，chrome会帮你格式化。强制DOM状态一些HTMLDOM是有状态的，例如标签，它们具有活动、悬停、焦点和访问状态。有时候，我们的CSS会决定不同状态的样式。在分析网页时，查看网页CSS样式上的DOM，我们可以点击CSS样式上的小按钮:hov强制DOM的状态。动画现在网页上会有一些动画效果。在Chrome的开发者工具中，通过右上角的MoreTools=>Animations调出相关的tab。所以你可以慢动作播放动画（你可以点击25%或者10%），然后，Chrome还可以帮你录制动画，你可以拉动画画的过程，甚至可以做一些简单的修改。直接编辑网页在你的控制台输入以下命令：1document.designMode="on"然后你就可以直接修改网页上的内容了。附言下面的屏幕截图还显示了如何清除控制台的示例。你可以输入clear()或者按Ctrl+L（Windows下），CMD+K（Mac下）网络限速你可以设置你的网络的访问速度来模拟网络很慢的情况。CopyHTTPrequest这是我非常喜欢的一个特性。你可以在网络选项卡中点击XHR来过滤相关的Ajax请求，然后右键点击相关的请求，在菜单中选择：Copy=>CopyascURL，然后就可以到你的命令行执行curl命令了。这可以通过一些自动化测试轻松完成。友情提示：该操作可能会复制您的个人隐私信息，例如您的个人登录cookie。用手机抓图可能有点无聊，但我觉得挺有意思的。在设备显示中，先选择一个手机，然后选择右上角的ShowDeviceFrame，然后就可以看到手机的外观，然后在那个菜单中选择Capturesnapshot，就可以截图了手机外观。我截取的图片如下（当然不是所有手机都有边框）。设置断点除了在Javascript的源代码上设置断点进行调试外，还可以：为DOM设置断点选择一个DOM，然后在右键菜单中选择Breakon...可以看到如下三个选项：为XHR和EventListener设置断点在Sources页面，可以看到右侧的断点，除了我们上面提到的为DOM设置断点外，你还可以为XHR和EventListener设置断点，如图下图：关于ConsoleDOM操作的技巧chrome会帮你缓存5个你查看过的DOM对象，你可以直接在Console中使用$0,$1,$2,$3,$4来访问。你也可以使用类似jQuery的语法来获取DOM对象，例如：$("#mydiv")你也可以使用$$(".class")来选择所有满足条件的DOM对象。您可以使用getEventListeners($("selector"))查看DOM对象上的事件（如下图所示）。您还可以使用monitorEvents($("selector"))来监视相关事件。例如：1monitorEvents(document.body,"click");Console中的一些函数1)monitor函数使用monitor函数来监视一个函数，如下例2)copy函数copy函数可以将一个变量的值复制到上级剪贴板。3)inspect函数inspect函数允许你在控制台中跳转到你需要查看的对象。例如：更多功能请参考官方文档-使用控制台/命令行参考控制台输出我们知道除了console.log，还有不同级别的console.debug、console.info、console.warn,console.error输出。还有一个鲜为人知的功能是在console.log中，还可以给输出的文字添加css样式，如下图：1console.log("%cleftear","font-size:90px;color:#888")所以，你可以定义一些相关的日志函数，比如：123456console.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或%d格式化整数变量的值。%f格式化浮点变量的值。%o格式化输出一个DOM对象。%O格式化输出一个Javascript对象。%c为以下字符串添加CSS样式除了console.log打印js数组外，还可以使用console.table打印，如下图：1234567varpets=[{animal:'Horse',name:'Pony',age:23},{animal:'Dog',name:'Snoopy',age:13},{animal:'Cat',name:'Tom',age:18},{animal:'Mouse',name:'杰瑞'，年龄：12}];console.table(pets)关于console对象console对象除了上面的logging功能外还有很多功能，例如：console.trace()可以显示js的函数调用栈console.time()和console.timeEnd()可以帮你计算一段代码之间花费的时间。console.profile()和console.profileEnd()允许您查看CPU消耗。console.count()允许您查看当前打印相同日志的次数。console.assert(expression,object)允许你断言一个表达式。您可以查看Google的ConsoleAPI文档了解这些内容。其实还有很多，可以参考谷歌官方文档——ChromeDevTools关于快捷键点击DevTools右上角的三个点，会看到一个菜单，点击Shortcuts，可以看到所有的快捷键键。如果你知道更多，欢迎补充！（全文）
