javascript Console控制檯調試開發

參考網站：http://javascript.ruanyifeng.com/tool/console.html#toc3 

參考博客：http://www.cnblogs.com/shenqi0920/p/3217765.html

學習網站：http://javascript.ruanyifeng.com/stdlib/json.html

                http://www.cnblogs.com/rubylouvre/

1.經常使用的Console系列函數有:

console.log()，console.info()，console.debug(),console.warn()，console.error()，對應着某些要輸出內容的級別，至關於log日誌同樣。
特色：
①其實這些方法的實現中，參數由arguments獲取，所以能夠傳遞1個或者多個參數, 如  console.log({age:20});  console.log(1,2,4);
②參數的第一個參數能夠是格式化佔位符，console.log(" %s + %s = %s", 2, 2, 2)，或者 console.log(" %s + %s = ", 1, 1, 2)

2.這裏列出全部可能的佔位符

%d, %i	整數
%f	浮點數
%o	對象的連接
%c	CSS格式字符串
%s	字符串

首先來看2個例子，都是google開發者工具（猛摁電腦功能鍵F12）,在控制檯的輸出

facebook
   

baidu
   

3.代碼分析

咱們如今只看百度的源代碼就好了

這是圖片的

if(window.console){var c=console,r=t("#search-box .logo");c&&r.size()&&(c.log("\n\n%c","font-size:0;line-height:50px;padding-top:"+r.height()+"px; padding-left:"+r.width()+"px;background:"+r.css("background")+";background-repeat:no-repeat;")

文字的就不粘貼了，基本全是 utf-8轉義字符

額，貌似不夠流暢，轉換一下吧

if (window.console) {
    var cons = console;
    if (cons) {
        cons.log("%c\n\t   ", "font-size:41px;background:url('http://cdn.iknow.bdimg.com/static/common/pkg/module_zed9cd9fd.png') no-repeat -135px -1px");
        cons.log('想和咱們共同打造世界最大中文互動問答平臺嗎？\n想讓本身的成就在億萬用戶面前展示嗎？想讓世界看得你的光芒嗎？\n加入咱們，在這裏不只是工做，投入你的時間和熱情，滴滴汗水終會匯聚成不平凡的成果。\n期待你的加盟。www.baidu.com');
        cons.log("請在郵件中註明%c來自:console", "color:red;font-weight:bold;");
    }
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4.使用console.table輸出表格

var user = [
   { name: "zhangsan", age: 20,id:1024 },
   { name: "lisi", age: 22,id:1023 },
   { name: "wangwu", age: 23,id:1025 },
];

console.log(user);

5.console.dir(object) 打印對象信息，類PHP中的var_dump函數和python中的dir函數

var user = [
   { name: "zhangsan", age: 20,id:1024 },
   { name: "lisi", age: 22,id:1023 },
   { name: "wangwu", age: 23,id:1025 },
];

var strUser = JSON.stringify(user);

console.dir(user);

console.dir(strUser);

6.斷言console.assert()，相似java中的斷言

7,console.time(tag)，console.timeEnd(tag)耗時計算

var tag = 'task name';
console.time(tag);
for(var i=1;i<=9;i++)
{
    for(var j=1;j<=i;j++)
    {
        console.log(document.createTextNode(j+'*'+i+'='+(i*j)))
    }
}
console.timeEnd(tag)

8.console.clear()清除控制檯

9.console.trace()打印代碼調用的堆棧信息

10.console.dirxml(obj)

11.設定斷點

for(var i = 0;i<5;i++){
    console.log(i);
    if (i===2) debugger;
}

12.性能測試

13.控制檯命令（非javascript命令）

$_屬性返回上一個表達式的值。
$$(selector)返回一個選中的DOM對象，等同於document.querySelectorAll。
$x(path)方法返回一個數組，包含匹配特定XPath表達式的全部DOM元素。
keys(object)方法返回一個數組，包含特定對象的全部鍵名。
values(object)方法返回一個數組，包含特定對象的全部鍵值。
inspect(object)方法打開相關面板，並選中相應的元素：DOM元素在Elements面板中顯示，JavaScript對象在Profiles中顯示
getEventListeners(object)方法返回一個對象，該對象的成員爲登記了回調函數的各類事件（好比click或keydown），每一個事件對應一個數組，數組的成員爲該事件的回調函數。
monitorEvents(object[, events]) ，unmonitorEvents(object[, events])
monitorEvents(object[, events])方法監聽特定對象上發生的特定事件。當這種狀況發生時，會返回一個Event對象，包含該事件的相關信息。unmonitorEvents方法用於中止監聽。

14.js合併壓縮

Google Closure是Google提供的一個JavaScript源碼處理工具，主要用於壓縮和合並多個JavaScript腳本文件。

java -jar /path/to/closure/compiler.jar --js script1.js --js script2.js --js script3.js