chromechrome 开发者模式为什么有

来源：蜘蛛抓取(WebSpider) 时间：2018-01-24 13:14 标签： chrome开发者

任何chrome 开发者模式都曾碰到这样的凊况：将视线从黑色主题的文本编辑器中跳转进入到Chrome的chrome 开发者模式工具会由于骤然的黑白交替而产生短暂的视觉不适。但所幸的是谷歌終于响应广大chrome 开发者模式的需求于今天宣布在浏览器的chrome 开发者模式工具中整合黑色主题。

本次更新的chrome 开发者模式工具采用了非常吸引人嘚黑色背景可调整的字体设置，且更新的黑色主题代码注释能够更好的凸显本次chrome 开发者模式工具更新还包含其他改善，例如对定制CSS变量和更智能的自动完成引擎等等目前黑色主题仅在Chrome Canary通道发布的，但是有望在未来几周随Chrome 50正式版发布

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

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

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

谷歌chrome 開发者模式工具（DevTools）有很多选择方式，但其中最方便的是“选择模式”

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

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

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

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

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

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

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

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

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

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

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

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

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

例如通过 logo 类别为 li 添加hover规则，创建一个新的选择器——）

我要回帖

更多关于 chrome开发者 的文章

 

随机推荐