Console命令，讓js調試更簡單

一、顯示信息的命令

console.log("normal");           // 用於輸出普通信息
console.info("information");     // 用於輸出提示性信息
console.error("error");          // 用於輸出錯誤信息
console.warn("warn");            // 用於輸出警示信息

 

二、點位符：字符(%s)、整數(%d或%i)、浮點數(%f)和對象(%o);

console.log("%s","string");                 //字符(%s)
console.log("%d年%d月%d日",2016,8,29);       //整數(%d或%i)
console.log("圓周率是%f",3.1415926);         //浮點數(%f)
var dog = {};
dog.name = "大毛";
dog.color = "黃色";
dog.sex = "母狗";
console.log("%o",dog);                      //對象(%o)

 

三、信息分組 (console.group(),console.groupEnd())

按 Ctrl+C 復制代碼

按 Ctrl+C 復制代碼

 

 

四、將對象以樹狀結構展現 (console.dir()可以顯示一個對象所有的屬性和方法)

var info = {
    name : "Alan",
    age : "27",
    grilFriend : "nothing",
    getName : function(){
        return this.name;
    }
}
console.dir(info);

 

五、顯示某個節點的內容 (console.dirxml()用來顯示網頁的某個節點(node)所包含的html/xml代碼)

var node = document.getElementById("info");
node.innerHTML += "<p>追加的元素顯示嗎</p>";
console.dirxml(node);

 

六、判斷變量是否是真 (console.assert()用來判斷一個表達式或變量是否為真，只有表達式為false時，才輸出一條相應作息，並且拋出一個異常)

var testObj = false;
console.assert(testObj, '當testObj為false時才輸出！');

 

七、計時功能 (console.time()和console.timeEnd()，用來顯示代碼的運行時間)

console.time("控制台計時器");
for(var i = 0; i < 10000; i++){
    for(var j = 0; j < 10000; j++){}       
}
console.timeEnd("控制台計時器");

 

八、性能分析performance profile (就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()和console.proileEnd();) 

function All(){
    // alert(11);
    for(var i = 0; i < 10; i++){
        funcA(100);
    }
    funcB(1000);
}
function funcA(count){
    for(var i = 0; i < count; i++){};
}
function funcB(count){
    for(var i = 0; i < count; i++){};
}
console.profile("性能分析器");
All();
console.profileEnd();

詳細的信息在chrome控制台里的"profile"選項里查看

 

九、console.count()統計代碼被執行的次數

function myFunction(){
    console.count("myFunction 被執行的次數");
}
myFunction();       //myFunction 被執行的次數: 1
myFunction();       //myFunction 被執行的次數: 2
myFunction();       //myFunction 被執行的次數: 3

 

十、keys和values，要在瀏覽器里輸入

 

 

十一、console.table表格顯示方法

var mytable = [
    {
        name: "Alan",
        sex : "man",
        age : "27"
    },
    {
        name: "Wu",
        sex : "gril",
        age : "28"
    },
    {
        name: "Tao",
        sex : "man and gril",
        age : "29"
    }
]
console.table(mytable);

 

十二、Chrome 控制台中原生支持類jQuery的選擇器，也就是說你可以用$加上熟悉的css選擇器來選擇DOM節。

$("body");           //選擇body節點

 

十三、copy通過此命令可以將在控制台獲取到的內容復制到剪貼板

copy(document.body);                      //復制bodycopy(document.getElementById("info"));    //復制某id元素的的節點

 

十四、$_命令返回最近一次表達式執行的結果，$0-$4代表了最近5個你選擇過的DOM節點

 

 

十五、利用控制台輸出文字,圖片,以%c開頭，后面的文字就打印的信息，后面一個參數就是樣式屬性；

console.log("請在郵件中注明%c 來自:console","font-size:16px;color:red;font-weight:bold;");