最新消息:一个专业的撸码分享平台,代码哥在这里教你撸代码,赶快收藏吧!

Chrome开发者工具的小技巧

业界动态 daimage 273浏览 0评论

  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

转载请注明:代码哥 » Chrome开发者工具的小技巧

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
血压计