chrome 開(kāi)發(fā)工具
在開(kāi)發(fā)者工具中使用? 來(lái)打開(kāi)通用設(shè)置，從那里你可以定位到快捷鍵面板來(lái)查看所有支持的快捷鍵
快捷鍵
Cmd + Opt + J 打開(kāi)控制臺(tái)
Shitf + Enter 控制臺(tái)多行模式
Cmd + Shift + C 檢查元素模式切換
Cmd + E 時(shí)間軸錄制
搜索查找：
Cmd + o 全局搜索資源
Cmd + F 當(dāng)前文本搜索
Cmd + Opt + F 在所有文件中搜索文本
Cmd + Shitf + O 快速查找函數(shù)或選擇器
Cmd + L 跳轉(zhuǎn)指定行號(hào)
Sources 面板
支持實(shí)時(shí)編輯腳本和樣式
歷史記錄回退
Sources 右鍵一個(gè)文件名，選擇 Local modifications
revert 會(huì)將文件上所有的更改回復(fù)到它原始的狀態(tài)，并且移除更改歷史
apply original content 重復(fù)同一操作，但是會(huì)維護(hù)視圖中的修改歷史，以免你希望回溯到某個(gè)特定更改后
apply version content 將會(huì)應(yīng)用全部更改，并提供時(shí)間集上的特定修改記錄
Snippets功能：
新增js文件，點(diǎn)擊run載入運(yùn)行，
選中指定代碼執(zhí)行 ：右鍵選 [Evaluate in Console]
控制臺(tái)面板
測(cè)試代碼
msgs = ['hello', 'world', 'there'];
for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)])
選擇器
$() document.quertSelector()
$$() document.querySelectorAll()
$x() 返回一個(gè)匹配特定 XPath 的數(shù)組
使用 console.dir
console.dir(object) 命令將會(huì)以一個(gè)可擴(kuò)展的 JavaScript 對(duì)象形式列出所有提供的對(duì)象的所有屬性。下面的例子展示了 document.body 下的一個(gè)表示屬性的可擴(kuò)展對(duì)象。
選擇幀
控制臺(tái)可以在頁(yè)面的不同幀中運(yùn)行。主頁(yè)是文檔的最外層幀。以 iframe 元素為例，它將會(huì)創(chuàng)造出它自己的上下文框架。你也可以通過(guò)使用在過(guò)濾按鈕旁邊的下拉框來(lái)指定這個(gè)幀。
控制臺(tái)API
斷言
console.assert() console.assert(list.childNodes.length < 500, "Node count is > 500");
瀏覽結(jié)構(gòu)化數(shù)據(jù)
console.table()
console.table(family, ["firstName", "lastName", "age"]); 第二個(gè)參數(shù)為表頭
計(jì)算時(shí)間開(kāi)銷
time() 啟動(dòng)一個(gè)計(jì)時(shí)器。
timeEnd() 結(jié)束計(jì)時(shí)器。
示例代碼：
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");
制作時(shí)間軸
console.timeStamp()
注意：只有在時(shí)間軸記錄正在運(yùn)行的時(shí)候 timeStamp() 方法才能使用。
示例代碼如下：
function AddResult(name, result) {
console.timeStamp("Adding result");
var text = name + ': ' + result;
var results = document.getElementById("results");
results.innerHTML += (text + "
");
}
記錄語(yǔ)句的執(zhí)行
count() 方法將會(huì)記錄提供的字符串以及該字符串在一段時(shí)間內(nèi)的出現(xiàn)次數(shù)。這個(gè)字符串可能含有動(dòng)態(tài)的內(nèi)容。當(dāng)已經(jīng)傳給 count() 一個(gè)完全相同的字符串時(shí)，計(jì)數(shù)就會(huì)增加
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
監(jiān)聽(tīng)事件
monitorEvents() 第一個(gè)參數(shù)是監(jiān)聽(tīng)的對(duì)象。如果第二個(gè)參數(shù)沒(méi)有提供參數(shù)，則所有事件都返回。為了具體說(shuō)明你要監(jiān)聽(tīng)的事件，你需要提供一個(gè)字符串或者一個(gè)字符串?dāng)?shù)組作為第二個(gè)參數(shù)。
在頁(yè)面的 body 上監(jiān)聽(tīng)點(diǎn)擊時(shí)間。
monitorEvents(document.body, "click");
停止對(duì) body 對(duì)象的監(jiān)聽(tīng)
unmonitorEvents(document.body);
控制 CPU 檢測(cè)
profile() 函數(shù)會(huì)開(kāi)啟 JavaScript CPU 檢測(cè)。你也可以通過(guò)輸入一個(gè)字符串來(lái)為檢測(cè)命名。要停止檢測(cè)就調(diào)用 profileEnd() 方法
profile("A")
profile("B")
profileEnd("A")
profileEnd("B")
設(shè)置
Hide network message 不輸出有關(guān)網(wǎng)路問(wèn)題的日志信息。比如： 404 和 500 。
Log XMLHTTPRequests 決定控制臺(tái)是否要記錄每一個(gè) XMLHttpRequest。
Preserve log upon navigation 決定在導(dǎo)航到其他頁(yè)面的時(shí)候控制臺(tái)歷史記錄是否要?jiǎng)h除
Show timestamps 如果有一個(gè)語(yǔ)句調(diào)用了控制臺(tái)，該選項(xiàng)將會(huì)顯示每個(gè)調(diào)用的時(shí)間戳。這同時(shí)也會(huì)使 message stacking 失效
技巧
新的頁(yè)面時(shí)停止清理控制臺(tái)
有時(shí)候要跳轉(zhuǎn)到一個(gè)新的頁(yè)面上時(shí)，你想保持在控制臺(tái)上的日志信息。要實(shí)現(xiàn)這個(gè)，只要在控制臺(tái)右鍵，然后選擇 "Preserve Log upon Navigation"。
時(shí)間軸面板
導(dǎo)入導(dǎo)出 選擇 Save Timeline data
