Console
console是瀏覽器開發(fā)者工具自帶的API，并不是JavaScript原生對象。
常規(guī)
以面板形式打開
要打開專用的 Console 面板，請執(zhí)行以下操作之一：<br />按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。 如果 DevTools 已打開，則按 Console 按鈕。 打開 Console 面板時，Console 抽屜式導(dǎo)航欄將自動折疊。
以抽屜式導(dǎo)航欄形式打開
要以任何其他面板旁的抽屜式導(dǎo)航欄的形式打開控制臺，請執(zhí)行以下操作之一：<br />在 DevTools 處于聚焦?fàn)顟B(tài)時按 Esc。 按 Customize and control DevTools 按鈕，然后按 Show console。
show-console.png
消息堆疊
如果一條消息連續(xù)重復(fù)，而不是在新行上輸出每一個消息實例，控制臺將“堆疊”消息并在左側(cè)外邊距顯示一個數(shù)字。<br />此數(shù)字表示該消息已重復(fù)的次數(shù)。
message-stacking.png
show-timestamps.png
其他設(shè)置
打開 DevTools 設(shè)置，轉(zhuǎn)至 General 標(biāo)簽，然后向下滾動到 Console 部分，查看更多控制臺設(shè)置。
Hide network messages
默認(rèn)情況下，控制臺將報告網(wǎng)絡(luò)問題。 啟用此設(shè)置將指示控制臺不顯示這些錯誤的日志。 例如，將不會記錄 404 和 500 系列錯誤。
Log XMLHttpRequests
確定控制臺是否記錄每一個 XMLHttpRequest。
Preserve log upon navigation
在頁面刷新或?qū)Ш綍r保留控制臺歷史記錄。
Show timestamps
在調(diào)用時向顯示的每條控制臺消息追加一個時間戳。 對于發(fā)生特定事件時的調(diào)試非常實用。 這會停用消息堆疊。
Autocomplete from history
在輸入時獲取歷史輸入中的內(nèi)容，自動填充。
側(cè)邊欄
單擊
showconsolesidebar.png
sidebar.png
<a name="8r1ZQ"></a>
按嚴(yán)重級別過濾內(nèi)容
DevTools為每種console.*方法分配一個嚴(yán)重級別。有4個級別：Verbose，Info， Warning，和Error。例如，console.log()在Info組中，而 console.error()在Error組中。<br />點擊 Default levels 下拉菜單來啟用或禁用Verbose，Info，Warning或 Error消息。
loglevels.png
<a name="2hofi"></a>
通過URL過濾消息
鍵入url:后跟一個URL，以僅查看來自該URL的消息。鍵入url:DevTools 后，將顯示所有相關(guān)的URL。
urlfilter.png
negativeurlfilter.png
<a name="T6Es0"></a>
console常用方法
<a name="consolelog"></a>
console.log
// 用于輸出普通信息
console.log("zzz")
console.warn
// 用于輸出警示信息
console.warn("zzz")
console.error
// 用于輸出錯誤信息
console.error("zzz")
上述幾種方法都支持printf的占位符格式
%s：字符串
console.log("%sgoogle","谷歌——")
%d or %i：整數(shù)
console.log("%d年%i月%d日",2020,1,1)
%f：浮點數(shù)
console.log("1÷2=%f",0.5)
%o or %O：對象
var dog = {};
dog.variety = "柯基";
dog.color = "黃色";
console.log("%o",dog)
console.log("%O",dog)
// %o、%O 都是用來輸出 Object 對象的，對普通的 Object 對象，兩者區(qū)別不大，但是打印dom節(jié)點時，結(jié)果完全不同；
// %o 格式成可展開的的DOM，像在開發(fā)者工具Element面板那樣可展開,等同于console.dirxml()
console.log('%o',document.body.firstElementChild);
// %O 像JS對象那樣訪問DOM元素，可查看DOM元素的屬性,等同于console.dir()
console.log('%O',document.body.firstElementChild);
// 另：%o 加和不加對輸出結(jié)果沒影響
%c：根據(jù)提供的css樣式格式化字符串
// 使用 %c 占位符時，對應(yīng)的后面的參數(shù)必須是 CSS 語句，用來對輸出內(nèi)容進(jìn)行 CSS 渲染;
console.log("%c微醫(yī)","color: #000; font-size: 20px; font-weight: 900; font-family:MicrosoftYaHei;");
為以上幾種方法加上統(tǒng)一的樣式
['log','info','warn','error'].forEach(item => {
let print = console[item];
console[item] = function() {
print.call(console, '%c'+Array.prototype.slice.apply(arguments).join(' '), 'font-size: 16px;font-weight: bold;text-decoration: underline; color: #fff; padding: 100px; background: url(https://img1.gamersky.com/upimg/pic/2019/09/23/201909231900469272.jpg)')
}
})
console.log("zzz")
console.warn("zzz")
console.error("zzz")
<a name="P5Zrc"></a>
console其他方法
<a name="consolegroup-consolegroupend"></a>
console.group & console.groupEnd
// 分組輸出
console.group('這是一個組')
console.log('1')
console.log('2')
console.log('3')
console.groupEnd()
console.time & console.timeEnd
// 計算某段程序運行時間
console.time('time')
for(let i = 0; i < 10; i++){
console.log(1)
}
console.timeEnd('time')
console.table
// 輸出表格
let obj = {
test_1: 'ffff',
test_2: '這是test',
arr_1: [1,{a: 'arr_obj'}, 'string']
}
console.table(obj)
var arr= [
{ num: "1"},
{ num: "2"},
{ num: "3" }
];
console.table(arr);
var obj2= {
a:{ num: "1"},
b:{ num: "2"},
c:{ num: "3" }
};
console.table(obj2);
<a name="consolecount"></a>
console.count
// 輸出代碼執(zhí)行次數(shù)
for (var i = 0; i < 5; i++) {
// 括號里可以傳參，輸出時會成為冒號前面的內(nèi)容
console.count('count');
}
// 在函數(shù)中寫這個方法，可以記錄函數(shù)是第幾次執(zhí)行
//可以用這個方法重置計數(shù)
console.countReset('count');
<a name="consoleassert"></a>
console.assert
// 判斷一個表達(dá)式或變量是否為真
var i = 1;
console.assert(i);
var year = 2019;
console.assert(year == 2020);
$()
// 返回匹配指定CSS選擇器的所有DOM元素的引用
$("div")
monitorEvents()
// 第一個參數(shù)是要監(jiān)聽的對象。如果未提供第二個參數(shù)，所有事件都會返回。要指定要監(jiān)聽的事件，傳遞一個字符串或字符串?dāng)?shù)組作為第二個參數(shù)
monitorEvents(document.body, "click")
unmonitorEvents()
// 停止監(jiān)聽對象上的事件
unmonitorEvents(document.body)
keys()
// keys()返回一個數(shù)組，其中包含屬于指定對象的屬性的鍵
values()
// values()返回一個數(shù)組，其中包含屬于指定對象的屬性的值
直接輸入元素的ID
// 可以直接輸出該DOM元素
