Chrome开发工具 使用控制台

e elements in the document.$x('html/body/p') // Returns an array of all paragraphs in the document body.检查 DOM 元素和 JavaScript 堆对象inspect()函数可以让 DOM 元素或者是 JavaScript 引用作为一个参数。如果你提供一个 DOM 元素，开发者工具将会跳转到元素面板并且显示那个元素。如果你提供一个 JavaScript 引用，那么将会转到概述面板。当这段代码在你的页面上执行，它将会抓取数字，然后将其显示在元素面板。这是采取了 $_ 属性的优点来估算这个输出的表达式。$('[data-target="inspecting-dom-elements-example"]')inspect($_)使用最近选择的元素和对象控制台存储了最近的 5 个元素和对象。一旦你在元素面板中选中了元素，或者是在概述面板中选中了一个对象，就会被记录在历史栈中。$x 提供了一个进入历史栈的入口。要注意的是计算机是从 0 开始计数的。这就意味着最先选中的是 $0,而最后选中的是 $4。监听事件monitorEvents() 方法让开发者工具记录特定目标的日志信息。第一个参数是监听的对象。如果第二个参数没有提供参数，则所有事件都返回。为了具体说明你要监听的事件，你需要提供一个字符串或者一个字符串数组作为第二个参数。在页面的 body 上监听点击时间。monitorEvents(document.body, "click");如果开发者工具支持的某个事件类型映射到了标准事件名称上，那么该类型的时间会被监听。控制台 API 有一个完整的从事件到事件类型上的映射。停止对 body 对象的监听，可以调用 unmonitorEvents() 方法并且告诉它要停止监听的对象。停止对 body 对象的监听unmonitorEvents(document.body);控制 CPU 检测profile() 函数会开启 JavaScript CPU 检测。你也可以通过输入一个字符串来为检测命名。要停止检测就调用 profileEnd() 方法。创建一个没有命名的检测。profile()profileEnd()示例检测：如果你提供了一个标签，该标签会被当做标题。如果你创建了多个配置文件，并且它们用的是同一个标签，那么它们将会被分到统一组下。示例代码：profile("init")profileEnd("init")profile("init")profileEnd("init")在配置面板上的结果：多个 CPU 配置文件可以同时操作。并且，你不需要按照创建顺序关闭它们。按照相同的顺序嵌套的关闭语句：profile("A")profile("B")profileEnd("A")profileEnd("B")按照交替的顺序嵌套的关闭语句：profile("A")profile("B")profileEnd("B")profileEnd("A")设置在开发者工具的设置窗口中的常规选项卡里你可以修改四个控制台设置。Hide network message让控制台不输出有关网路问题的日志信息。比如： 404 和 500 系列的问题将不会被记录。Log XMLHTTPRequests决定控制台是否要记录每一个 XMLHttpRequest。Preserve log upon navigation决定在导航到其他页面的时候控制台历史记录是否要删除Show timestamps如果有一个语句调用了控制台，该选项将会显示每个调用的时间戳。这同时也会使 message stacking 失效总结Chrome 开发者工具提供了一个强大的控制台。现在你应该已经知道了如何开始使用这个工具来存储信息以及获取元素。该工具的实用性为你提供了无限的可能性，以此工具为基石，你可以构筑你的 web 乐园。