快捷導(dǎo)航

JavaScript的console命令使用實(shí)例

更新時(shí)間：2019年12月03日 09:03:37 作者：慕塵

這篇文章主要介紹了javascript的console命令使用實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1.分類輸出

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

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();

生成折疊的分組

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();

嵌套

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

3.表格輸出

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

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.查看對(duì)象

顯示一個(gè)對(duì)象的所有屬性和方法Console.dir()和Console.log()相同

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

5.查看節(jié)點(diǎn)

Console.dirxml()顯示一個(gè)對(duì)象的所有屬性和方法

<!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.條件輸出

當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為真時(shí)，不輸出內(nèi)容
當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為假時(shí)，輸出后面的內(nèi)容并拋出異常

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

7.記次輸出

輸出內(nèi)容和被調(diào)用的次數(shù)

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

8.追蹤調(diào)用堆棧

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.計(jì)時(shí)

Console.time()中的參數(shù)作為計(jì)時(shí)器的標(biāo)識(shí)，具有唯一性
Console.timeEnd()中的參數(shù)來(lái)結(jié)束此標(biāo)識(shí)的計(jì)時(shí)器，并以毫秒為單位返回運(yùn)行時(shí)間
最多同時(shí)運(yùn)行10000個(gè)計(jì)時(shí)器

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript的console命令使用實(shí)例

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具