寫在前面本文包括瀏覽器除錯，不包括web移動端除錯。這個不用多說了，不言自明本文除錯均在chrome瀏覽器進行
注意上面輸出的error和throw出的error不一樣，前者只是輸出錯誤資訊，無法捕獲，不會冒泡，更不會中止程式執行。
除此以外，console還支援自定義樣式和類似c語言的 printf 形式：
下面幾個比較簡單的，就不舉例子了，簡單說一下：
對於多個物件的集合，你可以這樣，輸出更清晰：
1、右邊按鈕如下：
2、其實右側還有很多強大的功能
3、斷點
dom元素的控制台書籤
chrome開發者工具和firebug都提供了書籤功能，用於顯示你在元素標籤頁（chrome）或html標籤頁（firebug）中最後點選的dom元素。如果你依次選擇了a元素、b元素和c元素，那麼$0 表示c元素，$1 表示b元素，$2 表示a元素。（這個和正規表示式的$符號類似，不過順序不同）
2、如果你想除錯f函式，用debug(f)語句可以增加這種斷點。
3、sources標籤頁左側面板上有乙個**片段（snippet）子標籤頁，可用於儲存**片段，幫你除錯**。
4、可以用chrome開發者工具sources標籤頁中的格式化按鈕（pretty print button）格式化壓縮後的**。
5、在network面板，選擇乙個資源檔案，右鍵copy response可快速複製響應內容。
6、利用**查詢，這個主要是在device mode調節不同的解析度顯示。
7、選擇elements，按 esc > emulation > sensors進行感測器模擬。
8、點選漸入效果樣式圖示（紫色圖示），可以預覽動畫效果，並可對相應的貝塞爾曲線(cubic-bezier)進行調節動畫效果。
9、在source中按住alt鍵並拖動滑鼠進行多列內容選擇。
10、elements面板右鍵執行dom元素節點，選擇force element state或者點選右側toggle element state圖示可以出發偽類。
11、network面板中選擇一張，在右側上滑鼠右鍵選擇copy it as a data uri,就可以獲取的data url (base64編碼)。
12、通過按住ctrl鍵可以新增多個編輯游標，同時對多處進行編輯。按下ctrl + u可以撤銷編輯。
13、elements面板右側的style編輯器中，點選顏色十六進製制編碼前的小色塊，會彈出乙個調色盤。
14、按下alt鍵並且滑鼠雙擊選擇dom元素前面的箭頭，就會展開該dom元素下的所有字節點元素.
1.避免記錄引用型別
當記錄物件或陣列時，永遠記得你在記錄什麼。記錄原始型別時，使用帶斷點的watch表示式。如果是非同步**，避免記錄引用型別。
這裡，第乙個屬性中物件引用的值是不可靠的。當你第一次在開發者工具中顯示這個屬性時，num的值就已經確定了。之後無論你對同乙個引用重新開啟多少次都不會變化。
2.盡可能使用 source map。有時生產**不能使用source map，但不管怎樣，你都不應該直接對生產**進行除錯。
Chrome 除錯技巧
可快速關注 alert console 基本輸出 console.log在控制台輸出點東西，其實console還有其它的方法 console.log 列印字串 在控制台列印自定義字串 console.error 我是個錯誤 在控制台列印自定義錯誤資訊 console.info 我是個資訊 在控制台列...
Chrome 除錯技巧
前言 除了我們日常使用的除錯方法，在chrome中，其含有一些有意思的方法，有助於提高我們的開發除錯效率。使用sublime的人或習慣用command p 進行檔案的跳轉，在chrome dev tools中其實也有類似的跳轉方法。command p command p 檔名 數字 sublime中...
chrome 除錯技巧
利用devtool 提供的copy 實現快速複製。ctrl shift p 搜尋screen下的capture full size screenshot實現快速截圖。ctrl shift p 搜尋 theme 相關的選項，實現明亮 暗黑兩種主題之間的切換 console.log li 會直接渲染成e...