chrome 开发工具

在开发者工具中使用? 来打开通用设置，从那里你可以定位到快捷键面板来查看所有支持的快捷键

快捷键
Cmd + Opt + J 打开控制台
Shitf + Enter 控制台多行模式
Cmd + Shift + C 检查元素模式切换
Cmd + E 时间轴录制

搜索查找：
Cmd + o 全局搜索资源
Cmd + F 当前文本搜索
Cmd + Opt + F 在所有文件中搜索文本
Cmd + Shitf + O 快速查找函数或选择器
Cmd + L 跳转指定行号

Sources 面板
支持实时编辑脚本和样式

历史记录回退
Sources 右键一个文件名，选择 Local modifications
revert 会将文件上所有的更改回复到它原始的状态，并且移除更改历史
apply original content 重复同一操作，但是会维护视图中的修改历史，以免你希望回溯到某个特定更改后
apply version content 将会应用全部更改，并提供时间集上的特定修改记录

Snippets功能：
新增js文件，点击run载入运行，
选中指定代码执行 ：右键选 [Evaluate in Console]

控制台面板
测试代码
msgs = ['hello', 'world', 'there'];
for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)])

选择器
$() document.quertSelector()
$$() document.querySelectorAll()
$x() 返回一个匹配特定 XPath 的数组

使用 console.dir
console.dir(object) 命令将会以一个可扩展的 JavaScript 对象形式列出所有提供的对象的所有属性。下面的例子展示了 document.body 下的一个表示属性的可扩展对象。

选择帧
控制台可以在页面的不同帧中运行。主页是文档的最外层帧。以 iframe 元素为例，它将会创造出它自己的上下文框架。你也可以通过使用在过滤按钮旁边的下拉框来指定这个帧。

控制台API
断言
console.assert() console.assert(list.childNodes.length < 500, "Node count is > 500");

浏览结构化数据
console.table()
console.table(family, ["firstName", "lastName", "age"]); 第二个参数为表头

计算时间开销
time() 启动一个计时器。
timeEnd() 结束计时器。

示例代码：
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");

制作时间轴
console.timeStamp()
注意：只有在时间轴记录正在运行的时候 timeStamp() 方法才能使用。

示例代码如下：
function AddResult(name, result) {
console.timeStamp("Adding result");
var text = name + ': ' + result;
var results = document.getElementById("results");
results.innerHTML += (text + "
");
}

记录语句的执行
count() 方法将会记录提供的字符串以及该字符串在一段时间内的出现次数。这个字符串可能含有动态的内容。当已经传给 count() 一个完全相同的字符串时，计数就会增加

function login(user) {
console.count("Login called for user " + user);
}
users = [
'Irish',
'Bakaus',
'Kinlan'
];
users.forEach(function(element, index, array) {
login(element);
});
login(users[0]);

VM2518:2 Login called for user Irish: 1

VM2518:2 Login called for user Bakaus: 1

VM2518:2 Login called for user Kinlan: 1

VM2518:2 Login called for user Irish: 2

监听事件
monitorEvents() 第一个参数是监听的对象。如果第二个参数没有提供参数，则所有事件都返回。为了具体说明你要监听的事件，你需要提供一个字符串或者一个字符串数组作为第二个参数。
在页面的 body 上监听点击时间。
monitorEvents(document.body, "click");
停止对 body 对象的监听
unmonitorEvents(document.body);

控制 CPU 检测
profile() 函数会开启 JavaScript CPU 检测。你也可以通过输入一个字符串来为检测命名。要停止检测就调用 profileEnd() 方法
profile("A")
profile("B")
profileEnd("A")
profileEnd("B")

设置
Hide network message 不输出有关网路问题的日志信息。比如： 404 和 500 。
Log XMLHTTPRequests 决定控制台是否要记录每一个 XMLHttpRequest。
Preserve log upon navigation 决定在导航到其他页面的时候控制台历史记录是否要删除
Show timestamps 如果有一个语句调用了控制台，该选项将会显示每个调用的时间戳。这同时也会使 message stacking 失效

技巧
新的页面时停止清理控制台
有时候要跳转到一个新的页面上时，你想保持在控制台上的日志信息。要实现这个，只要在控制台右键，然后选择 "Preserve Log upon Navigation"。

时间轴面板
导入导出 选择 Save Timeline data