CHROME开发者工具的小技巧

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(phpdaily)

原文发表时间:2017-09-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

让chrome插件在手机上跑起来

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 创建一个chrome的插件,并让这个插件能够作为一个app,运行在终...

1705
来自专栏HTML5学堂

移动端及时调试工具 - weinre使用方法

HTML5学堂:在前一篇文章当中,我们借着weinre讲解了NodeJS中的一些简单命令,也讲解了weinre的安装方法,今天我们把weinre的使用“完结”掉...

2653
来自专栏FreeBuf

如何创建Powershell持久隐蔽后门

用户开机后每次运行特定的快捷方式文件时触发一段恶意的powershell 代码,原始应用程序仍然启动,原始图标保留,并且没有powershell.exe窗口弹出...

1907
来自专栏州的先生

Python GUI教程(五):通过Qt设计师在GUI中添加窗口部件

1183
来自专栏Java后端技术

HTML标记之a标签

   1.内部链接(当前文档与目标文档在同一站点内)<a href=”目标文档位置及全称”></a>;    2.外部链接(当前文档与目标文档不在同一站点内)<...

644
来自专栏有趣的Python

7- Flask构建弹幕微电影网站-网站页面搭建前端搭建404页面搭建

已上线演示地址: http://movie.mtianyan.cn 项目源码地址:https://github.com/mtianyan/movie_proj...

3187
来自专栏ionic3+

Cordova@6.4.0以上灵活修改配置

还记得我在此文【技巧】ionic3优雅解决启动前、后黑白屏问题中添加了一个勾子插件cordova-custom-config来修改配置的主题。

764
来自专栏张戈的专栏

WordPress评论滑动/拉链解锁myQaptcha代码版及部署方法

虽然博客取消了文章页面评论,仅剩下留言板的评论,但张戈还是要尽力做到尽善尽美,将用户体验做到极致!在防止垃圾评论的同时,尽量让评论变得更加简单快捷。 于是就想到...

3489
来自专栏无所事事者爱嘲笑

ios真机中Text组件出现多余边框

1384
来自专栏后端技术探索

三个案例看 Nginx 配置安全

之前在Sec-News中推荐了一个开源程序,作用是来检测 Nginx 配置文件中存在的问题。正好 Pwnhub 上周的比赛也出现了一道题,包含由 Nginx 配...

371

扫描关注云+社区