DevTools - 我最喜欢的技巧和窍门

元素面板

控制台面板

起初我并不太想发表这篇文章，因为我觉得我会重复一些你可能已经知道的东西。毕竟，这篇文章讲的是高效使用浏览器的开发工具。但后来我意识到，我们每个人都一定有自己喜欢的、值得炫耀的技巧和窍门。于是就有了这篇文章！

法定警告：

对我来说，Web 浏览器的开发工具和Chrome Browser's Dev tool是同义词。

请注意，我不会提及诸如console.log('Hi')“如何”debug Source files或“如何”之类的内容inspect the DOM。你们大多数人肯定每天都在重复这些操作。我下面提到的这些方法虽然用得不多，但可以让你成为一名非常高效的 Web 开发者。让我们开始吧。

元素面板

Elements以下技巧与Chrome 调试器工具的选项卡相关

重新排列元素的位置

您只需拖放元素即可将其上下移动。这在编辑/调试 HTML 结构时非常有用。

在元素面板中引用节点

您是否需要在Elements面板中选择一个特定的节点并从面板中引用它Console？如果您想对该节点进行进一步的处理（或调试），您可能需要这样做。

用於$0它。

注意：如果您在项目中使用 jQuery，则可以使用$($0)该元素访问和应用 jQuery API。

使用单个 DOM 节点做很多事情，比如截屏？

你不用离开调试器工具就能截取 DOM 节点的屏幕截图，太棒了！选中一个节点，按下ctrl-shift-p（我记得cmd-shift-pMac 上是这个键）。你会得到很多选项。其中一个选项就是截取屏幕截图，真的！

不要忘记探索按下ctrl-shift-pDOM 节点时可用的其他选项。

控制台面板

在所有可用的面板中，这是我最喜欢的面板。

多行

有时在控制台面板中输入多行代码会很烦人。只需按下组合键即可shift-enter。按住组合键shift-enter即可继续执行每一行。完成后，按下enter键。

控制台日志格式

如果我们超越简单的console.log('Hi')，那么有几个更有用的版本可以实现更好的格式：

%s 将变量格式化为字符串
%d 将变量格式化为整数
%f 将变量格式化为浮点数
%o 可用于打印 DOM 元素
%O 用于打印对象表示
%c 用于传递 CSS 来格式化字符串

让我们看下面的一些例子：

console.log(
  '%c I have %d %s',
  'color: green; background:black; font-size: 20pt',
  3,
  'Bikes!'
)

在控制台面板中运行上述代码。您将看到如下输出：

存储为全局变量

我们经常会收到一大段 JSON 对象作为响应。我们可能想从中挑选一部分进行处理。有一种方法可以将 JSON 对象的任何部分保存为Global Temporary Variable可在控制台面板中访问的。看看如何操作：

控制台面板中的高级日志记录

控制台目录

console.log(['Apple', 'Orange]);

输出是，

现在尝试，

console.dir(['Apple', 'Orange'])

输出几乎与上面的相同，但是它明确地将类型表示为Array。

控制台表

这会在控制台中打印一个表格表示。处理复杂对象时，它非常强大。只需将其打印为表格即可轻松查看和检查。查看实际效果：

服务器控制台日志

导航到其他页面时，控制台中的日志会被清除，这难道不烦人吗？你只需勾选一个复选框即可保留这些日志：

分组控制台日志

有时，日志分散存放会导致调试延迟。想象一下，你想将某个函数的所有日志集中到一起，并且不想与其他日志消息混杂在一起。没错，你可以轻松做到这一点。

console.group('Testing my calc function');
console.log('adding 1 + 1 is', 1 + 1);
console.log('adding 1 - 1 is', 1 - 1);
console.log('adding 2 * 3 is', 2 * 3);
console.log('adding 10 / 2 is', 10 / 2);
console.groupEnd();

输出是一组分组的日志：

您可以根据需要进行嵌套。强烈建议使用控制台日志分组。

现在是 console.time 的时间了

你经常会遇到需要测量某个函数执行时间？某个代码块执行时间？console.time()有console.timeEnd()一些非常有用的工具可以帮到你。这里有一个例子，我正在计算获取十亿个对象的姓氏所需的时间（我只是模仿了十亿！）

function testTime() {
  var users= [
    {
      firstname: "Tapas",
      lastname: "Adhikary",
      hobby: "Blogging"
    },
    {
      firstname: "David",
      lastname: "Williams",
      hobby: "Chess"
    },
    {
      firstname: "Brad",
      lastname: "Crets",
      hobby: "Swimming"
    },
    {
      firstname: "James",
      lastname: "Bond",
      hobby: "Spying"
    },
    {
      firstname: "Steve",
      lastname: "S",
      hobby: "Talking"
    }
  ];

  var getName = function (user) {
    return user.lastname;
  }

  // Start the time which will be bound to the string 'loopTime' 
  console.time("loopTime");

  for (let counter = 0; counter < 1000 * 1000 * 1000; counter++) {
    getName(users[counter & 4]);
  }

  // End the time tick for 'loopTime
  console.timeEnd("loopTime");
}

一旦您从控制台面板或节点环境中运行上述代码，您将获得如下输出，

loopTime: 2234.032958984375ms

这就是计算十亿用户姓氏所需的总时间（以毫秒为单位）。太棒了！

$_ 引用前一次执行的输出

在控制台面板中，您可以使用引用上一次执行的输出$_。您可以将此输出作为下一个执行逻辑的输入。

这只是我喜欢的一小部分面板。还有很多其他面板可以介绍。你可以在Google 的 Web 开发者工具中找到完整列表。它绝对值得你收藏到你最喜欢的浏览器中。

我很想听听你最喜欢的一套。俗话说，“分享就是关爱”，请在下方留言分享一些。

图片来源：GIPHY.com

希望你喜欢这篇文章。请点击下方的“关注”按钮，阅读我后续的文章。祝你探索愉快！

这最初发布在我的HashNode 博客上。

文章来源：https://dev.to/atapas/devtools-my-favorite-tips-and-tricks-32c7