相信对本文感兴趣的读者对于Chrome开发者工具的基本功能应该都比较熟悉:DOM查看器、样式面板、JavaScript控制台。但是Chrome开发者工具还有很多不太出名但绝对能够对调试、应用创建带来很大便利的功能。
一、黑色主题
代码写多了,总觉得黑色的主题顺眼很多,是不是看起来也更酷啦。
二、选择模式
谷歌开发者工具(DevTools)有很多选择方式,但其中最方便的是“选择模式”。
点击开发者工具面板左上角的鼠标按钮就可以激活这个工具(或者直接cmd+shift+c)。
激活后,鼠标在页面上滑动可以看到整个选项页面,选择其中一个元素进行检查。
如果你想快速查找页面上的某个元素,直接cmd+shift+c就可以打开开发者工具中的选择模式。
三、存储为全局变量
如果记录在控制台的对象有很多key或包含手动解析比较困难的值时,检查这些对象有时候会非常棘手。但是Chrome通过JavaScript让这个问题变得简单很多。
首先,在控制台中右击某个对象,选择“存储为全局变量(store as global variable)”。把某个对象存储为全局变量,并在被称为temp1的控制台中显示,接下来你就能通过JavaScript展开工作了。
四、动画工具
近期,Chrome团队又增加了一些调试和创建动画的新功能。
点击左上角“控制台(console)”按钮旁边三个点的下拉菜单,打开“Animations”面板,该功能能够帮你限制该网站上所有动画的播放速度。
也可以利用它停止页面上的所有动画。如果某个网站上都是动画内容,这个功能就能派上用场咯。
动画查看器使得每个属性的变化情况都在你的掌控之中
点击某个元素中transition属性的紫色曲线图标,可以看到这个动画的运动曲线,进而对这个属性进行微调。另外,你还可以使用箭头图标,对预设动画列表进行滚动显示,应用于你的元素中。
五、伪元素模拟
另一个设计元素样式的简便工具是元素状态模拟器,可以通过点击Style面板右上角的:hov图标来访问。
该工具能够帮助你模拟与这些选择器相关联的hover(鼠标经过的状态)、active(按下鼠标时的状态)、focused(元素获得光标焦点时使用的颜色,主要用于文本框输入文字是使用)及visited(鼠标点击后再次停留在上面的状态)的伪元素并查看样式。
为了增加伪状态的样式,我们可以添加一个新的选择器(通过 + 的图标)并在选择器字符串末尾添加:
例如,通过 logo 类别为 li 添加hover规则,创建一个新的选择器——li.logo:hover并添加样式。
然后通过检查:hover元素状态测试样式,模拟该元素上的悬停。
六、实现CSS和JavaScript代码高亮
调试或查看最小化的JavaScript和CSS非常困难。但是Chrome开发者工具同样提供了一个简化这项工作的工具。
在“Sources”选项卡中打开一个最小化的文件后,您可以单击文件左下角的大括号图标,DevTools将进行代码高亮。
尽管某些信息(如变量名称)会在缩小过程中丢失,但这个工具还是能够同时与CSS文件及JavaScript兼容。
七、Alt + Up / Alt + Down
(编辑:mao35 来源:网络整理)
票
共有0位网友发表了评论 查看完整内容