在大部分情况下，我们在浏览器中调试DOM结构或者编辑一些文本时，会在Chrome Developer Tools的Elements选项中对DOM节点进行编辑，但是一旦节点过多，会很容易增加调试过程的困难，这里我们可以使用一种方式来将浏览器直接转换为编辑器模式：
document.body.contentEditable = true;
在控制台中输入以上代码后，可以将浏览器中的所有内容变为可编辑状态，效果图如下：
11、Chrome Command Line API
Google的Chrome Command Line API包含了一个用于执行以下常见任务的便捷函数集合：选择和检查DOM元素，以可读格式显示数据，停止和启动分析器，以及监控DOM事件。
注意：此API只能通过浏览器控制台获取，无法通过网页脚本来进行访问。
11.1 选择DOM元素
我们使用jQuery的时候，我们可以通过各种选择器例如$('#id')和$('.class')来选择匹配的DOM元素，但是如果我们没有引入jQuery时，我们仍然可以在Chrome的控制台中进行同样的操作。Chrome Command Line API提供了以下几种选择DOM元素的方式：
$(selector)：返回匹配指定CSS选择器的DOM元素的第一个引用，相当于document.querySelector()函数。
$$(selector)：返回匹配指定CSS选择器的DOM元素数组，相当于document.querySelectorAll()函数。
$x(path)：返回一个与给定XPath表达式匹配的DOM元素数组。
$x('//p[a]')表示返回包含<a>元素的所有<p>元素。
11.2 检索最后一个结果的值
在控制台中我们经常会进行一些计算，某些情况下你可能需要跟踪你之前的计算结果来用于后面的计算，使用$_标记可用于返回最近评估的表达式的值，示例如下：
1 + 2 + 3 + 4 // -> 10 $_ // -> 10 $_ * $_ // -> 100 Math.sqrt($_) // -> 10 $_ // -> 10
11.3 查找与指定DOM元素关联的事件
当我们需要查找DOM中与某个元素关联的所有事件时，控制台提供了getEventListeners方法来帮助我们找到这些关联的事件。
getEventListeners($('selector'))返回在指定DOM元素上注册的事件监听器。返回值是一个对象，对象的key为对应的事件类型(例如click，focus)，对象的value为一个数组，其包含了对应事件类型下的所有事件监听器。例如，下面列出了在document上注册的所有事件监听器：
如果我们需要找到某个特定的事件监听器，可以通过如下方式进行访问：
// eventName表示对应的事件类型 // index表示该事件类型下的事件监听器数组的索引 getEventListeners($('selector')).eventName[index].listener // 例如获取document下click事件监听器数组的第一项 getEventListeners(document).click[0].listener
11.4 监控事件
如果你希望在执行绑定到DOM中特定元素的事件时监视它们，控制台提供了monitorEvents方法来帮助你使用不同的命令来监控其中的一些或者所有事件：
monitorEvents($('selector'))：将监视与选择器匹配的元素关联的所有事件，当这些事件被触发时会将它们打印到控制台。例如monitorEvents($('#content'))将监视id为content的元素关联的所有事件。
monitorEvents($('selector'), 'eventName')：将监视选择器匹配的元素的某个特定的事件。 例如，monitorEvents($('#content'), 'click')将监视id为content的元素关联的click事件。
monitorEvents($('selector'), [eventName1, eventName2, ...])：将监视选择器匹配的元素的某些特定的事件。与上述不同的是，第二项可以传入一个字符串数组，包含所有需要监听的事件类型名称，以此达到自定义监听的目的。例如monitorEvents($('#content'), ['click', 'focus'])将监视id为content的元素关联的click和focus事件。
unmonitorEvents($('selector'))：将停止监视选择器匹配的元素关联的所有事件。例如unmonitorEvents($('#content'))将停止监视id为content的元素关联的所有事件。
效果图如下：
11.5 检查DOM元素
控制台提供了inspect()方法让我们可以直接从控制台中检查一个DOM元素。