javascript的console命令

時間 2019-11-10

標籤 javascript console 命令欄目 JavaScript 简体版

原文原文鏈接

1.分類輸出html

console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('錯誤信息');

2.分組輸出數組

console.group('1');
    console.log("1-1");
    console.log("1-2");
console.groupEnd();
console.group('2');
    console.log("2-1");
    console.log("2-2");
console.groupEnd();

生成摺疊的分組flex

console.groupCollapsed('1');
    console.log("1-1");
    console.log("1-2");
console.groupEnd();
console.groupCollapsed('2');
    console.log("2-1");
    console.log("2-2");
console.groupEnd();

嵌套spa

console.group('1');
    console.group("1-1");
        console.group("1-1-1");
            console.log('內容');
        console.groupEnd();
    console.groupEnd();
    console.group("1-2");
        console.log('內容');
        console.log('內容');
    console.groupEnd();
console.groupEnd();
console.groupCollapsed('2');
    console.group("2-1");
    console.log('內容');
    console.groupEnd();
    console.group("2-2");
    console.groupEnd();
console.groupEnd();

3.表格輸出3d

console.table()將傳入的對象，或數組以表格形式輸出code

var Obj = {
    Obj1: {
        a: "a1",
        b: "b1",
        c: "c1"
    },
    Obj2: {
        a: "a2",
        b: "b2",
        c: "c2"
    },
    Obj3: {
        a: "a3",
        b: "b3",
        c: "c3"
    }
}
console.table(Obj);

var Arr = [
    ["a1","b1","c1"],
    ["a2","b2","c2"],
    ["a3","b3","c3"],
]
console.table(Arr);

4.查看對象xml

顯示一個對象的全部屬性和方法Console.dir()和Console.log()相同htm

var ss = {
    name: 'AA',
    title: 'title1',   
}
console.log("console.dir(ss)");
console.dir(ss);
console.log("console.log(ss)");
console.log(ss);

5.查看節點對象

Console.dirxml()顯示一個對象的全部屬性和方法blog

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flowchart</title>
<meta charset="UTF-8">
</head>
<body>
<div id="sample">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div id="myPaletteDiv" style="width: 150px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 720px; border: solid 1px black"></div>
  </div>
</div>
</body>
</html>
<script>
console.log("console.dirxml");
console.dirxml(document.getElementById("sample"));
console.log("console.log");
console.log(document.getElementById("sample"));
</script>

6.條件輸出

當第一個參數或返回值爲真時，不輸出內容
當第一個參數或返回值爲假時，輸出後面的內容並拋出異常

console.assert(true, "see");
console.assert((function() { return true;})(), "see");
console.assert(false, "not see");
console.assert((function() { return false;})(), "not see");

7.記次輸出

輸出內容和被調用的次數

(function () {
    for(var i = 0; i < 5; i++){
        console.count("運行次數：");
    }
})()

8.追蹤調用堆棧

function add(a, b) {
    console.trace("Add");
    return a + b;
}
function add2(a, b) {
    return add1(a, b);
}

function add1(a, b) {
    return add(a, b);
}
var x = add2(1, 1);

9.計時

Console.time()中的參數做爲計時器的標識，具備惟一性
Console.timeEnd()中的參數來結束此標識的計時器，並以毫秒爲單位返回運行時間
最多同時運行10000個計時器

console.time("Chrome中循環1000次的時間");
for(var i = 0; i < 1000; i++)
{
}
console.timeEnd("Chrome中循環1000次的時間");

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。