常用快捷鍵

創(chuàng)新互聯(lián)建站是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、成都微信小程序、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十多年以來，已經(jīng)為1000多家水電改造各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的1000多家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

1. 在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開開發(fā)者工具或是在開發(fā)者工具已經(jīng)打開的情況下開啟查閱選項。
2. 在Source選項， Cmd + o (Mac OS X) 可以搜索文件， Cmd + Shift + o (Mac OS X) 搜索文件中的對應(yīng)函數(shù)/特定選擇器的一個選擇框。
3. Cmd + L (Mac OS X) 跳轉(zhuǎn)到指定行號。
4. 要打開抽屜式控制臺，你需要在鍵盤上按下 Esc 鍵或者點擊開發(fā)者工具窗口右上角的 Show Drawer 按鈕。

Snippets

Snippets是一個新的可以在這個開發(fā)流程中使用的開發(fā)者工具，它允許你在源面板中創(chuàng)建，存儲和執(zhí)行 JavaScript。

• 書簽所有你的書簽可以作為片段進(jìn)行存儲，特別是那些你可能想編輯的。
• 實用工具調(diào)試工具可以和當(dāng)前頁面進(jìn)行交互，并且可以保存和調(diào)試。一個社區(qū)企劃的列表已經(jīng)被提供。
• Debugging Snippets提供了一個語法高亮顯示并且可持續(xù)的多行控制臺，這樣使得調(diào)試代碼比單行要更加便捷。
• Monkey-patching code你想要在運行時修復(fù)的代碼可以通過 Snipptes 來完成，盡管多數(shù)時候你可能只是在源面板中實時編輯代碼。

如果你想在控制臺中，執(zhí)行 snippet 的一些特殊行中的代碼，你可以在編輯器中選中這些代碼，然后右鍵，選擇 Evaluate in Console 選項來進(jìn)行執(zhí)行。

控制臺

斷言

console.assert() 方法僅僅只當(dāng)它的***個參數(shù)為 false 時才顯示一個錯誤信息字符串(它的第二個參數(shù))

在下面的代碼中，如果在列表中的子節(jié)點的數(shù)量超過 500，將會在控制臺中引起錯誤信息。

示例：

 
 
 
 

  
  
  
  
console.assert(list.childNodes.length < 500, "Node count is > 500"); 
 
 
 
 

結(jié)果：

輸出分組

你可以通過分組命令把相關(guān)聯(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ù)是可選項。你可以定義任何你想顯示的屬性字符串?dāng)?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 對象

當(dāng)你想要在控制臺中記錄一個 DOM 元素，就顯示成了 XML 格式。在元素面板中也會是同樣的顯示。要顯示 JavaScript 格式的信息，你可以使用 dir() 方法或者是在 log() 中使用占位符來替換成你的 JavaScript。

使用 CSS 樣式來更改控制臺輸出形式

CSS 格式說明符可以修改在控制臺中輸出的樣式。以你要修飾的文字配上占位符開始，然后在第二個參數(shù)中寫上你要展示的風(fēng)格。

更改日志樣式

示例代碼：

 
 
 
 

  
  
  
  
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large"); 
 
 
 
 

結(jié)果：

計算時間開銷

通過 time() 方法可以啟動一個計時器。你必須輸入一個字符串來識別時間的標(biāo)記。當(dāng)你要結(jié)束計算的時候，使用 timeEnd() 方法，并且傳遞一個相同的字符串給構(gòu)造器?？刂婆_會在 timeEnd() 方法結(jié)束的時候，記錄下標(biāo)簽以及時間的花銷。

關(guān)于 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é)果：

當(dāng) time() 方法正在執(zhí)行期間，將會生成一個 時間軸 記錄并為其做出注解。這對于追蹤應(yīng)用的使用以及其來源非常有用。

反向查找元素

你也可以在任何一個元素上右鍵然后點擊 Reveal in Elements Panel，這樣就可以在DOM 中找到它。

控制臺設(shè)置

在開發(fā)者工具的設(shè)置窗口中的常規(guī)選項卡里你可以修改四個控制臺設(shè)置。

當(dāng)前文章：你可能不知道的Chrome-devtools用法總結(jié)
本文地址：http://uogjgqi.cn/article/dpcpcsg.html