自從知道瀏覽器的這些調試姿式後，不再手足失措了....

#前言 本文包括瀏覽器調試，總結的比較基礎，在vue，react，angular 項目中，這些調試 技巧都是能夠用到的。總結出來的同時，也是本身在不斷學習的過程。共勉

原文連接：www.jianshu.com/p/767f3d19c…

alert 這個不用多說了，不言自明。

console

基本輸出 想必你們都在用 console.log 在控制檯輸出點東西，其實console還有其它的方法：

console.log('打印字符串');//在控制檯打印自定義字符串 console.error('我是個錯誤');//在控制檯打印自定義錯誤信息 console.info('我是個信息');//在控制檯打印自定義信息 console.warn('我是個警告');//在控制檯打印自定義警告信息 console.debug('我是個調試');//在控制檯打印自定義調試信息 console.clear();//清空控制檯（這個下方截圖中沒有）

注意上面輸出的error和throw出的error不同，前者只是輸出錯誤信息，沒法捕獲，不會冒泡，更不會停止程序運行。

格式化輸出

除此之外，console還支持自定義樣式和相似c語言的printf形式：

console.log('%s年',2016);//%s表示字符串
console.log('%d年%d月',2016,11);//%d表示整數
console.log('%f',3.1415926);//%f小數
console.log('%o',console);//%o表示對象console.log('%c自定義樣式','fontsize:30px;color:#00f');
console.log('%c我是%c自定義樣式','font-size:20px;color:green','font-size:10px;color:red');
複製代碼

####DOM輸出

下面幾個比較簡單的，就不舉例子了，簡單說一下：

//樹形輸出table節點，即<table>和它的innerHTML，
//因爲document.getElementsByTagName是動態的，因此這個獲得的結果確定是動態的
var ul = document.getElementsByTagName('ul');
console.dirxml(ul); 
複製代碼

####對象輸出

var obj = { name:'Lily', age: 18};
console.dir(obj);//顯示對象自有屬性和方法
複製代碼

對於多個對象的集合，你能夠這樣，輸出更清晰：

var stu = [
{name:'Bob',age:13,hobby:'playing'},
{name:'Lucy',age:14,hobby:'reading'},
{name:'Jane',age:11,hobby:'shopping'}
];
console.log(stu);
console.table(stu);
複製代碼

####成組輸出

//創建一個參數組
console.group('start');
 //引號裏是組名，本身定義
console.log('sub1');
console.log('sub1');
console.log('sub1');
console.groupEnd('end');
複製代碼

函數計數和跟蹤

function fib(n){ 
//輸出前n個斐波那契數列值 
if(n == 0) return; console.count('調用次數');
//放在函數裏，每當這句代碼運行輸出所在函數執行次數 
console.trace();
//顯示函數調用軌跡(訪問調用棧） 
var a = arguments[1] || 1; var b = arguments[2] || 1; 
console.log('fib=' + a); 
[a, b] = [b, a + b];
 fib(--n, a, b);
}
fib(6);
複製代碼

注：Chrome開發者工具中的Sources標籤頁也在Watch表達式下面顯示調用棧。 計時

console.time() //計時開始
//用上述函數計算100個斐波那契數
  fib(100); 
console.timeEnd() //計時結束並輸出時長
複製代碼

斷言語句，js中，當第一個表達式或參數爲true時候什麼也不發生，爲false時終止程序並報錯。

console.assert(true, '我錯了');
console.assert(false, '我真的錯了');
複製代碼

####debugger

單步調試就是點一下，執行一句程序，而且能夠查看當前做用域可見的全部變量和值。而debugger就是告訴程序在那裏停下來進行單步調試，俗稱斷點。

右邊按鈕以下：

• Pause/Resume script execution：暫停/恢復腳本執行（程序執行到下一斷點中止）。
• Step over next function call：執行到下一步的函數調用（跳到下一行）。
• Step into next function call：進入當前函數。
• Step out of current function：跳出當前執行函數。
• Deactive/Active all breakpoints：關閉/開啓全部斷點（不會取消）。
• Pause on exceptions：異常狀況自動斷點設置。

其實右側還有不少強大的功能：

• Watch：Watch表達式
• Call Stack: 棧中變量的調用，這裏是遞歸調用，確定是在內存棧部分調用。
• Scope：當前做用域變量觀察。
• BreakPoints：當前斷點變量觀察。
• XHR BreakPoints：面向Ajax，專爲異步而生的斷點調試功能。
• DOM BreakPoints：主要包括下列DOM斷點，註冊方式見下圖：

1. 當節點屬性發生變化時斷點（Break on attributes modifications）
2. 當節點內部子節點變化時斷點（Break on subtree modifications）
3. 當節點被移除時斷點（Break on node removal）

• Global Listeners：全局事件監聽
• Event Listener Breakpoints：事件監聽器斷點，列出了全部頁面及腳本事件，包括：鼠標、鍵盤、動畫、定時器、XHR等等。

chrome中的調試技巧

一、DOM元素的控制檯書籤：Chrome開發者工具和Firebug都提供了書籤功能，用於顯示你在元素標籤頁（Chrome）或HTML標籤頁（Firebug）中最後點擊的DOM元素。若是你依次選擇了A元素、B元素和C元素，那麼$0 表示C元素， $1 表示B元素， $2 表示A元素（這個和正則表達式的$符號相似，不過順序不一樣）。

二、若是你想調試f函數，用debug(f)語句能夠增長這種斷點。

三、Sources標籤頁左側面板上有一個代碼片斷（Snippet）子標籤頁，可用於保存代碼片斷，幫你調試代碼。

四、能夠用Chrome開發者工具Sources標籤頁中的格式化按鈕（Pretty Print Button）格式化壓縮後的代碼。

五、在Network面板，選擇一個資源文件，右鍵Copy Response可快速複製響應內容。

六、利用媒體查詢，這個主要是在Device Mode調節不一樣的分辨率顯示。

七、選擇Elements，按 Esc > Emulation > Sensors進行傳感器模擬。

八、點擊漸入效果樣式圖標（紫色圖標），能夠預覽動畫效果，並可對相應的貝塞爾曲線(cubic-bezier)進行調節動畫效果。

九、在Source中按住Alt鍵並拖動鼠標進行多列內容選擇。

十、Elements面板右鍵執行DOM元素節點，選擇Force Element State或者點擊右側Toggle Element State圖標能夠出發僞類。

十一、Network面板中選擇一張圖片，在右側圖片上鼠標右鍵選擇copy it as a Data URI,就能夠獲取圖片的Data URL (base64編碼)。

十二、經過按住Ctrl鍵能夠添加多個編輯光標，同時對多處進行編輯。按下Ctrl + U能夠撤銷編輯。

1三、Elements面板右側的Style編輯器中，點擊顏色十六進制編碼前的小色塊，會彈出一個調色板。

1四、按下Alt鍵而且鼠標雙擊選擇DOM元素前面的箭頭，就會展開該DOM元素下的全部字節點元素.

1五、快捷鍵：

• 快速定位到行：快捷鍵 Ctrl+O(Mac: CMD+O)，輸入：行號:列號 來進行定位
• 元素搜索：快捷鍵 Ctrl+F(Mac: CMD+F)，試試在搜索欄輸入ID選擇符或者類選擇符就能夠定位到元素啦

####喜歡就幫忙多點贊哈