Chrome开发工具 使用控制台

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 使用控制台利用控制台可以让你：日志诊断信息可以帮你分析 web 页面或者应用上的错误输入命令来与文档以及 Chrome 开发者工具进行交互你可能也会自己评估一般的 JavaScript 表达式。这个文档提供了一个控制台的预览和常规使用的概述。你可以浏览 Console API 和 Conmmand Line API 引用材料来理解更多的功能。基础操作打开控制台Javascript 控制台可以在两个地方打开。控制台面板是主要的进入点。它同样也可以在其他任何面板中通过使用抽屉来打开。打开控制面板，用下面的选择下面提供的一种方式：使用键盘快捷键 Command + Option + J（Mac） 或者 Control + Shitf + J（Windows/Linux）。选择 > More Tools > JavaScript Console.一个干净的控制台界面要打开抽屉式控制台，你需要在键盘上按下 Esc 键或者点击开发者工具窗口右上角的 Show Drawer 按钮。在元素面板上的抽屉式控制台清除控制台历史信息要清除控制台历史信息，你需要这么做：在控制台中右键或者按住 Ctrl 点击然后从上下文菜单中选择 Clear Consoleshell 提示符中输入 clear() 命令行 API。在 Javascript 中执行 console.clear() 调用控制台 API。使用键盘快捷键 Cmd + K,^ + L(Mac)Ctrl + L（ Linux 和 Windows ）。信息栈控制台会将以栈的形式持续输出相同的信息。这使得提供给你的信息会尽可能的简短。禁止时间戳（默认）允许时间戳两种栈状态的例子测试控制台模式的简单代码msgs = ['hello', 'world', 'there'];for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)])选择帧控制台可以在页面的不同帧中运行。主页是文档的最外层帧。以 iframe 元素为例，它将会创造出它自己的上下文框架。你也可以通过使用在过滤按钮旁边的下拉框来指定这个帧。选择一个次要的帧这张图片展示了窗口源在顶级帧和选中的次要帧中改变。使用控制台 API控制台 API 是一组方法的集合，它由开发者工具定义的全局 console 对象提供。API 的其中一个主要目的就是在你的应用运行的时候输出日志信息到控制台中。你也可以在控制台中为输出信息分组，以减少视觉混乱。向控制台输出console.log() 方法会使用一个或者多个表达式来作为参数，之后会将他们当前的值输出到控制台中。一个简单的向控制台输出的例子：var a = document.createElement('p');a.appendChild(document.createTextNode('foo'));a.appendChild(document.createTextNode('bar'));console.log("Node count: " + a.childNodes.length);一个在控制台中输出的例子多个参数会串联到有限行中。多个参数的 console.log()console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());多重参数的 console.log() 的输出。错误和警告错误和警告就跟一般的日志信息的显示一样。不同的地方在于 error() 和 warn() 通过它们自己样式来吸引注意力。console.error() 方法展示的是一个红色的图标并且伴有红色的信息文字。console.warn() 方法展示的是黄色的图标和黄色的信息文字。使用控制台 warn 和 error 方法。使用 error() 方法。function connectToServer() { console.error("Error: %s (%i)", "Server is not responding",500);}connectToServer();connectToServer() 如何在控制台中显示。使用 warn() 方法if(a.childNodes.length < 3 ) { console.warn('Warning! Too few nodes (%d)', a.childNodes.length);}警告输出的例子。断言console.assert() 方法仅仅只当它的第一个参数为 false 时才显示一个错误信息字符串（它的第二个参数）一个简单的断言并且如何展示的例子。在下面的代码中，如果在列表中的子节点的数量超过 500，将会在控制台中引起错误信息。console.assert(list.childNodes.length < 500, "Node count is > 500");一个失败断言如何在控制台中显示。过滤控制台的输出你可以通过过滤器选项中的安全级别来过滤控制台的输出。通过控制面板的左上角的过滤器图标来激活过滤器。下面的过滤器选项是可以选择的：ALL显示所有控制台输出Errors只显示 console.error() 输出的信息Warnings只显示 console.warn() 输出的信息Info只显示 console.info() 输出的信息Logs只显示 console.log() 输出的信息Debug只显示 console.timeEnd() 和 console.debug() 输出的信息过滤器只显示错误级别的信息。输出分组你可以通过分组命令把相关联的输出信息分在一起。group 命令通过一个字符串的参数来给你的组命名。控制台将会把所有所有的输出信息组合到一块。要结束分组，你只需要调用 groupEnd 即可。一个分组的例子示例代码：var user = "jsmith", authenticated = false;console.group("Authentication phase");console.log("Authenticating user '%s'", user);// authentication code here...if (!authenticated) { console.log("User '%s' not authenticated.", user)}console.groupEnd();示例输出日志信息的分组可能还会相互嵌套，这对于在一个狭小空间一次性看大量信息来说非常有用。这个示例代码展示了一个登录程序中验证阶段的日志分组。代码如下:var user = "jsmith", authenticated = true, authorized = true;// Top-level groupconsole.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 groupconsole.groupEnd();console.log("A group-less log trace.");控制台中的嵌套分组输出信息。当你对输出信息进行多次分组以后，你就不用直接看到全部的输出信息了，这是非常有用的。你可以通过调用 groupCollapsed()，代替之前使用的 group() 来自动为信息分组。console.groupCollapsed() 的使用方式示例代码：console.groupCollapsed("Authenticating user '%s'", user);if (authenticated) { ...}console.groupEnd();groupCollapsed() 输出信息浏览结构化数据table() 方法提供一个简单的方法来查看相似数据对象。这将给一