神奇的console

Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發效能除錯的必備工具。就連隔壁的產品小哥都知道開啟F12改一下頁面元素的標籤程式碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

但是Chrome能做的遠不止你平常用的那麼簡單，這一個小小的開發工具整合了很多高階的功能你未必知道。我打算把一些Chrome DevTools上使用的高階技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學習學習。

console簡介

這一篇主要介紹我們常用的console這個瀏覽器api。在Javascript程式碼中使用console的最簡單的用法就是寫個console.log()在控制檯列印一行訊息。然而你知道嗎？console除了用log這個方法來列印訊息外，還error、warn、assert、dir、info、trace等高階方法，每個方法對應不用的用途，在下文將一一敘述。

多彩的console.log

其實console.log()方法裡可以傳入多個引數，控制檯會根據引數的設定把多個訊息列印到同一行的。比如這樣：

 console.log("test", 123);

這樣在控制檯就會這樣顯示：

如果log方法裡第一個引數是帶有特別識別符號的字串的話，控制檯會根據不同的識別符號來把後面的引數填充到前面的字串中去。常見的識別符號有以下：

• %s 表示輸出字串
• %d 表示輸出數字（也可以用%i）
• %f 表示輸出浮點數值
• %o 表示輸出Dom元素
• %O 表示輸出JavaScript物件
• %c 表示對輸出的文字應用特殊的樣式

從下面幾個截圖可以看得出這些識別符號的用法了。

最特別的還是%c的用法，使用了%c你就可以讓控制檯輸出的內容包含你自己定製的樣式。例如這樣：

可以看出%c應用的樣式是CSS的語法，所以基本上CSS支援的樣式語句都可以支援。當然，Chrome是有過濾一些CSS語法的，比如對元素定位的CSS語法就不支援（ps：貌似定位啥的也沒用，除非是想搗亂的程式設計師，呵呵）

彩色的輸出語句貌似看起來中看不中用，其實不然。大型的web開發專案，特別是多人分模組開發的時候，控制檯一大堆console.log輸出，你一下子找不到你自己的模組的輸出語句。如果給你自己的模組輸入語句應用了不同的顏色，相對來說比較好定位到輸出的地方，這是提高效率的一個小技巧。

console的其他API

其他的函式例如info,error,warn基本類似，只是在代表的意義和輸出的樣式有所區別。

除此之外，console還有一些比較少見但實用的api。

console.trace

console.trace跟log的區別在於trace會對輸出的物件進行展開。

console.group

console.group用於顯示一組的控制檯輸出，要搭配console.groupEnd來使用。

console.time

console.time用於顯示程式碼執行的時間，要搭配console.timeEnd來使用。

其他

其他的console方法我將簡單列舉一下，就不一一詳細說明了，詳細可以參考Google的開發文件。

• console.assert() 用於判斷表示式，滿足表示式時才輸出語句；
• console.debug() 用於輸出輸出debug的資訊；
• console.dir() 用於展開輸出一個dom元素的JavaScript物件；
• console.profile() 用於記錄程式碼消耗CPU的資訊；
• console.timeStamp() 用於標記執行時的timeline資訊；
• console.count() 用於記錄程式碼執行的次數；
• console.memory 用於顯示此刻使用的記憶體資訊（這是一個屬性而不是方法）；
• console.table() 用表格的形式來輸出資訊；
• console.clear() 清空控制檯的內容（當然你可以用快捷鍵ctrl+L）；

另外，再來優惠大派送，介紹幾個在Chrome控制檯上比較有趣的命令。

• $0 可以在控制檯輸出在Elements皮膚選中的頁面元素；
• $_ 表示上一次在控制檯鍵入的命令，你也可以用快捷鍵“上方向鍵”來達到同樣的效果；
• $x 可以用xPath的語法來獲取頁面上的元素；

結語

Chrome的console語法確實很強大很方便，多點使用不同的方法可以提高我們們前端的開發效率。寫在最後的話：本文基本上是在參考了Google的DevTools文件之後，結合自己的經驗來寫的，目的是把文件中說到的一些特別的方法介紹給大家，如果想多點了解，可以到Google的DevTools文件看看。致謝！

參考文獻

https://developers.google.com/chrome-developer-tools/?hl=zh-cn

那些debug的技巧

Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發效能除錯的必備工具。就連隔壁的產品小哥都知道開啟F12改一下頁面元素的標籤程式碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

