Chrome开发者工具的小技巧

  Chrome 的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充交流。

  话不多话,我们开始。

  代码格式化

  有很多 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"

来自: coolshell.cn

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: