JavaScript调试和优化，深入研究谷歌Chrome浏览器开发工具（一）

Chrome DevTools集成了许多子工具，用于在客户端上调试web应用程序，比如记录性能配置文件和检查动画——主要是通过DevTools控制台来学习web开发。

让我们来看看其中的一些工具，尤其是控制台和性能指标。

怎么打开Chrome的开发工具窗口：

• 在页面任意位置，单击鼠标右键，选择上下文菜单“检查”，英文版叫（Inspect ）
• 在windows/Linux系统上使用键盘快捷键Ctrl + Shift + I，苹果系统MacOS上快捷键 Alt + Command + I
• 在windows/Linux系统上使用键盘快捷键Ctrl + Shift + J ，苹果系统MacOS上快捷键 Alt + Command + J

The Snippets Tool（片段工具）

如果你经常编写JavaScript代码的控制台,请确保使用的片段特征DevTools相反,类似于一个代码编辑器，提供了编写JavaScript代码片段的能力,在当前页面的上下文中运行它们，也可以保存起来留作后用。这比直接在控制台中编写多行JavaScript代码要好。

您可以从源代码面板访问snippet工具。一旦打开，控制台就会堆在下面(如果没有，只需按Escape)，这样您就可以同时编写、运行代码并查看控制台输出。

使用开发工具控制台Console

您可以使用控制台与任何使用JavaScript的web页面进行交互。您可以查询和更改DOM并查询/输出不同类型的性能信息。

控制台可以全屏幕面板打开，也可以在任何其他DevTools面板旁边打开，在DevTools打开并有焦点的时候按下Escape。

在使用浏览器的控制台时，如果您想输入多行表达式，您需要使用Shift + enter，因为只要enter就会在此时执行输入行中的内容。

控制台历史记录

可以有以下几种方式情况控制台历史记录

• 在控制台输入 clear()
• 在控制台或JS代码上调用方法console.clear()
• 点击控制台左上角的红色圆圈
• 组合键CTRL+L
• 在控制台点击右键，然后选择单击Clear Console。

可以在刷新或更改页面之间保存日志(通过启用“保留日志”复选框)，直到清除控制台或关闭选项卡为止。

您可以通过右键单击控制台并选择save as…来保存控制台中的历史记录，然后选择日志文件的位置。

控制台变量 Console Variables

在控制台中创建的变量将一直保存到进行页面刷新，所以在声明变量时请注意使用诸如let或const之类的关键字。第二次运行相同的代码或函数将抛出未捕获的SyntaxError，表示标识符已经声明。您可以使用OR(||)操作符来检查变量是否已经定义，也可以使用var来声明变量，因为它不会报错之前声明的变量。

存储为全局变量功能

如果把代码将对象记录到控制台，您可能希望从控制台引用这些变量，以便检查它们的值。不需要搜索控制台，控制台有一些内置的方法可以引用这些对象。

您可以使用$_，它引用控制台中返回的最后一个对象。

另一种方法是使用Store作为全局变量(右键单击菜单选项)，将登录到控制台或从函数返回的任何对象转换为全局变量。新创建的全局变量将被称为temp1。如果将更多的变量存储为全局变量，它们将被称为temp2、temp3等等。

Logging With 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: specify placeholders for strings
• %d: specify placeholders for numbers
• %i: specify placeholders for integers
• %f: specify placeholders for floats
• %o: specify placeholders for DOM elements
• %O: specify placeholders for JavaScript objects
• %c: specify CSS styles to format the console output

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

使用断言 Asserting 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()时，计数增加了1。

如果您需要跟踪一个函数被调用的次数或内部循环的次数，这将非常有用。

让我们看看另一个例子:

这些简单的调整可以在调试应用程序并尝试找出某个函数的输出时节省大量时间，特别是当您的控制台充满了日志语句时。

用Console.Error()、Console.Info()和Console.Warn()标记控制台的输出

console.error()、console.warn()和console.info()方法与console.log()类似。它们可以用来将信息记录到浏览器的控制台，有一些不同之处:

error()将输出标记为控制台中的错误，并输出错误堆栈。

console.warn()将输出标记为警告。

info()将输出标记为info。

向控制台输出添加标志非常有用，因为控制台提供了一种只显示带有指定标志的消息的方法。

过滤控制台日志

使用前面的方法，您可以根据严重性级别筛选控制台输出。

您还可以通过文本过滤输出。

使用Console.Group()、console. groupcollapse()和Console.GroupEnd()对控制台的输出进行分组

使用console.group(name)或console. groupcollapse (name)与console.groupEnd()，您可以将许多日志消息分组到一个组中。

groupcollapse()与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 Profiles

console.profile([label]) 开始 和 console.profileEnd() 结束 JavaScript CPU 监视。

让我们为updateStock()方法创建一个profile：

function updateStock(item , newQuantity){ console.profile("Updating Stock"); //the method body
 console.profileEnd("updateStock Time");
}

您可以使用JavaScript分析器面板来查找创建的概要文件，它允许您查看函数在每次运行中执行的时间。