但是Chrome能做的遠不止你平常用的那麼簡單，這一個小小的開發工具整合了很多高階的功能你未必知道。我打算把一些Chrome DevTools上使用的高階技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學習學習。

關於web前端的除錯

在描述怎麼用Chrome的開發工具來進行web前端應用除錯前，有必要嘮叨一下web前端的除錯。眾所周知，因為JavaScript這種語言的解析性的關係，在瀏覽器中除錯頁面的JS程式碼顯得非常的麻煩。沒有C和Java那種編譯器帶的除錯工具，沒有很好的語法定位和變數監控的，所以有時候頁面出錯也不知道來自哪裡。然而，這還不是最嚴重的，因為JS的語法比較寬鬆和隨意，所以同一功能多種寫法，各種奇葩bug都有。web前端開發依賴的瀏覽器環境才是最坑爹的地方，不同的瀏覽器之間存在大量的相容性問題。

Anyway，相信以後JS的發展或者工具的發展讓web前端的除錯變得舒服高效。

不簡單的sources皮膚

debug第一步就是開啟Chrome開發工具的sources皮膚。。。（這麼簡單的道理還用你來說？！）呵呵，sources皮膚其實不簡單。用過類似sublime text的程式碼編輯器都知道一些快捷鍵，例如ctrl+p用來開啟一個檔案、ctrl+shift+f用來全域性搜尋關鍵字。其實在Chrome開發工具也有類似的快捷鍵。

• ctrl+o 開啟一個js檔案
• ctrl+p 同ctrl+o
• ctrl+f 查詢當前js檔案中的關鍵字
• ctrl+shift+f 全域性查詢關鍵字
• ctrl+shift+e 在控制檯執行當前選中的程式碼片段

值得一提的是ctrl+shift+e這個快捷鍵，可以立馬在控制檯執行當前選中的程式碼片段。相信做過js的debug的時候，大家都有這樣的經驗，想看當前程式碼中某句程式碼的執行結果，只好先選中複製這段程式碼，開啟控制檯，貼上程式碼，回車執行看結果。這麼長的流程，全交給ctrl+shift+e這個快捷鍵，贊吧！

斷點

給程式碼新增斷點的方法有兩種，在程式碼中寫debugger和在source皮膚中滑鼠單擊新增斷點。兩者的不同點在於：滑鼠單擊的方式會在程式碼行數改變的時候無法定位到之前的位置，但可以在除錯的過程中刪除斷點；debugger的方式不會因為程式碼行數改變而定位不到，但必須要重新整理程式碼才能把斷點刪掉。

這裡介紹一個小技巧：如果新增“條件判斷”的斷點？相信大家在除錯的時候，最煩就是在for迴圈中的斷點了，需要不斷地按下一步來在迴圈中找到要驗證的資料。在程式碼中新增debugger的方式可以這麼寫：

for(var i = 0; i < length; i++){
    if(i === 2){
        debugger;
    }
}

其實也不用這麼麻煩的，在斷點的地方右鍵，選擇“Edit breakpoint”就可以寫上你想出現除錯的條件表示式。

另外，當你在Chrome開發工具中配置了workspace之後，你就可以直接在source皮膚上編輯程式碼並儲存程式碼了，相當方便。當然，這隻針對本地開發的程式碼，對於線上的程式碼就無能為力了。

程式碼格式化

目前線上的js程式碼基本上都是做個壓縮和變數名混淆的，這樣對於js程式碼的體積壓縮有好處，但對於要除錯的前端工程師來說，卻是個大麻煩。

上圖的按鈕就是為這種情況而生的，點選它就能格式化當前的程式碼，變成有換行格式的程式碼，閱讀起來不再那麼晦澀難懂。
然而，變數名還是一些簡單的字母，看起來還是非常的費勁。有辦法把混淆的變數名變回原本的變數名嗎？
答案是有的！不過需要原先的程式碼支援source map。
source map其實是在程式碼在釋出的時候宣告它的變數替換的規則檔案。例如在jQuery1.9.0更高的版本的程式碼，末尾有一句：
//@ sourceMappingURL=jquery.min.map
這就是宣告瞭它的source map檔案的路徑，而source map檔案裡大概是這樣子的：

{
    "version": 3,
    "file": "jquery.min.js",
    "sources":["jquery.js"],
    "names": ["window","undefined","isArraylike"],
    "mappings": "CAaA,SAAWA,EAAQC"
}

