浏览器家园

TAG标签|网站导航| 手机访问:m.liulanqi.com

当前位置:首页ChromeChrome开发 → 你可能不知道的Chrome-devtools用法总结

你可能不知道的Chrome-devtools用法总结

时间:2023-06-27 11:03:13来源:整理作者:浏览器知识手机版

文章同步于 Github blog

前言

作为一名前端从业者,Chrome-devtools是最常用的工具之一。以前一直还觉得自己的这一块还是比较熟悉的,结果偶然看到了Chrome-devtools的文档之后,才发现还有这么多强大、炫酷,但是相对冷门的用法,觉得有必要来一次梳理和总结。

持续更新中……

常用快捷键

  1. 在 Mac 上使用 Cmd + Shift + C) 在审查模式下打开开发者工具或是在开发者工具已经打开的情况下开启查阅选项。
  2. 在Source选项,Cmd + o (Mac OS X)可以搜索文件,Cmd + Shift + o (Mac OS X)搜索文件中的对应函数/特定选择器的一个选择框。
  3. Cmd + L (Mac OS X)跳转到指定行号。
  4. 要打开抽屉式控制台,你需要在键盘上按下 Esc 键或者点击开发者工具窗口右上角的 Show Drawer 按钮。

Snippets

Snippets是一个新的可以在这个开发流程中使用的开发者工具,它允许你在源面板中创建,存储和执行 JavaScript。

  • 书签 所有你的书签可以作为片段进行存储,特别是那些你可能想编辑的。
  • 实用工具 调试工具可以和当前页面进行交互,并且可以保存和调试。一个社区企划的列表已经被提供。
  • Debugging Snippets 提供了一个语法高亮显示并且可持续的多行控制台,这样使得调试代码比单行要更加便捷。
  • Monkey-patching code 你想要在运行时修复的代码可以通过 Snipptes 来完成,尽管多数时候你可能只是在源面板中实时编辑代码。

如果你想在控制台中,执行 Snippet 的一些特殊行中的代码,你可以在编辑器中选中这些代码,然后右键,选择 Evaluate in Console 选项来进行执行。
image

控制台

断言

console.assert() 方法仅仅只当它的第一个参数为 false 时才显示一个错误信息字符串(它的第二个参数)

在下面的代码中,如果在列表中的子节点的数量超过 500,将会在控制台中引起错误信息。
示例:

console.assert(list.childNodes.length < 500, "Node count is > 500");

结果:
image

输出分组

你可以通过分组命令把相关联的输出信息分在一起。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 group
    console.group("Authorizing user '%s'", user);
    if (authorized) {
        console.log("User '%s' was authorized.", user);
    }
    // End nested group
    console.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");

结果:
image

浏览结构化数据

table() 方法提供一个简单的方法来查看相似数据对象。这将给一个数据提供属性并且创建一个头。行数据将会从每一个索引属性值中获取。

示例代码:

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

结果:
image

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"]);

结果:
image

将 DOM 元素格式化成 JavaScript 对象

当你想要在控制台中记录一个 DOM 元素,就显示成了 XML 格式。在元素面板中也会是同样的显示。要显示 JavaScript 格式的信息,你可以使用 dir() 方法或者是在 log() 中使用占位符来替换成你的 JavaScript。

image

使用 CSS 样式来更改控制台输出形式

CSS 格式说明符可以修改在控制台中输出的样式。以你要修饰的文字配上占位符开始,然后在第二个参数中写上你要展示的风格。

更改日志样式

示例代码:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

结果:
image

更多请参考:在开发者工具上让日志有自己的风格 | 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");

结果:
image
当 time() 方法正在执行期间,将会生成一个 时间轴 记录并为其做出注解。这对于追踪应用的使用以及其来源非常有用。
image

反向查找元素

你也可以在任何一个元素上右键然后点击 Reveal in Elements Panel,这样就可以在DOM 中找到它。
image

控制台设置

在开发者工具的设置窗口中的常规选项卡里你可以修改四个控制台设置。

选项 功能
Hide network message 让控制台不输出有关网路问题的日志信息。比如: 404 和 500 系列的问题将不会被记录。
Log XMLHTTPRequests 决定控制台是否要记录每一个 XMLHttpRequest。
Preserve log upon navigation 决定在导航到其他页面的时候控制台历史记录是否要删除
Show timestamps 如果有一个语句调用了控制台,该选项将会显示每个调用的时间戳。这同时也会使 message stacking 失效

参考

相关文章

  • 鸥朋浏览器,快速浏览网页,选择鸥朋浏览器!

    引言随着互联网技术的不断发展,人们浏览网页的习惯也在不断变化。在众多浏览器中,鸥朋浏览器受到越来越多的用户青睐。本文将介绍鸥朋浏览器的特点和优势,帮助大家更好地利用这一工具。2.鸥朋浏览器的特点鸥朋浏览器是一款专注于个性化定制的浏览器,在功能和用户体验上具有独特的特点。-高速浏览:鸥朋浏览器基于谷歌浏览器内核,拥有高速的页面加载速度和稳定性,不卡顿不崩溃,用户体验非常好。-安全保护:鸥朋浏览器在用户隐私保护方面非常重视,支持防止恶意插件、广告拦截、隐身模式等多项安全保护功能。-多样化定制:鸥朋浏览器提..
  • 电脑图片浏览器下载,电脑图片查看器免费下载,方便快捷的图片管理工具

    电脑图片浏览器下载电脑是我们最常用的工具之一,对于爱好摄影、美图制作的人来说,图片管理工具是非常必要的。在电脑上浏览图片时,我们需要一个好用的图片浏览器。在网上搜索,可以找到各种各样的图片浏览器。然而,为了避免下载带病毒或虚假的软件,我们需要选择安全可信的下载源,并仔细查看软件版本和说明以确保所下载的软件适用于我们的操作系统。2.电脑图片查看器免费下载有些好的图片浏览器需要购买才能使用。但在我们寻找图片查看器时,我们可以选择一些免费软件,例如GooglePhotos、Picasa等。这些图片软件带有许..

Copyright 2019-2029 www.liulanqi.com 【浏览器家园】 版权所有

浏览器家园_下载浏览器就到浏览器家园 | 专注MAC浏览器和Windows浏览器下载和使用介绍

声明: 所有软件和文章收集整理来自互联网 如有异议 请与本站联系 本站为非赢利性网站 不接受任何赞助和广告