你可能不知道的Chrome-devtools用法总结
文章同步于 Github blog
前言
作为一名前端从业者,Chrome-devtools
是最常用的工具之一。以前一直还觉得自己的这一块还是比较熟悉的,结果偶然看到了Chrome-devtools
的文档之后,才发现还有这么多强大、炫酷,但是相对冷门的用法,觉得有必要来一次梳理和总结。
持续更新中......
常用快捷键
- 在 Mac 上使用
Cmd + Shift + C)
在审查模式下打开开发者工具或是在开发者工具已经打开的情况下开启查阅选项。 - 在Source选项,
Cmd + o (Mac OS X)
可以搜索文件,Cmd + Shift + o (Mac OS X)
搜索文件中的对应函数/特定选择器的一个选择框。 Cmd + L (Mac OS X)
跳转到指定行号。- 要打开抽屉式控制台,你需要在键盘上按下
Esc
键或者点击开发者工具窗口右上角的 Show Drawer 按钮。
Snippets
Snippets是一个新的可以在这个开发流程中使用的开发者工具,它允许你在源面板中创建,存储和执行 JavaScript。
- 书签 所有你的书签可以作为片段进行存储,特别是那些你可能想编辑的。
- 实用工具 调试工具可以和当前页面进行交互,并且可以保存和调试。一个社区企划的列表已经被提供。
- Debugging Snippets 提供了一个语法高亮显示并且可持续的多行控制台,这样使得调试代码比单行要更加便捷。
- Monkey-patching code 你想要在运行时修复的代码可以通过
Snipptes
来完成,尽管多数时候你可能只是在源面板中实时编辑代码。
如果你想在控制台中,执行 Snippet
的一些特殊行中的代码,你可以在编辑器中选中这些代码,然后右键,选择 Evaluate in Console
选项来进行执行。
控制台
断言
console.assert()
方法仅仅只当它的第一个参数为 false 时才显示一个错误信息字符串(它的第二个参数)
在下面的代码中,如果在列表中的子节点的数量超过 500,将会在控制台中引起错误信息。
示例:
console.assert(list.childNodes.length < 500, "Node count is > 500");
结果:
输出分组
你可以通过分组命令把相关联的输出信息分在一起。group 命令通过一个字符串的参数来给你的组命名。控制台将会把所有所有的输出信息组合到一块。要结束分组,你只需要调用 groupEnd 即可。
示例代码
var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {console.log("User '%s' was authenticated", user);// Start nested groupconsole.group("Authorizing user '%s'", user);if (authorized) {console.log("User '%s' was authorized.", user);}// End nested groupconsole.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");
结果:
浏览结构化数据
table()
方法提供一个简单的方法来查看相似数据对象。这将给一个数据提供属性并且创建一个头。行数据将会从每一个索引属性值中获取。
示例代码:
console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);
结果:
table()
中的第二个参数是可选项。你可以定义任何你想显示的属性字符串数组。
一个使用了对象集合的控制台输出表。
示例代码:
function Person(firstName, lastName, age) {this.firstName = firstName;this.lastName = lastName;this.age = age;
}
var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);
console.table(family, ["firstName", "lastName", "age"]);
结果:
将 DOM 元素格式化成 JavaScript 对象
当你想要在控制台中记录一个 DOM 元素,就显示成了 XML 格式。在元素面板中也会是同样的显示。要显示 JavaScript 格式的信息,你可以使用 dir()
方法或者是在 log()
中使用占位符来替换成你的 JavaScript。
使用 CSS 样式来更改控制台输出形式
CSS 格式说明符可以修改在控制台中输出的样式。以你要修饰的文字配上占位符开始,然后在第二个参数中写上你要展示的风格。
更改日志样式
示例代码:
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
结果:
更多请参考:在开发者工具上让日志有自己的风格 | G+
计算时间开销
通过 time()
方法可以启动一个计时器。你必须输入一个字符串来识别时间的标记。当你要结束计算的时候,使用 timeEnd()
方法,并且传递一个相同的字符串给构造器。控制台会在 timeEnd()
方法结束的时候,记录下标签以及时间的花销。
关于 JavaScript 执行时间的示例代码以及输出:
示例代码:
console.time("Array initialize");var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {array[i] = new Object();};
console.timeEnd("Array initialize");
结果:
当 time()
方法正在执行期间,将会生成一个 时间轴 记录并为其做出注解。这对于追踪应用的使用以及其来源非常有用。
反向查找元素
你也可以在任何一个元素上右键然后点击 Reveal in Elements Panel
,这样就可以在DOM 中找到它。
控制台设置
在开发者工具的设置窗口中的常规选项卡里你可以修改四个控制台设置。
选项 | 功能 |
---|---|
Hide network message | 让控制台不输出有关网路问题的日志信息。比如: 404 和 500 系列的问题将不会被记录。 |
Log XMLHTTPRequests | 决定控制台是否要记录每一个 XMLHttpRequest。 |
Preserve log upon navigation | 决定在导航到其他页面的时候控制台历史记录是否要删除 |
Show timestamps | 如果有一个语句调用了控制台,该选项将会显示每个调用的时间戳。这同时也会使 message stacking 失效 |
参考
- Chrome 开发工具指南
- Chrome 开发者工具官方文档
你可能不知道的Chrome-devtools用法总结相关推荐
- 七大你可能不知道的 Chrome 使用技巧
随着Chromium/Chrome以及其衍生的浏览器用户越来越多,掌握一些技巧可以让你更加快速熟练的使用Chrome,让事情变得更简单. 微 软 IE 一手遮天的时代已经一去不复返了,而在当下浏览器的 ...
- 【Chrome】大多数人都不知道的Chrome隐藏功能
虽然现在谷歌浏览器已经很好用了,但是它还有一些很多人都不知道的好用功能!例如下面要说的这个(本文414字,1分钟get一个好功能) 首先问个问题,你有没有试过像上面这张图,开了很多名字差不多甚至名字一 ...
- chrome控制台如何把vw显示成px_你可能不知道的chrome调试技巧
本文是对常用的chrome调试技巧进行总结整理,如果你没有深入了解过chrome调试工具,此处总有你不知道的惊喜! 从 Chrome 说起 对于大部分人来说,Chrome 可能只是个浏览器,但是对于开 ...
- .NET 异步,你也许不知道的5种用法
async/await异步操作,是C#中非常惊艳的"语法糖",让异步编程变得优美且傻瓜化到了不可思议的程度.就连JavaScript都借鉴了async/await语法,让回调泛滥的 ...
- 前端工程师所不知道的meta标签用法
http-equiv META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). ★HTTP-EQUIV HTTP-EQUIV类似于HTTP的头部协议 ...
- 15个你不得不知道的Chrome dev tools的小技巧
额,无法复制,那就贴一个URL,需要的时候自己去看了 http://www.imooc.com/article/2559
- 99.99%人都不知道的“##“里用法
99.99%人都不知道的"##"里用法 转:原文链接<99.99%人都不知道的"##"里用法> 编者荐语: 来来来,学习一些C语言骚气的操作! 以下 ...
- 20个你不得不知道的数组reduce高级用法
目录 1 背景 2 高级用法 3 兼容和性能 4 结语 1 背景 reduce 作为ES5新增的常规数组方法之一,对比 forEach .filter 和 map,在实际使用上好像有些被忽略,发现身边 ...
- 关于Chrome Devtools你可能有所不知的几个技巧
Cool Chrome DevTools tips and tricks you wish you knew already 在Elements面板中拖拽元素 在Elements面板移动HTML元素, ...
- 你所不知道的setTimeout
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...
最新文章
- 13装饰器和内置函数
- Hibernate之mappedBy
- 【线段树】二进制(luogu 4428)
- robotium之无name、ID仅有desc定位
- leetcode(90)子集 2
- 复制linux虚拟机后ifconfig没有出现网卡处理方法
- Centos 下配置JAVA环境
- 关于进行安装程序出现注册DLL/OCX失败,返回码:0x5问题
- 如何查计算机版本,如何查看电脑ie浏览器版本呢
- 多个安卓设备投屏到电脑_安卓手机投屏到电脑上的三种方法
- 通过工具XShell4生成密钥对(公钥和私钥)
- uniapp 支付宝小程序 获取用户信息 ISV权限不足
- 几个实用又好看的纯css 按钮样式
- 点击图片播放音乐实现
- 英语考研——因果状语从句
- 如何优化你在百度搜索中的排行
- Very Good!!! - React 入门实例教程
- 华为/H3C常用巡检命令
- 别过来,过来我就撕票了!
- 解压压缩包报错:tar: invalid tar magic
热门文章
- mysql 停从库_不停止 MySQL 服务增加从库的两种方式
- linux mysql 8.0启动不了_MySQL官方源从8.0.3直接yum升级到8.0.4后无法启动
- 宁夏职称评计算机,宁夏专业技术人员服务平台职称评审系统:http://124.224.239.164(2)...
- 计算机辅助平面绘图是干嘛的,【1人回答】AutoCAD画图是什么,干什么用的?-3D溜溜网...
- redis java 发布订阅_Redis之发布订阅(Java)
- Mysql Docker 主从配置
- 利用matlab沙堡存在时间更久,最长沙堡保存策略
- c语言编写的键盘记录程序,C程序读取键盘码的方法
- 集群环境下_Docker环境下秒建Redis集群,连SpringBoot也整上了!
- cc1101初始化c语言程序,cc1101无线模块的程序及使用介绍