names就是原本的變數名字，mappings則表示該變數名字出現的位置。具體的位置規則是利用了VLQ編碼，有興趣的同學可以自己去挖掘。如果你想簡單點，就直接使用Google的Closure編譯器來建立這樣的map檔案。

總結

前端ers在除錯js程式碼的時候，知道Chrome開發工具上的小技巧，可以提高查詢問題的效率。

寫在最後的話：本文基本上是在參考了Google的DevTools文件之後，結合自己的經驗來寫的，目的是把文件中說到的一些特別的方法介紹給大家，如果想多點了解，可以到Google的DevTools文件看看。致謝！

參考文獻

https://developers.google.com/chrome-developer-tools/?hl=zh-cn

隨意修改你的HTML

Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發效能除錯的必備工具。就連隔壁的產品小哥都知道開啟F12改一下頁面元素的標籤程式碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

但是Chrome能做的遠不止你平常用的那麼簡單，這一個小小的開發工具整合了很多高階的功能你未必知道。我打算把一些Chrome DevTools上使用的高階技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學習學習。

elements皮膚

使用Chrome開發工具中的elements皮膚估計是前端工程師修改一個頁面內容最快的方法了。elements皮膚的左側顯示頁面的HMTL元素，右側顯示選中元素的樣式。使用方法也很簡單，用左上角的“放大鏡”在頁面上選取元素，然後就可以檢視該元素的HTML屬性和CSS樣式了。

多種方法修改HTML

要修改頁面元素的HTML結構，其中一般涉及到：

• 修改HTML屬性
• 修改整個HTML的程式碼
• 刪除節點
• 移動節點的位置

對於上述幾種要求，使用elements皮膚的時候都比較簡單直接。要修改HTML屬性，只需要在要修改的屬性上雙擊，就會進入輸入狀態，輸入你想要修改的屬性；要修改整個HTML程式碼的時候，只需要在元素上右鍵-“Edit as HTML”即可；要刪除節點，可以在選中元素後，按下delete快捷鍵，或者右鍵選擇“Delete node”;需要移動節點的位置的時候，只需要滑鼠拖動選中的元素到你想要的位置即可。

值得一提的是右鍵選單上的“Force element state”這個操作，就是強制設定該元素的狀態。狀態分為四種，分別是active/hover/focus/visited。強制設定狀態在某些情況下比較的有用，例如你想檢視某些hover偽類的樣式，又例如元素裡有隱藏的元素，需要在滑鼠hover的時候才出現，但你的滑鼠移開的時候hover狀態就消失了，強制顯示hover狀態比較方便你檢查元素hover的情況。

另外，在除錯的過程中可以給元素新增斷點。很神奇吧？現在支援的斷點的狀態有：元素的子節點結構改變時、元素的屬性改變時、元素被刪除時。在大型專案中，這一斷點比較有意思。大型專案中的HTML結構都比較巨集大，而且指令碼在改變HTML介面的時候你又難以跟蹤元素HTML的狀態。使用斷點，這些都不是問題。右鍵選單中即可把這一功能呼喚出來。

多種方法修改CSS

elements皮膚的右側即是展示所選擇元素的css樣式的地方。然而右側不止是修改和展示css樣式的地方。實際上，右側包括了以下集中功能：

• 展示和修改CSS樣式
• 展示實際計算結果的樣式
• 顯示當前元素的事件監聽情況
• 顯示當前元素包含的dom斷點
• 顯示當前元素的物件屬性

這些功能都在皮膚右側的tab上有顯示。另外，如果你有給Chrome開發工具安裝外掛，那麼外掛的功能區也會成為一個新的tab顯示在後面。例如博主我就安裝了jQuery Audit和JS Runtime這兩個外掛。

利用elements皮膚修改CSS樣式是很簡單的事情，但裡面也有一些小竅門可以分享給大家。在CSS樣式的屬性值上，如果是數字的屬性值，則可以通過按上下方向快捷鍵來給屬性值加一，通過按住shift鍵的同時按上下方向快捷鍵，可以給屬性值遞增十。

同樣，在elements皮膚的樣式區域也可以給元素強制設定狀態（active/hover/focus/visited）。做法和原理跟上面說的一樣。

總結

總而言之，通過Chrome開發工具的elements皮膚可以很輕鬆地修改你的頁面。

寫在最後的話：本文基本上是在參考了Google的DevTools文件之後，結合自己的經驗來寫的，目的是把文件中說到的一些特別的方法介紹給大家，如果想多點了解，可以到Google的DevTools文件看看。致謝！

