优化审计：深入探究 Chrome 的开发控制台
Chrome DevTools 包含许多用于在客户端调试 Web 应用程序的子工具——例如记录性能配置文件和检查动画——您可能在早期学习 Web 开发时就一直在使用其中的大部分工具，主要是通过 DevTools 控制台。
让我们看看其中的一些工具，特别关注控制台和性能指标。
要访问 Chrome 的 DevTools：
- 右键单击页面上的任意位置，从上下文菜单中单击检查使用键盘快捷键
Ctrl + Shift + I 在 Windows 和 Linux 系统上或 Alt + Command + I 在 macOS 上使用键盘快捷键 Ctrl + Shift + J 在 Windows 和 Linux 系统上或 Alt + Command + J 在 macOS 上。
片段工具
如果您经常在控制台中编写 JavaScript 代码，请确保改用 DevTools 的代码片段功能，它类似于代码编辑器并提供编写 JavaScript 代码片段的机制，在当前页面的上下文中运行它们，并且保存它们以备后用。 这比直接在控制台中编写多行 JavaScript 代码要好。
您可以从源面板访问片段工具。 打开后，控制台会堆叠在下面（如果没有，只需按 Escape），这样您就可以同时编写、运行代码并查看控制台输出。
使用 Chrome 开发者工具控制台
您可以使用控制台与任何使用 JavaScript 的网页进行交互。 您可以查询和更改 DOM 以及查询/输出不同类型的性能信息。
控制台可以作为全屏专用面板打开，也可以通过按 Escape 而 DevTools 是开放的并且有焦点。
使用浏览器的控制台时，如果要输入多行表达式，则需要使用 Shift + Enter因为只是 Enter 将在那一刻执行输入行中的内容。
控制台历史
您可以通过不同的方式清除控制台历史记录：
- 通过打字
clear() 在控制台中通过调用 console.clear() 控制台中的方法或 JavaScript 代码，方法是单击控制台左上角的红色圆圈 CTRL+L 在 macOS、Windows 和 Linux 中，右键单击控制台，然后按清除控制台。
您可以在页面刷新或更改之间保留日志（通过启用保留日志复选框），直到您清除控制台或关闭选项卡。
您可以通过在控制台中右键单击并选择另存为…，然后选择日志文件的位置，将控制台中的历史记录保存为文本文件。
控制台变量
您在控制台中创建的变量会一直保留到您刷新页面为止，因此在声明变量时请注意何时使用 let 或 const 等关键字。 第二次运行相同的代码或函数将抛出 Uncaught SyntaxError，表示标识符已被声明。 您可以使用 OR (||) 运算符来检查变量是否已经定义，或者您可以使用 var 来声明变量，因为它不会抱怨以前声明的变量。
存储为全局变量特征
如果您从代码中将对象记录到控制台，您可能希望从控制台引用这些变量，以便检查它们的值。 不要通过控制台行搜索，而是让控制台为您做这件事。 有一些内置方法可以引用这些对象。
您可以使用 $_，它引用了控制台中返回的最后一个对象。
另一种方法是将 Store as global variable（右键单击菜单选项）与记录到控制台或从函数返回的任何对象一起使用，以将其转换为全局变量。 您新创建的全局变量将被称为 temp1. 如果您将更多变量存储为全局变量，它们将被调用 temp2, temp3， 等等。
使用 console.log() 记录
在构建复杂的客户端 Web 应用程序时，最好使用浏览器提供的调试工具，这可以帮助开发人员弄清楚代码级别发生了什么，而不会干扰应用程序的实际用户界面（即使用警报和调试错误的消息框）。
打开 DevTools 控制台后，尝试记录一个简单的语句：
console.log("hello console");
这 console.log() 方法可以采用许多参数和格式说明符。
您可以传递字符串和其他类型的 JavaScript 变量，用逗号分隔，这会将它们连接成一个字符串，用空格代替逗号。
console.log("this is a concatenated string composed from: ",1,"and",{type:"object"} );
您还可以添加格式说明符：
%s: 指定字符串的占位符%d: 指定数字的占位符%i: 为整数指定占位符%f: 指定浮点数的占位符%o: 指定 DOM 元素的占位符%O: 为 JavaScript 对象指定占位符%c: 指定 CSS 样式来格式化控制台输出
var op1 = 1;
var op2 = 2;
var result = op1 * op2;
var operation = "multiply";
console.log('%c %s: %d x %d = %d','font-size: 24px;background: red; color: white;' ,operation, op1 , op2 , result);
使用 console.assert() 断言
console.assert() 计算第一个参数，它是一个布尔表达式，如果表达式失败则记录第二个参数（计算为 false):
var a = 102;
var b = 101;
console.assert(a < b, "a is bigger than b");
使用 console.count() 计算执行次数
这 console.count(label) 输出在同一行并使用相同标签调用它的次数。
您可以从屏幕截图中看到，当将相同的语句传递给 console.count()，计数加一。
如果您需要跟踪一个函数被调用的次数或内部循环的次数，它会非常有用。
让我们看另一个例子：
这些简单的调整可以在调试应用程序和尝试发现某些函数的输出时为您节省大量时间，尤其是当您的控制台充满日志语句时。
使用 console.error()、console.info() 和 console.warn() 标记控制台的输出
这 console.error(), console.warn() 和 console.info() 方法类似于 console.log(). 它们可用于将信息记录到浏览器的控制台，但有一些区别：
console.error() 在控制台上将输出标记为错误并打印错误堆栈。console.warn() 将输出标记为警告。console.info() 将输出标记为信息。
将标志添加到控制台输出非常有帮助，因为控制台提供了一种仅显示具有指定标志的消息的方法。
过滤控制台日志
使用前面的方法，您可以按严重级别过滤控制台输出。
您还可以按文本过滤输出。
使用 console.group()、console.groupCollapsed() 和 console.groupEnd() 对控制台的输出进行分组
使用 console.group(name) 或者 console.groupCollapsed(name) 和 console.groupEnd() 您可以将许多日志消息分组为一组。
console.groupCollapsed() 是相同的 console.group() 除了它创建一个折叠组。
让我们更改我们的简单示例以将消息分组：
我们还可以嵌套组：
我们创建了两个组：名为 updateStock() 的外部组，然后是名为 Details 的内部折叠组。 您可以单击详细信息以获取更多日志记录信息。
使用 console.table()、console.dir() 和 console.dirxml() 记录数组和对象漂亮的数据
这 console.table() 方法对于记录表格数据或数组很有用：
这 console.dir() 方法对于将对象记录为 JSON 数据很有用：
console.log($("body"));
console.dir($("body"));
console.dirxml($("body"));
CPU 配置文件
console.profile([label]) 开始和 console.profileEnd() 结束 JavaScript CPU 配置文件。
让我们为 updateStock() 方法创建一个名为 Updating Stock 的配置文件：
function updateStock(item , newQuantity){
console.profile("Updating Stock");
//the method body
console.profileEnd("updateStock Time");
}
您可以使用 JavaScript Profiler 面板查找您创建的配置文件，它允许您查看函数在每次运行中执行所需的时间。
使用 console.time() 和 console.timeEnd() 测量执行时间
您可以使用 console.time(label) 和 console.timeEnd(label) 来衡量代码执行所需的时间。 让我们测量一下的执行时间 updateStock() 我们简单示例中的方法：
function updateStock(item , newQuantity){
console.time("updateStock Time");
//the method body
console.timeEnd("updateStock Time");
}
获取 JavaScript 函数的堆栈跟踪
通过使用 console.trace() 您可以获得调用函数的堆栈跟踪，这使您可以更好地理解代码执行流程。
该函数的完整调用堆栈与代码文件名和行号一起显示在控制台上，您可以单击它们以导航到源代码中的相应行。
值得一提的是 console.trace() 也可以与 DevTools Snippets 工具一起使用。
使用 monitorEvents() 从控制台监视事件
您可以使用以下命令从控制台监视 DOM 事件 monitorEvents 方法，它将要监视的对象作为第一个参数，将要侦听的事件数组作为第二个参数。 例如，让我们监控 Google 网站的 scroll, mousedown, mouseup 和 mouseover 事件：
monitorEvents(document.body, ["scroll"]);
monitorEvents($$('img')[2], ["mouseover","mousedown", "mouseup"]);//monitor the logo image
从控制台查询 DOM
DevTools 控制台有一个方法允许您使用 CSS 选择器查询当前的 HTML 文档。 该方法可以通过输入两个美元符号来使用 $$(selector)它返回所有选择器的数组。
这些是您可以使用的一些示例 $$():
$$('p') // outputs an array of all <p> elements
$$('.cls') // outputs an array of all elements with the '.cls' class
$$('#id') // outputs the element with id '#id'
即使结果只有一个，查询方法返回一个数组，所以你需要使用类似 array[0] 访问结果。
请注意，您还可以使用标准的 JavaScript API 从控制台查询当前的 HTML 文档，例如 document.querySelector() 或者 document.getElementsByClass() ETC。
引用选定的元素
如果您正在使用 DevTools Elements 面板并选择了一些 DOM 元素，您可以轻松地在 Console 面板中引用它，而无需查询它。
选择元素时，可以看到Chrome添加了 ==$0 这说你可以使用 $0 从控制台引用该元素。
在生产中禁用/清理控制台输出
在开发中使用不同的控制台 API 非常有用，但您可能不希望所有日志信息出现在生产中，因此您可以使用工具清理生产代码或使用以下简单代码禁用控制台 API：
(function () {
var methods = [];
var noop = () => {};
Object.keys(window.console).forEach(key => {
methods.push(key);
});
console.log(methods);
var length = methods.length;
var m;
while (length--) {
m = methods[length];
window.console[m] = noop;
}
}());
您还可以使用以下工具来清理生产代码：
- Webpack-strip：由 Yahoo! 创建的 Webpack 模块从您的代码中剥离自定义功能（例如调试或控制台功能）的开发人员。 gulp-strip-debug：GulpJS 的一个模块，用于从您的代码中剥离自定义函数。 grunt-strip-debug：GruntJS 的一个模块，用于剥离自定义函数。
控制台面板专为调试 JavaScript 代码而设计。 现在让我们介绍旨在分析和识别性能问题或可能优化领域的工具。
DevTools 性能选项卡
性能面板旨在记录 Web 应用程序的运行时和加载时性能以查找瓶颈。 它可以用来衡量诸如代码花费大部分时间的事情。 这些信息随后可用于进一步优化影响性能的问题区域，以减少 UI 阻塞并优化 UI 响应能力。
值得一提的是，性能面板是 Chrome 中新增的。 它结合了旧的 Timeline 和 JavaScript CPU Profiler，它仍然存在但隐藏在更多工具下——这是从未来版本的 Chrome 中删除之前的一个步骤。
Performance 选项卡可以分析运行时性能或加载时性能。
您可以通过单击记录按钮（黑点）或点击 CTRL+E:
对于加载时间性能，您需要使用第二个按钮或点击 CTRL+Shift+E，它会重新加载当前页面并开始新的录制。
对于要分析的演示，您可以使用 Google 提供的 jank 示例。 您可以在此处阅读有关使用此演示的更多信息。
这个演示是为测试目的而设计的。 你可以让…
