微信号:phpdaily

介绍:PHP在线专注于PHP编程语言学习,PHP开发经验分享,工作问题解决以及PHP在线技能测评等多功能为一体的服务系统,希望给工作学习中的PHPER带来些帮助。

CHROME开发者工具的小技巧

2017-09-25 08:00 陈皓

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

1.代码格式化

有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个 { }  标签,chrome会帮你给格式化掉。

2.强制DOM状态

有些HTML的DOM是有状态的,比如<a> 标签,其会有 active,hover, focus,visited这些状态,有时候,我们的CSS会来定关不同状态的样式,在分析网页查看网页上DOM的CSS样式时,我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。

3.动画


4.直接网页编辑

在你的 console 里 输入下面的命令:

document.designMode = "on"


于是你就可以直接修改网页上的内容了。

P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L(Windows下),CMD + K (Mac下)

5.网络限速

你可以设置你的网络的访问速度来模拟一个网络很慢的情况。


 6.复制HTTP请求

这个是我很喜欢 的一个功能,你可以在 network选项卡里,点击 XHR 过滤相关的Ajax请求,然后在相关的请求上点鼠标右键,在菜单中选择: Copy => Copy as cURL,然后就可以到你的命令行下去 执行 curl 的命令了。这个可以很容易做一些自动化的测试。

友情提示:这个操作有可能会把你的个人隐私信息复制出去,比如你个人登录后的cookie。

7.设置断点


除了给Javascript的源代码上设置断点调试,你还可以:


给DOM设置断点,选中一个DOM,然后在右键菜单中选 Break on … 你可以看到如下三个选项:


给XHR和Event Lisener设置断点

在 Sources 面页中,你可以看到右边的那堆break points中,除了上面我们说的给DOM设置断点,你还可以给XHR和Event Listener设置断点,载图如下:



更多精彩,敬请关注





 
PHP在线 更多文章 缓存更新的套路 Javascript权威指南学习总结 mysql索引的类型和优缺点 网站大规模并发处理方案:电商秒杀与抢购 Session原理简述
猜您喜欢 【神州神码】TSM运维管理系统介绍 安卓还能火多久?现在学晚不晚? 为什么要写技术博客 合天网安实验室给MottoIN用户发福利啦! UCloud 东南亚数据中心正式上线!