參考文獻

https://developers.google.com/chrome-developer-tools/?hl=zh-cn

推薦幾款DevTools外掛

Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發效能除錯的必備工具。就連隔壁的產品小哥都知道開啟F12改一下頁面元素的標籤程式碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

但是Chrome能做的遠不止你平常用的那麼簡單，這一個小小的開發工具整合了很多高階的功能你未必知道。我打算把一些Chrome DevTools上使用的高階技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學習學習。

關於DevTools外掛

應用於Chrome開發者工具的外掛不同於普通的Chrome應用或者外掛，它是給你的Chrome DevTools擴充套件更多的功能，方便你檢視和除錯web程式。它的安裝方法跟Chrome應用的安裝方法是一樣的，可以通過Chrome應用商店或者直接crx安裝檔案來安裝。

下面推薦幾款DevTools外掛，有些是博主親自試用過的，希望對大家的開發除錯有幫助。

jQuery Audit

安裝地址：Chrome應用商店連結
jQuery Audit是讓你可以在DevTools檢視頁面節點的jQuery屬性和資料，方便你除錯使用jQuery庫的web應用。你可以在上面看到你選中的頁面元素的jQuery的events、data等屬性。例如，很多人都喜歡用$.data()來讓jQuery節點物件快取一些資料，通過jQuery Audit你可以很方便地看到你快取的資料。

jQuery Audit會自動在Elements皮膚的最前面加上window和document物件，這對你除錯全域性的物件很有幫助。例如，出於對效能的考慮，當你想檢視繫結在window上繫結了哪些事件的時候，jQuery Audit可以幫你找到。

其他詳細的用法可以檢視官方文件。

JS Runtime Inspector

安裝地址：Chrome應用商店連結
JS Runtime Inspector讓你可以在DevTools上直接通過關鍵詞來搜尋頁面上JavaScript物件。當你想知道此時你的程式中某個JavaScript物件的屬性和資料，然而你並不知道它所在哪個作用域，只知道物件名稱，因而你不能在控制檯用window.xxxObj的方式來訪問這個物件，所以此時你可以藉助JS Runtime Inspector來查詢這個物件了。

Devtools redirect

安裝地址：Chrome應用商店連結
Devtools redirect可以幫你給頁面上的網路連線重定位。事實上網路請求重定位的功能，可以用fiddler或者ngix輕鬆實現，但Devtools redirect可以讓你直接在瀏覽器上配置這些重定位。

jQuery Debugger

安裝地址：Chrome應用商店連結
jQuery Debugger顧名思義就是幫你debug jQuery啦:-) 它主要有兩大功能：
1.通過選擇器字串來查詢頁面上的某個元素，等同於你在程式碼裡寫$(‘ul>li’)這樣的方式。

2.檢視頁面某個元素的jQuery物件屬性。這有點類似前面說過的jQuery Audit外掛。

Grunt DevTools

安裝地址：Chrome應用商店連結
一個可以在DevTools快速執行和檢視Grunt任務的外掛。有了它，你就不用經常地在瀏覽器工具、terminal和編輯器上來回切換視窗了。

CoffeeScript Console

安裝地址：Chrome應用商店連結
有了它，你可以在DevTools上直接執行CoffeeScript和JavaScript之間的程式碼轉換。

Angular Batarang

安裝地址：Chrome應用商店連結
這個不用解釋，開發和除錯Angular.js應用的神器。

類似的針對不同js框架的除錯工具還有：Backbone DevTools 、 KnockoutJS Context

DevTools Theme

最後介紹的不是DevTools的外掛，而是主題。大家或許有疑問：這個由什麼用呢？嗯，沒錯，就是裝B用的。當別人看著你在除錯網頁的時候，開啟的Chrome開發工具竟然是如此高大上。。。
ZeroDarkMatrix主題：Chrome應用商店連結

另外還有：
Dracula主題：Chrome應用商店連結
Flatland主題：Chrome應用商店連結
安裝這些主題的方法可以檢視ZeroDarkMatrix的說明。
總結

好的，這次的DevTools外掛就推薦了這幾個。總的來說，Chrome瀏覽器真的很強大，DevTools工具為我們的開發除錯工作帶來很多方便。如果大家對於如何開發DevTools外掛有想法的話，可以去Chrome DevTools的官方文件看看“如何開發DevTools外掛”https://developer.chrome.com/extensions/devtools。

參考

http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/
https://developer.chrome.com/extensions/devtools