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 条评论
登录 后参与评论

相关文章

来自专栏Nian糕的私人厨房

Vue2.0 路由配置及Tab组件开发

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

783
来自专栏Eugene's Blog

php文件包含漏洞分类目录文章标签友情链接联系我们

942
来自专栏技术博文

Linux系统中ls命令用法详解

linux系统中ls命令的用法 ls命令是linux下最常用的命令。ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单,如果ls指定其他目录,那么就...

3054
来自专栏吴伟祥

Linux系统管理(六) 原

进程是正在执行的一个程序或命令,每一个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源。

984
来自专栏Python中文社区

Django博客教程(五):处理 http 请求完全解读

專 欄 ❈追梦人物,Python中文社区专栏作者。电子科技大学计算机学院研究生,从事大数据分析研究方向。主要使用 Python 语言进行相关数据的分析,熟练使...

23010
来自专栏信安之路

PHP 文件包含漏洞姿势总结

文件包含漏洞的产生原因是在通过 PHP 的函数引入文件时,由于传入的文件名没有经过合理的校验,从而操作了预想之外的文件,就可能导致意外的文件泄露甚至恶意的代码注...

1100
来自专栏菩提树下的杨过

在silverlight中利用socket发送图片或文件

silverlight中的socket通讯支持,让sl开发基于web的聊天工具成为了可能,后来OpenFileDialog,SaveFileDialog的出现,...

2075
来自专栏前端杂货铺

node中创建服务进程

背景 在node工程部署中,常常涉及到三方:本地客户端、跳板机和服务器(集群)。在通过git触发gitlab hook脚本后,需要在跳板机中执行相应的ssh命令...

2816
来自专栏奔跑的蛙牛技术博客

Angular路由

1. reload方法用于刷新当前文档,不从缓存中读取,走一遍服务器。使用reload页面内的表单可能会重新提交

784
来自专栏沈唁志

各种IE(IE6-IE10)兼容问题一行代码搞定

1403

扫码关注云+社区