[转帖]CHROME开发者工具的小技巧
CHROME开发者工具的小技巧
https://coolshell.cn/articles/17634.html 需要仔细学习看一看呢.
2017年01月19日 陈皓 评论 58 条评论 64,083 人阅读
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 里 输入下面的命令:
1
|
document.designMode = "on" |
于是你就可以直接修改网页上的内容了。
P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L
(Windows下),CMD + K
(Mac下)
网络限速
你可以设置你的网络的访问速度来模拟一个网络很慢的情况。
复制HTTP请求
这个是我很喜欢 的一个功能,你可以在 network选项卡里,点击 XHR 过滤相关的Ajax请求,然后在相关的请求上点鼠标右键,在菜单中选择: Copy
=> Copy as cURL
,然后就可以到你的命令行下去 执行 curl
的命令了。这个可以很容易做一些自动化的测试。
友情提示:这个操作有可能会把你的个人隐私信息复制出去,比如你个人登录后的cookie。
抓个带手机的图
这个可能有点无聊了,不过我觉得挺有意思的。
在device显示中,先选择一个手机,然后在右上角选 Show Device Frame
,然后你就看到手机的样子了,然后再到那个菜中中选 Capture snapshot,就可以抓下一个有手机样子的截图了。
我抓的图如下(当然,不是所有的手机都有frame的)
设置断点
除了给Javascript的源代码上设置断点调试,你还可以:
给DOM设置断点
选中一个DOM,然后在右键菜单中选 Break on … 你可以看到如下三个选项:
给XHR和Event Lisener设置断点
在 Sources 面页中,你可以看到右边的那堆break points中,除了上面我们说的给DOM设置断点,你还可以给XHR和Event Listener设置断点,载图如下:
关于Console中的技巧
DOM操作
- chrome会帮你buffer 5个你查看过的DOM对象,你可以直接在Console中用 $0, $1, $2, $3, $4来访问。
- 你还可以使用像jQuery那样的语法来获得DOM对象,如:
$("#mydiv")
- 你还可使用
$$(".class")
来选择所有满足条件的DOM对象。
- 你可以使用
getEventListeners($("selector"))
来查看某个DOM对象上的事件(如下图所示)。
- 你还可以使用
monitorEvents($("selector"))
来监控相关的事件。比如:
1
|
monitorEvents(document.body, "click" ); |
Console中的一些函数
1)monitor函数
使用 monitor函数来监控一函数,如下面的示例
2)copy函数
copy函数可以把一个变量的值copy到剪贴板上。
3)inspect函数
inspect函数可以让你控制台跳到你需要查看的对象上。如:
更多的函数请参数官方文档 – Using the Console / Command Line Reference
Console的输出
我们知道,除了console.log
之外,还有console.debug
,console.info
,console.warn
,console.error
这些不同级别的输出。另外一个鲜为人知的功能是,console.log
中,你还可以对输出的文本加上css的样式,如下所示:
1
|
console.log( "%c左耳朵" , "font-size:90px;color:#888" ) |
于是,你可以定义一些相关的log函数,如:
1
2
3
4
5
6
|
console.todo = function ( msg){ console.log( '%c%s %s %s' , 'font-size:20px; color:yellow; ' , '--' , msg, '--' ); } console.important = function ( msg){ console.log( '%c%s %s %s' , 'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;' , '--' , msg, '--' ); } |
关于console.log中的格式化,你可以参看如下表格:
指示符 | 输出 |
%s | 格式化输出一个字符串变量。 |
%i or %d | 格式化输出一个整型变量的值。 |
%f | 格式化输出一个浮点数变量的值。 |
%o | 格式化输出一个DOM对象。 |
%O | 格式化输出一个Javascript对象。 |
%c | 为后面的字符串加上CSS样式 |
除了console.log打印js的数组,你还可以使用console.table来打印,如下所示:
1
2
3
4
5
6
7
|
var pets = [ { animal: 'Horse' , name: 'Pony' , age: 23 }, { animal: 'Dog' , name: 'Snoopy' , age: 13 }, { animal: 'Cat' , name: 'Tom' , age: 18 }, { animal: 'Mouse' , name: 'Jerry' , age: 12} ]; console.table(pets) |
关于console对象
- console对象除了上面的打日志的功能,其还有很多功能,比如:
- console.trace() 可以打出js的函数调用栈
- console.time() 和 console.timeEnd() 可以帮你计算一段代码间消耗的时间。
- console.profile() 和 console.profileEnd() 可以让你查看CPU的消耗。
- console.count() 可以让你看到相同的日志当前被打印的次数。
- console.assert(expression, object) 可以让你assert一个表达式
这些东西都可以看看Google的Console API的文档。
其实,还有很多东西,你可以参看Google的官方文档 – Chrome DevTools
关于快捷键
点击在 DevTools的右上角的那三个坚排的小点,你会看到一个菜单,点选 Shortcuts
,你就可以看到所有的快捷键了
如果你知道更多,也欢迎补充!
(全文完)
[转帖]CHROME开发者工具的小技巧的更多相关文章
- CHROME开发者工具的小技巧
我猜不能转载,但是必须分享. http://coolshell.cn/articles/17634.html
- Chrome 35个开发者工具的小技巧
来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览 ...
- 003-CHROME开发者工具的小技巧
首先调试先进入到调试模式,快键键F12 1.代码格式化 有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个 { } 标签,chrome会帮你给格式化掉. 2.强制DOM ...
- 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧
摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...
- Jerry和您聊聊Chrome开发者工具
Chrome开发者工具是Jerry日常工作使用的三大调试器之一.虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用.不信? 用Chrome打开我们常用的网站,按F12, ...
- 【Tools】Chrome开发者工具详解
作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...
- Chrome 的 100 个小技巧 中文版
英文原版<100 Tips For Chrome, Chrome OS and ChromeBook Users>作者博客 - chromestory.com 本文是对<100 Ti ...
- 用Chrome开发者工具做JavaScript性能分析
来源: http://blog.jobbole.com/31178/ 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩J ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...
随机推荐
- Windows 10 Java开发环境配置
一.JDK下载 安装java开发环境,第一步就是下载jdk安装包.打开浏览器进入oracle官网下载.这里注意jdk和jre的区别,jdk(java develop environment)是java ...
- 谷歌移动UI框架Flutter入门
引言 作为Android开发人员,很有必要学习一下Flutter,那么Flutter是什么呢?它到底有什么作用呢?我们一一来揭晓. Flutter是谷歌的移动UI框架,可以快速在iOS和Android ...
- git tag介绍
我们常常在代码发版时,使用git 创建一个tag ,这样一个不可修改的历史代码版本就像被我们封存起来一样,不论是运维发布拉取,或者以后的代码版本管理,都是十分方便的. git的tag功能git 下打标 ...
- Linux-CentOS-Nginx安装
原文转自 jerryhe326:https://www.cnblogs.com/jerrypro/p/7062101.html 一.安装准备 首先由于nginx的一些模块依赖一些lib库,所以在安装n ...
- 3-1 Pandas-概述
Pandas章节应用的数据可以在以下链接下载: https://files.cnblogs.com/files/AI-robort/Titanic_Data-master.zip Pandas:数据分 ...
- rsync 服务端和客户端 简单配置
环境:Centos 6.9 两台服务器,A(192.168.223.129) 和 B(192.168.223.130).A 作为服务端,B作为客户端从A服务器同步目录.把A的/usr/src 目录下的 ...
- Confluence 6.9.0 安装
平台环境:centos 7.6 数据库版本:mysql-5.7.26,提前安装好,安装步骤略. 软件版本:Confluence6.9.0 所需软件:提前下载到本地电脑 atlassian-conflu ...
- Shel脚本-初步入门之《04》
Shel脚本-初步入门-04 脚本语言的种类 4.脚本语言的种类 4.1 Shell 脚本语言的种类 Shell 脚本语言是弱类型语言(无须定义变量的类型即可使用),在 Unix/Linux 中主要有 ...
- Linux---文件压缩与解压缩命令
压缩格式: zip.gz.bz2.tar .tar.gz.tar.bz2.tar.xz.xz.z 最常用的是.tar.gz格式和.tar.bz2格式 1.zip格式 命令 说明 zip 压缩文件名 ...
- docker学习12-docker快速搭建禅道环境
前言 bug管理系统是每个公司测试团队必备的,当去一个新的公司组建一个测试团队的时候,需快读搭建一套bug管理系统,使用docker搭建禅道就非常方便. 拉取镜像 先拉取zentao镜像,镜像地址ht ...