資訊專欄INFORMATION COLUMN
摘要：當做一些性能測試時，同樣可以在這里很方便地進行。前者返回傳入對象所有屬性名組成的數據，后者返回所有屬性值組成的數組。而便是用來停止這一監聽。而則是解除該斷點。
Chrome瀏覽器我想是每一個前端er必用工具之一吧，一部分原因是它速度快，體積不大，支持的新特性也比其它瀏覽器多，還有一部分我想就是因為它的控制臺功能強大了吧，說它是神器一點也不過分，很方便。但其實很多開發者并沒有用出控制臺的精髓，只是使用簡單的console.log();其實控制臺功能遠遠不止這么簡單哦。
1.console.clear
console.clear();清空控制臺，這個應該和console.log知名度一樣高吧。
2.console.log ("普通信息")
3.console.info ("提示性信息")
4.console.error ("錯誤信息")
5.console.warn ("警示信息")
大家都會用log，但很少有人能夠很好地利用console.error，console.warn 等將輸出到控制臺的信息進行分類整理。他們功能區別不大，意義在于將輸出到控制臺的信息進行歸類，或者說讓它們更語義化。
6.console.group 與console.groupEnd
如果再配合console.group 與console.groupEnd，可以將這種分類管理的思想發揮到極致。這適合于在開發一個規模很大模塊很多很復雜的Web APP時，將各自的log信息分組到以各自命名空間為名稱的組里面。
這樣的控制臺信息看上去就一目了然了，就不用再為了找這是屬于那一行代碼輸出的再翻一遍源碼了。
另外，console.log家族還給我們提供了一個的API：第一個參數可以帶一些格式化指令，比如%c,n;看下面這個炫酷的效果：
當然，圖片也是可以的，讀者可以自行嘗試，修改上述代碼即可。
另外，console.log() 接收不定參數，參數間用逗號分隔，最終會輸出會將它們以空白字符連接。
7.console.table
看著這種“黑魔法”是不是有種坑分的感覺呢，其實還不止哦！console.table可以讓我們輸出表格,示例：
有的時候后端傳回來一大串數據，是不是覺得直接console.log或是通過抓包工具查看都會讓人暈頭轉向呢，這個時候正事console.table發揮作用的時候了，以表格的形式呈現數據，自然一目了然。例如下面：
8.console.assert
當你想代碼滿足某些條件時才輸出信息到控制臺，那么你大可不必寫if或者三元表達式來達到目的，cosole.assert便是這樣場景下一種很好的工具，它會先對傳入的表達式進行斷言，只有表達式為假時才輸出相應信息到控制臺。
9.console.count
除了條件輸出的場景，還有常見的場景是計數。
當你想統計某段代碼執行了多少次時也大可不必自己去寫相關邏輯，內置的console.count可以很地勝任這樣的任務.
10.console.dir
將DOM結點以JavaScript對象的形式輸出到控制臺，而console.log是直接將該DOM結點以DOM樹的結構進行輸出，與在元素審查時看到的結構是一致的。不同的展現形式，同樣的優雅，各種體位任君選擇反正就是方便與體貼。
11.console.time & console.timeEnd
輸出一些調試信息是控制臺最常用的功能，當然，它的功能遠不止于此。當做一些性能測試時，同樣可以在這里很方便地進行。比如需要考量一段代碼執行的耗時情況時，可以用console.time與 console.timeEnd來做此事。
測出for循環1000次的時間
12.console.profile與 console.profileEnd
當想要查看CPU使用相關的信息時，可以使用console.profile配合 console.profileEnd來完成這個需求。
這一功能可以通過UI界面來完成，Chrome 開發者工具里面有個tab便是Profile。使用方法和console.time基本一樣，其實time開發者工具里也有個tab就是timeline。
可以通過火狐的firebug插件查看用兩種不同方式創建1000個數組的cpu占用情況以及花費時間
目前測試了一下火狐的firebug插件好用的只有火狐的49版本瀏覽器
瀏覽器下載地址：http://mydown.yesky.com/pcsof...
$
講真，米國程序員們真的很喜歡money?。ㄕl又不是呢），看看PHP就知道了，滿屏的$。而在Chrome的控制臺里，$用處同樣是蠻多且方便的。
上面的$_需要領悟其奧義才能使用得當，而$0~$4則代表了最近5個你選擇過的DOM節點。
什么意思呢？在頁面右擊選擇審查元素，然后在彈出來的DOM結點樹上面隨便點選，這些被點過的節點會被記錄下來，而$0會返回最近一次點選的DOM結點，以此類推，$1返回的是上上次點選的DOM節點，最多保存了5個，如果不夠5個，則返回undefined。
$和document.querySelector()一樣，萬能選擇器，選取符合要求的第一個元素
15.$$和document.querySelectorAll()一樣，萬能選擇器，選取符合要求的所有元素
16.$x(path)
將所匹配的節點放在一個數組里返回
$x("http://div[a]");返回所有子節點包含a的div
注意：必須帶雙斜杠
17.copy
copy(document.body)
然后你就可以Ctrl+v了。
注意：他不依附于任何全局變量比如window，所以其實在JS代碼里是訪問不了這個copy方法的，所以從代碼層面來調用復制功能也就無從談起。但愿有天瀏覽器會提供相應的JS實現吧~這樣我們就可以通過js代碼進行復制操作而不用再依賴Flash插件了。
18.keys & values
這是一對基友。前者返回傳入對象所有屬性名組成的數據，后者返回所有屬性值組成的數組。具體請看下面的例子：
19.monitor & unmonitor
monitor(function)，它接收一個函數名作為參數，比如function a，每次a被執行了，都會在控制臺輸出一條信息，里面包含了函數的名稱a及執行時所傳入的參數。而unmonitor(function)便是用來停止這一監聽。
20.debug & undebug
debug同樣也是接收一個函數名作為參數。當該函數執行時自動斷下來以供調試，類似于在該函數的入口處打了個斷點，可以通過debugger來做到，同時也可以通過在Chrome開發者工具里找到相應源碼然后手動打斷點。而undebug 則是解除該斷點。而其他還有好些命令則讓人沒有說的欲望，因為好些都可以通過Chrome開發者工具的UI界面來操作并且比用在控制臺輸入要方便。
chrome開發者工具文檔地址：
http://www.css88.com/doc/chro...
?大家感興趣可以去看看chrome開發者工具文檔，對于調試有很大幫助
文章鏈接：原文地址
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116658.html
摘要：當做一些性能測試時，同樣可以在這里很方便地進行。前者返回傳入對象所有屬性名組成的數據，后者返回所有屬性值組成的數組。而便是用來停止這一監聽。而則是解除該斷點。 Chrome瀏覽器我想是每一個前端er必用工具之一吧，一部分原因是它速度快，體積不大，支持的新特性也比其它瀏覽器多，還有一部分我想就是因為它的控制臺功能強大了吧，說它是神器一點也不過分，很方便。但其實很多開發者并沒有用出控制臺的...
摘要：當做一些性能測試時，同樣可以在這里很方便地進行。前者返回傳入對象所有屬性名組成的數據，后者返回所有屬性值組成的數組。而便是用來停止這一監聽。而則是解除該斷點。 Chrome瀏覽器我想是每一個前端er必用工具之一吧，一部分原因是它速度快，體積不大，支持的新特性也比其它瀏覽器多，還有一部分我想就是因為它的控制臺功能強大了吧，說它是神器一點也不過分，很方便。但其實很多開發者并沒有用出控制臺的...
摘要：是我比較喜歡的一個瀏覽器，本文作者通過圖文并茂的方式向我們展示了的個基礎使用技巧，我從中發現跟使用中有很多類似的快捷鍵，希望你也能從中有所收獲。 chrome是我比較喜歡的一個瀏覽器，本文作者通過圖文并茂的方式向我們展示了Chrome的13個基礎使用技巧，我從中發現跟使用Sublime Text2中有很多類似的快捷鍵，希望你也能從中有所收獲。 1.快速切換文件 我一般如果查找每個文件，...
摘要：瀏覽器顯示及交互背后的原理引子因為筆者愛編程的光頭強近期在寫一本關于小程序入門的書籍。不基于瀏覽器背后的運行原理，是很難說清楚虛擬被引入的真正原因和最大好處的。它是瀏覽器的核心部分。 瀏覽器顯示及交互背后的原理 引子 因為筆者（愛編程的光頭強）近期在寫一本關于小程序入門的書籍。其中有一章是介紹虛擬DOM的，它是位于Javascript和真正DOM之間的一層緩存層。為什么引入它，為什么它...
閱讀 2631·2019-08-30 15:53
閱讀 2870·2019-08-29 16:20
閱讀 1081·2019-08-29 15:10
閱讀 1018·2019-08-26 10:58
閱讀 2188·2019-08-26 10:49
閱讀 630·2019-08-26 10:21
閱讀 700·2019-08-23 18:30
閱讀 1635·2019-08-23 15:58
