Chrome开发工具 技巧和窍门

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 技巧和窍门控制台编写多行命令当你进入控制台的多行编写模式时，你可以像标准文字编辑器那样使用文本块。Shitf + Enter 允许你从控制台进入多行模式。当你编写的 JavaScript 远比单行文字要复杂的时候，这是非常有用的。一但你创建了一个文字编写区域，在命令的最后按 Enter 就会开始运行。关于多行控制台支持持久性问题，请阅读Snippets-该特征可以保存并执行开发工具中可用的特定 JavaScript 片段。检查元素模式的快捷启动方式Ctrl + Shitf + C 或者 Cmd + Shift + C 将会在检查元素模式中打开开发者工具（或者选择让它获取焦点），这样你就可以立即检查当前页面。同时焦点全部都会返回到该页面上。在 Mac 上，使用 Cmd + Shift + C 也可以达到相同的效果。更多：使用控制台 | 开发者工具文档对 console.table 命令的支持这个命令记录了任何使用列表布局的数据。下面是一些例子，包括如何使用：console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);console.table([[1,2,3], [2,3,4]]);也有另一个 columns 可选参数，它会以字符串数组的形式展示。下面，我们定义了一个 family 对象，其中包含很多 “Person”，之后选择一行来显示：function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age;}var family = {};family.mother = new Person("Susan", "Doyle", 32);family.father = new Person("John", "Doyle", 33);family.daughter = new Person("Lily", "Doyle", 5);family.son = new Person("Mike", "Doyle", 8);console.table(family, ["firstName", "lastName", "age"]);同时，如果你仅仅是想输出这些数据中的前两行，使用：console.table(family, ["firstName", "lastName"]);更多:对 console.table 命令的支持已经上线 | G+预览控制台日志对象日志输出的对象可以使用 console.log() 方法直接在开发工具中预览，而不需要更多的操作。传递多个参数来指定控制台日志样式就像我们之前在文档中说过的，你可以使用 %c 给你的控制台添加样式，就像你在 Firebug 中一样。比如：console.log("%cBlue!", "color: blue;");同样也支持多种样式:console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');更多：在开发者工具上让日志有自己的风格 | G+清理控制台历史的快捷键打开控制台，你可以通过 Ctrl + L 或者 Cmd + L 快捷键 来快速的清理控制台历史.控制台中的 console.clear() 命令通过 JavaScript 的控制台 API 来完成清除工作，就和 shell 下的 clear() 一样。成为一个键盘忍者在开发者工具上，你可以使用 ? 来打开通用设置，从那里你可以定位到快捷键面板来查看所有支持的快捷键通过控制台使用元素选择一个元素然后在控制台中输出 $0，它将会使用脚本来执行。如果在这个页面上已经有 jQuery 对象，你可以使用 $($0) 来重新选择这个页面上的元素。你也可以在任何一个元素上右键然后点击 Reveal in Elements Panel，这样就可以在DOM 中找到它。通过 XPath 表达式查询 DOMXPath 是一个在文档中选择节点的查询语言，一般来说返回一个节点的集合，字符串，boolean,或者数字。你可以在 Javascript 开发者工具控制台中使用 XPath 表达式来查询 DOM。$x(xpath) 命令允许你执行一个脚本。下面的例子将会展示如何通过 $x('//img') 来搜索图片：然而，该函数同样能够接受第二个参数，该参数是关于路径上下文的，比如：$x(xpath,context)。这就允许我们选择一个详细的上下文（也就是一个内嵌帧）然后使用 XPath 来查询。var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;$x('//'img, frame);在详细的内嵌帧中查询图片获取控制台最后的结果使用 $_helper 会允许你获取控制台的最后结果。我们可以用另外一个 XPath 的例子来证明这个：使用 console.dirconsole.dir(object) 命令将会以一个可扩展的 JavaScript 对象形式列出所有提供的对象的所有属性。下面的例子展示了 document.body 下的一个表示属性的可扩展对象。在具体的帧中运行 JS 控制台开发者工具底部是下拉选项，它将根据你当前标签的上下文改变。当你在控制台面板的时候，下拉列表允许你选择一个控制台能够操作的帧上下文。在下拉框中选择你的帧，然后你会马上在右侧找到它。当导航到一个新的页面时停止清理控制台有时候要跳转到一个新的页面上时，你想保持在控制台上的日志信息。要实现这个，只要在控制台右键，然后选择 "Preserve Log upon Navigation"。当你从当前页面导航到一个不同的页面时，控制台历史信息将不会被清除。使用 console.time() 和 console.timeEnd() 进行标准循环console.time() 用一个特定的标签开启一个新的计时器。当用相同的标签调用 console.timeEnd() 的时候计时器停止，在控制台上会显示两次记录间流逝的时间。在不调用函数的情况下，该方法用于衡量循环或者代码非常有用：使用 console.profile() 和 console.profileEnd() 来进行配置打开开发者工具，调用 console.profile() 来开始一个 Javascript CPU 配置。一般来说一个配置只能标记一个标签，就像下面的 console.("Processing") 一样。要结束这个配置，调用 console.profileEnd()。每一个配置文件运行后都会添加到 Profiles 面板中同时也会添加到 console.profiles[] 数组中，以供后续的查看：查看更多有关控制台技巧，请进入使用控制台。通过控制台 API提供的方法来记录程序的诊断信息，比如 console.log() 或者是 console.profile（）命令行 API提供的方法,比如选择元素的 $() 命令，或者开启 CPU 配置的 profile() 命令。时间轴利用时间轴帧模式配置帧时间轴面板提供了关于加载你的 web 应用时花费时间的预览，比如进入 DOM 事件花费的时间，提交页面布局或者在屏幕渲染元素的花费。它也允许你进入三个单独的方面来查明为什么你的应用会很慢，这三个界面是：时间，帧以及实际内存使用。时间轴默认情况下并不会显示任何数据。但是通过打开你的 app，然后点击在窗口底部的圆圈 ，来开启一个 session 的记录。或者使用 Ctrl + E 或者 Cmd + E 的快捷键也会开始一个录制的标记。这个录制按钮将会从灰