JavaScript的console命令使用實例
更新時間：2019年12月03日 09:03:37 作者：慕塵
這篇文章主要介紹了javascript的console命令使用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
這篇文章主要介紹了javascript的console命令使用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
1.分類輸出
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();
生成折疊的分組
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()將傳入的對象，或數(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.查看對象
顯示一個對象的所有屬性和方法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é)點
Console.dirxml()顯示一個對象的所有屬性和方法
<!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.條件輸出
- 當?shù)谝粋€參數(shù)或返回值為真時，不輸出內(nèi)容
- 當?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("運行次數(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.計時
- Console.time()中的參數(shù)作為計時器的標識，具有唯一性
- Console.timeEnd()中的參數(shù)來結(jié)束此標識的計時器，并以毫秒為單位返回運行時間
- 最多同時運行10000個計時器
console.time("Chrome中循環(huán)1000次的時間");
for(var i = 0; i < 1000; i++)
{
}
console.timeEnd("Chrome中循環(huán)1000次的時間");
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap Table 后臺數(shù)據(jù)綁定、特殊列處理、排序功能
本節(jié)主要介紹Bootstrap的后臺數(shù)據(jù)綁定、特殊列處理及列的排序功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-05-05
Javascript實現(xiàn)漢字和拼音互轉(zhuǎn)的終極方案
網(wǎng)上關(guān)于JS實現(xiàn)漢字和拼音互轉(zhuǎn)的文章很多，但是比較雜亂，有的不支持多音字、不支持聲調(diào)或者字典文件太大，無法根據(jù)實際需要滿足需求。這篇文章給大家修正整理網(wǎng)上的幾種常見方法，文章結(jié)尾還附簡單的JS拼音輸入法，本文對大家具有一定的參考借鑒價值，下面一起看看吧。2016-10-10
這幾天不是很忙，就找了些拖動布局方面的資料看看，也學著寫了個拖動布局的效果，沒想到花了好多時間， 七拼八湊，總算是把這個效果寫出來了。哎！還是js的功夫太差。因為是邊找資料邊寫的，很多地方印象不深， 時間一長，再重新寫估計也難，所以把當時的思路記錄一下！也希望大蝦指點一下！2008-05-05
javascript 實現(xiàn)文本使用省略號替代（超出固定高度的情況）
這篇文章主要介紹了javascript 實現(xiàn)文本使用省略號替代（超出固定高度的情況）的相關(guān)資料,需要的朋友可以參考下2017-02-02
本篇文章主要是對js實現(xiàn)身份證號碼驗證的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了React Native登錄之指紋登錄篇,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
判斷對象中是否有某屬性的常見方式總結(jié)，不同的場景要使用不同的方式。這篇文章給大家介紹了JavaScript 判斷對象中是否有某屬性的常用方法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
javascript實現(xiàn)uploadify上傳格式以及個數(shù)限制
這篇文章主要介紹了javascript如何限制uploadify上傳格式以及個數(shù)的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2015-11-11
Lodash是一個JavaScript的實用工具庫,提供了很多常用的函數(shù)和工具,可以幫助我們更方便地操作數(shù)據(jù)和處理邏輯,這篇文章主要介紹了lodash?使用,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了JS實現(xiàn)煙花爆炸效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03