Chrome DevTools 是网络开发人员最好的朋友，它有很多技巧和一些不为人知的功能。
大多数开发人员都了解基础知识，例如如何检查页面上的元素，但在其表面之下隐藏着更多的功能。本文的目的是揭开一些最有用但鲜为人知的特性的神秘面纱，并向您展示它们可以为您的开发过程做些什么。
引用 HTML 元素
Chrome DevTools 的一个鲜为人知的功能是引用 HTML 元素的能力。这可以通过两个简单的步骤完成：
1、打开 Chrome DevTools 并导航到视图Elements。
2、右键单击要引用的元素并选择Store as global variable。
现在您拥有了对 HTML 元素的引用，您可以在控制台中访问和检查它。
日志点
日志点是一种向控制台提供调试信息而无需求助于console.log(). 自从我第一次听说此功能以来，我一直在使用 Logpoints，它们使我能够清理我的代码库中的语句碎片console.log。
您可以通过右键单击 DevTools 的sources选项卡中的任意行并指定要记录的表达式来添加新的 Logpoint。执行该行时，您将在控制台中获得它的值。
实时表达式
实时表达式是一种显示表达式值变化的功能。这有助于跟踪复杂表达式（如动画中使用的表达式）或变化很大的表达式（例如，如果您正在遍历数组）的问题。
您需要做的就是单击Create live expressions（Filter左侧的眼睛）按钮并指定您要监视的表达式，然后它会在更改时自动显示其值。
其他用途: 使用 Live Expressions 显示鼠标坐标
console.trace()
console.trace()是一个实用程序，可让您知道对特定函数进行特定调用的位置。想象一下，您有一个内部函数在不同的地方使用并导致了问题。要根除这个问题，您必须首先找出您的代码中的哪个位置调用了它。
请注意我们的堆栈跟踪如何显示对innerFunction 的调用以及对outterFunction的调用。
这是解决问题并找出代码中发生故障的确切位置的好方法。
控制台实用程序
Console Utilities是 Chrome 开发工具功能不可或缺的一部分。Console Utilities API 包含一系列用于常见任务的便利函数。
两个非常有用的是$()和$$()代替document.querySelector()和document.querySelectorAll()。将返回您期望的节点列表，并将结果转换为数组，以便您可以使用map() 和filter()。
结论
这些只是一些鲜为人知的 Chrome DevTools 功能，可以使您的开发过程更轻松。通过一些探索，您将能够找到更多有助于简化工作流程的技巧。
最后
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享
部分文档展示：
文章篇幅有限，后面的内容就不一一展示了
有需要的小伙伴，可以点下方卡片免费领取