你不知道的Chrome开发者工具新功能

2017-07-11 +8 448568人围观 ,发现 9 个不明物体 工具资讯

相信对本文感兴趣的读者对于Chrome开发者工具的基本功能应该都比较熟悉:DOM查看器、样式面板、JavaScript控制台。但是Chrome开发者工具还有很多不太出名但绝对能够对调试、应用创建带来很大便利的功能。

一、黑色主题

Chrome开发者工具

Chrome的开发者工具有一个内置的黑色主题。点击开发者工具面板右上角三个点的图标,选择“设置(settings)”,可以看到切换主题的选项(“theme”中选择“dark”启用这一功能)。

代码写多了,总觉得黑色的主题顺眼很多,是不是看起来也更酷啦。

二、选择模式

Chrome开发者工具

谷歌开发者工具(DevTools)有很多选择方式,但其中最方便的是“选择模式”。

点击开发者工具面板左上角的鼠标按钮就可以激活这个工具(或者直接cmd+shift+c)。

激活后,鼠标在页面上滑动可以看到整个选项页面,选择其中一个元素进行检查。

如果你想快速查找页面上的某个元素,直接cmd+shift+c就可以打开开发者工具中的选择模式。

三、存储为全局变量

Chrome开发者工具

如果记录在控制台的对象有很多key或包含手动解析比较困难的值时,检查这些对象有时候会非常棘手。但是Chrome通过JavaScript让这个问题变得简单很多。

首先,在控制台中右击某个对象,选择“存储为全局变量(store as global variable)”。把某个对象存储为全局变量,并在被称为temp1的控制台中显示,接下来你就能通过JavaScript展开工作了。

四、动画工具

Chrome开发者工具

近期,Chrome团队又增加了一些调试和创建动画的新功能。

点击左上角“控制台(console)”按钮旁边三个点的下拉菜单,打开“Animations”面板,该功能能够帮你限制该网站上所有动画的播放速度。

也可以利用它停止页面上的所有动画。如果某个网站上都是动画内容,这个功能就能派上用场咯。

Chrome开发者工具

动画查看器使得每个属性的变化情况都在你的掌控之中

Chrome开发者工具

点击某个元素中transition属性的紫色曲线图标,可以看到这个动画的运动曲线,进而对这个属性进行微调。另外,你还可以使用箭头图标,对预设动画列表进行滚动显示,应用于你的元素中。

五、伪元素模拟

Chrome开发者工具

另一个设计元素样式的简便工具是元素状态模拟器,可以通过点击Style面板右上角的:hov图标来访问。

该工具能够帮助你模拟与这些选择器相关联的hover(鼠标经过的状态)、active(按下鼠标时的状态)、focused(元素获得光标焦点时使用的颜色,主要用于文本框输入文字是使用)及visited(鼠标点击后再次停留在上面的状态)的伪元素并查看样式。

Chrome开发者工具

为了增加伪状态的样式,我们可以添加一个新的选择器(通过 + 的图标)并在选择器字符串末尾添加:<state>

例如,通过 logo 类别为 li 添加hover规则,创建一个新的选择器——li.logo:hover并添加样式。

然后通过检查:hover元素状态测试样式,模拟该元素上的悬停。

六、实现CSS和JavaScript代码高亮

Chrome开发者工具

调试或查看最小化的JavaScript和CSS非常困难。但是Chrome开发者工具同样提供了一个简化这项工作的工具。

在“Sources”选项卡中打开一个最小化的文件后,您可以单击文件左下角的大括号图标,DevTools将进行代码高亮。

尽管某些信息(如变量名称)会在缩小过程中丢失,但这个工具还是能够同时与CSS文件及JavaScript兼容。

七、Alt + Up / Alt + Down

Chrome开发者工具

调试CSS时,你可以选择一个属性并用“上下键”来调整值。默认情况下,箭头键通过+/- 1调整值,即调整跨度为1。但是如果按住alt键,调整跨度能够缩小到0.1。调整分数值时,这个方法非常给力。

相反,如果你按住shift,调整跨度为10

八、保存日志(Preserve Log)

Chrome开发者工具

保存日志是一个能够在日志刷新间隙保留日志的复选框。在调试需要刷新页面的网站问题时,这个功能很管用,因为如果没有这个功能,在这个调试的过程中控制台的所有输出都会被清除。

启用此选项时,控制台中会显示一种新类型的“Navigation(导航)”日志,从而实现将页面刷新或导航事件显示到不同页面的目的。

九、Network(网络)+Log Filters(日志过滤器)

Chrome开发者工具

调试那些存在很多网络请求和控制台日志的应用程序时,首先过滤出特定类型的事件会省事儿很多。

Chrome具有一种支持很多不同属性的过滤语言,以及像 * 这样的操作符进行通配符匹配。

如果输入“-”,Chrome会显示一个typeahead,显示可以过滤的各种属性。你还可以切换“正则表达式”模式,对每行中显示的数据执行正则表达式匹配。

十、代码覆盖(Code Coverage)

Chrome开发者工具

代码覆盖功能可以帮助用户在运行Web应用程序时,查看每个JavaScript和CSS文件中哪些代码已经运行,哪些没有。当用户在处理一个比较复杂的长期项目时,这个工具能够使得死亡代码积累过程更为容易。

启用该功能前,首先应确保你用的是Chrome59或以上版本,然后转到“Coverage”选项卡。按住“record(记录)”开始使用你的应用程序。完成后,Chrome会向你显示会话期间运行的确切代码。

十一、程序调试问题

只有当你在自己的设备上运行应用时,开发者工具才能正常工作。

如有需要了解和处理用户在创建应用过程中碰到的报错和性能问题,可以试试LogRocket(本文作者出其不意抛出一个软广,但了解其它厂家的产品也不是件坏事儿)。

Chrome开发者工具

LogRocket是一个前端日志记录工具,能够按照用户需求不断回播报错。程序猿们无需再猜测错误产生原因或者要求用户截屏,只要通过LogRocket的重播功能就能确定出问题的地方。LogRocket几乎与所有应用程序兼容,不受框架限制。而且具备用于记录React、Angular、Vue.js中其余情景日志的插件。

LogRocket能够为应用程序设备记录控制台日志,例如带有header及body的网络请求/响应、浏览器元数据、Redux操作/状态和性能计时。

感谢阅读到这里。希望这些 DevTool 能大大减轻你的压力,分分钟让广大程序猿们写出更加优秀的应用。

*参考来源: freecodecamp,FB小编柚子编译,转载请注明来自FreeBuf(FreeBuf.COM)

这些评论亮了

  • Black-Hole (6级) FreeBuf专栏作者 回复
    freebuf是安全媒体,发布对这种类型的文章,是否有点欠缺考虑了
    )17( 亮了
  • 123123 回复
    还是那句话:这文章和安全有何关系
    )9( 亮了
发表评论

已有 9 条评论

取消
Loading...
css.php