你可能不知道的Chrome-devtools用法總結(jié)
常用快捷鍵
- 在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開開發(fā)者工具或是在開發(fā)者工具已經(jīng)打開的情況下開啟查閱選項。
- 在Source選項， Cmd + o (Mac OS X) 可以搜索文件， Cmd + Shift + o (Mac OS X) 搜索文件中的對應函數(shù)/特定選擇器的一個選擇框。
- Cmd + L (Mac OS X) 跳轉(zhuǎn)到指定行號。
- 要打開抽屜式控制臺，你需要在鍵盤上按下 Esc 鍵或者點擊開發(fā)者工具窗口右上角的 Show Drawer 按鈕。
Snippets
Snippets是一個新的可以在這個開發(fā)流程中使用的開發(fā)者工具，它允許你在源面板中創(chuàng)建，存儲和執(zhí)行 JavaScript。
- 書簽所有你的書簽可以作為片段進行存儲，特別是那些你可能想編輯的。
- 實用工具調(diào)試工具可以和當前頁面進行交互，并且可以保存和調(diào)試。一個社區(qū)企劃的列表已經(jīng)被提供。
- Debugging Snippets提供了一個語法高亮顯示并且可持續(xù)的多行控制臺，這樣使得調(diào)試代碼比單行要更加便捷。
- Monkey-patching code你想要在運行時修復的代碼可以通過 Snipptes 來完成，盡管多數(shù)時候你可能只是在源面板中實時編輯代碼。
如果你想在控制臺中，執(zhí)行 snippet 的一些特殊行中的代碼，你可以在編輯器中選中這些代碼，然后右鍵，選擇 Evaluate in Console 選項來進行執(zhí)行。
控制臺
斷言
console.assert() 方法僅僅只當它的***個參數(shù)為 false 時才顯示一個錯誤信息字符串(它的第二個參數(shù))
在下面的代碼中，如果在列表中的子節(jié)點的數(shù)量超過 500，將會在控制臺中引起錯誤信息。
示例：
- console.assert(list.childNodes.length < 500, "Node count is > 500");
結(jié)果：
輸出分組
你可以通過分組命令把相關聯(lián)的輸出信息分在一起。 group 命令通過一個字符串的參數(shù)來給你的組命名?？刂婆_將會把所有所有的輸出信息組合到一塊。要結(jié)束分組，你只需要調(diào)用 groupEnd 即可。
示例代碼
- var user = "jsmith", authenticated = true, authorized = true;
- // Top-level group
- console.group("Authenticating user '%s'", user);
- if (authenticated) {
- console.log("User '%s' was authenticated", user);
- // Start nested group
- console.group("Authorizing user '%s'", user);
- if (authorized) {
- console.log("User '%s' was authorized.", user);
- }
- // End nested group
- console.groupEnd();
- }
- // End top-level group
- console.groupEnd();
- console.log("A group-less log trace.");
結(jié)果：
瀏覽結(jié)構(gòu)化數(shù)據(jù)
table() 方法提供一個簡單的方法來查看相似數(shù)據(jù)對象。這將給一個數(shù)據(jù)提供屬性并且創(chuàng)建一個頭。行數(shù)據(jù)將會從每一個索引屬性值中獲取。
示例代碼：
- console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
- console.table([[1,2,3], [2,3,4]]);
結(jié)果：
table() 中的第二個參數(shù)是可選項。你可以定義任何你想顯示的屬性字符串數(shù)組。
一個使用了對象集合的控制臺輸出表。
示例代碼：
- 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"]);
結(jié)果：
將 DOM 元素格式化成 JavaScript 對象
當你想要在控制臺中記錄一個 DOM 元素，就顯示成了 XML 格式。在元素面板中也會是同樣的顯示。要顯示 JavaScript 格式的信息，你可以使用 dir() 方法或者是在 log() 中使用占位符來替換成你的 JavaScript。
使用 CSS 樣式來更改控制臺輸出形式
CSS 格式說明符可以修改在控制臺中輸出的樣式。以你要修飾的文字配上占位符開始，然后在第二個參數(shù)中寫上你要展示的風格。
更改日志樣式
示例代碼：
- console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
結(jié)果：
計算時間開銷
通過 time() 方法可以啟動一個計時器。你必須輸入一個字符串來識別時間的標記。當你要結(jié)束計算的時候，使用 timeEnd() 方法，并且傳遞一個相同的字符串給構(gòu)造器?？刂婆_會在 timeEnd() 方法結(jié)束的時候，記錄下標簽以及時間的花銷。
關于 JavaScript 執(zhí)行時間的示例代碼以及輸出：
示例代碼：
- 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");
結(jié)果：
當 time() 方法正在執(zhí)行期間，將會生成一個 時間軸 記錄并為其做出注解。這對于追蹤應用的使用以及其來源非常有用。
反向查找元素
你也可以在任何一個元素上右鍵然后點擊 Reveal in Elements Panel，這樣就可以在DOM 中找到它。
控制臺設置
在開發(fā)者工具的設置窗口中的常規(guī)選項卡里你可以修改四個控制臺設置。
