.info(); // 以->信息方式_輸出參數對象
.warn(); // 以->警告方式_輸出參數對象
.error(); // 以->錯誤方式_輸出參數對象
.log(); // 以->日志方式_輸出參數對象
.table(); // 以->表格方式_輸出參數對象
.exception(); // 以->異常方式_輸出參數對象.異常
.debug(); // 以->排查方式_輸出參數對象.排查出來的[錯誤,漏洞]
.assert(); // 以->真假方式_輸出參數對象.真假的結果[假:斷言失敗,真:輸出響應內容]
.dir(); // 以->目錄方式_輸出參數對象.所有[屬性，方法]
.dirxml(); // 以->內容方式_輸出參數對象.[html/xml]標簽內容
.count(); // 以->計算方式_輸出所在位置被執行的次數
.trace(); // 以->記錄方式_輸出參數對象=>函數.被調用的記錄
.group(); // 以->分組方式_輸出參數對象
.groupCollapsed(); // 以->分組方式_輸出參數對象,與 group() 相同,不過默認是折疊顯示
.groupEnd(); // 表明分組結束
.time(); // 開始計時
期間對象(執行的時間)
.timeEnd(); // 結束計時
.profile(); // 開始分析性能
期間對象(時間性能)
.profileEnd(); // 結束分析性能
.timeStamp(); // 時間戳
.clear(); // 清空 console 中所有的信息
---------------------------------------------
顯示信息命令函數
console.log(); --日志
console.info(); --信息
console.error(); --錯誤
console.warn(); --警告
console.debug(); --漏洞
---------------------------------------------
printf占位符： [%s表示一個字符串,%d表示一個整數,%f表示浮點數,%o表示對象,%c表示css樣式]
/////////////////////////////////////
<script type='text/javascript'>
console.log("%d年%d月%d日",2016,9,21);
</script>
輸出：
2016年9月21日
/////////////////////////////////////
<script type='text/javascript'>
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');
</script>
輸出：
My name is classicemi. [添加了css樣式后的表現的文本]
/////////////////////////////////////
<script type='text/javascript'>
console.log("%c","padding:50px 300px; line-height: 120px; background: url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");
</script>
輸出：
樣式里的 background背景圖
---------------------------------------------
信息分組輸出：
console.group();
console.groupend();
/////////////////////////////////////
<script type="text/javascript">
console.group("第一組信息");
console.log("第一組第一條:我的博客(http://www.ido321.com)");
console.log("第一組第二條:CSDN(http://blog.csdn.net/u011043843)");
console.groupEnd();
console.group("第二組信息");
console.log("第二組第一條:程序愛好者QQ群: 259280570");
console.log("第二組第二條:歡迎你加入");
console.groupEnd();
</script>
輸出：
第一組信息
第一組第一條:我的博客(http://www.ido321.com)
第一組第二條:CSDN(http://blog.csdn.net/u011043843)
第二組信息
第二組第一條:程序愛好者QQ群: 259280570
第二組第二條:歡迎你加入
---------------------------------------------
對象目錄信息：
console.dir();
可以顯示一個對象所有的屬性和方法。
/////////////////////////////////////
<script type='text/javascript'>
var info={
blog:"http://www.ido321.com",
QQGroup:259280570,
message:"程序愛好者歡迎你的加入"
};
console.dir(info);
</script>
輸出：
blog "http://www.ido321.com"
QQGroup 259280570
message "程序愛好者歡迎你的加入"
---------------------------------------------
顯示Dom節點內容：
console.dirxml();
用來顯示網頁的某個節點（node）所包含的html/xml代碼。
/////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>我的博客:www.ido321.com</h3>
<p>程序愛好者:259280570,歡迎你的加入</p>
</div>
</body>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</html>
輸出：
<div id="info">
<h3>我的博客:www.ido321.com</h3>
<p>程序愛好者:259280570,歡迎你的加入</p>
</div>
---------------------------------------------
判斷變量是否真假：
console.assert();
用來判斷一個表達式或變量是否為真。如果結果為否，則在控制台輸出一條相應信息，並且拋出一個異常。
/////////////////////////////////////
<script type="text/javascript">
var result = 1;
console.assert( result ); // 為真 true
var year = 2014;
console.assert(year == 2018 ); // 為假 false
</script>
輸出：
+斷言失敗 fileName(第?行)
console.assert(year == 2018 );
---------------------------------------------
追蹤函數的調用痕跡及順序：
console.trace();
用來追蹤函數的調用痕跡及順序。
/////////////////////////////////////
<script type="text/javascript">
/*函數是如何被調用的，在其中加入console.trace()方法就可以了*/
function add(a,b){
console.trace();
return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
</script>
輸出：
add() fileName(第?行)
a=1
b=1
add1() fileName(第?行)
a=1
b=1
add2() fileName(第?行)
a=1
b=1
add3() fileName(第?行)
a=1
b=1
.html() fileName(第?行)
---------------------------------------------
計時：
console.time();
console,timeEnd();
/////////////////////////////////////
用來計算區間代碼運行的時間戳差值
<script type="text/javascript">
console.time("控制台計時器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台計時器一");
</script>
輸出：
??.??ms fileName(第?行)
---------------------------------------------
性能分析：
console.profile();console.profileEnd();
性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()。
/////////////////////////////////////
<script type="text/javascript">
function All(){
alert(11);
for(var i=0;i<10;i++){
funcA(1000);
}
funcB(10000);
}
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();
</script>
輸出：
性能分析器(?????.???毫秒, ??次調用)
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
+ 函數 + 調用 + 百分比 + 占用時間 + 時間 + 平均時間 + 最小時間 + 最大時間 + 文件 +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
+ All + 1 + 99.77% + 1161.864ms + 1164.492ms + 1164.492ms + 1164.492ms + 1164.492ms + fileName(第?行) +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
+ funcA + 10 + 0.14% + 1.635ms + 1.635ms + 0.163ms + 0.098ms + 0.466ms + fileName(第?行) +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
+ funcB + 1 + 0.09% + 0.993ms + 0.993ms + 0.993ms + 0.993ms + 0.993ms + fileName(第?行) +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
window.console對象的方法
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。