資訊專欄INFORMATION COLUMN
摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學習學習。在代碼中使用的最簡單的用法就是寫個在控制臺打印一行消息。跟的區別在于會對輸出的對象進行展開。用于顯示一組的控制臺輸出，要搭配來使用。
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輸出，你一下子找不到你自己的模塊的輸出語句。如果給你自己的模塊輸入語句應用了不同的顏色，相對來說比較好定位到輸出的地方，這是提高效率的一個小技巧。
其他的函數例如info,error,warn基本類似，只是在代表的意義和輸出的樣式有所區別。
除此之外，console還有一些比較少見但實用的api。
console.trace跟log的區別在于trace會對輸出的對象進行展開。
console.group用于顯示一組的控制臺輸出，要搭配console.groupEnd來使用。
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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78023.html
摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對大家的開發調試有幫助。這有點類似前面說過的插件。類似的針對不同框架的調試工具還有最后介紹的不是的插件，而是主題。總結好的，這次的插件就推薦了這幾個。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的...
摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學習學習。然而，這還不是最嚴重的，因為的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有。總結前端在調試代碼的時候，知道開發工具上的小技巧，可以提高查找問題的效率。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔...
摘要：在前端開發中，調試技術是必不可少的技能，本文將介紹五種前端開發必備的調試技術。移動調試斷點斷點方法遠程映射本地調試在移動上面開發調試是很復雜的，所以就有了。 在前端開發中，調試技術是必不可少的技能，本文將介紹五種前端開發必備的調試技術。 Weinre移動調試 DOM 斷點 debugger斷點 native方法hook 遠程映射本地調試 Weinre 在移動上面開...
1、Chrome控制臺小技巧 打開和關閉抽屜式選項卡：按Esc鍵可打開和關閉 DevTools 的 Drawer（抽屜式選項卡） 在Drawer（抽屜式選項卡）中，你可以在 Console 控制臺中執行命令，查看動畫檢查器(Animations)，配置網絡條件(network conditions)和渲染(rendering)設置，搜索(search)字符串和文件等 showImg(https...
1、Chrome控制臺小技巧 打開和關閉抽屜式選項卡：按Esc鍵可打開和關閉 DevTools 的 Drawer（抽屜式選項卡） 在Drawer（抽屜式選項卡）中，你可以在 Console 控制臺中執行命令，查看動畫檢查器(Animations)，配置網絡條件(network conditions)和渲染(rendering)設置，搜索(search)字符串和文件等 showImg(https...
閱讀 2296·2023-04-25 16:42
閱讀 1202·2021-11-22 14:45
閱讀 2338·2021-10-19 13:10
閱讀 2827·2021-09-29 09:34
閱讀 3408·2021-09-23 11:21
閱讀 2100·2021-08-12 13:25
閱讀 2180·2021-07-30 15:15
閱讀 3491·2019-08-30 15:54
