資訊專欄INFORMATION COLUMN
摘要：未使用，等庫引用之后清除控制臺(tái)的所有輸出用于將數(shù)據(jù)以表格的形式輸出。在控制臺(tái)輸出警告信息，用法和一樣。
console.log
基本用法console.log() 方法主要用來在控制臺(tái)打印信息。其參數(shù)是不定的，可以傳遞任意多個(gè)參數(shù)，以逗號(hào)分割。
console.log("hello");
console.log("hello", "world");
console.log(obj1, obj2, document.getElementsByTagName("div"));
占位符
console.log() 提供了很多占位符，方便我們更加自如的定制我們的打印樣式。
| 樣式占位符 | 作用 |
|---|---|
| %s | 字符串占位符 |
| %d 或者 %i | 整數(shù)占位符 |
| %f | 浮點(diǎn)數(shù)占位符 |
| %o | 可展開的DOM |
| %O | 列出DOM的屬性 |
| %c | 根據(jù)提供的css樣式格式化字符串（字符串格式的css樣式） |
這里僅以%c為例。
console.log("%c javascript", "color: #ff0000; font-size:36px;");
結(jié)果如下：
console.log 除了在控制臺(tái)打印我們需要的調(diào)試信息以外，還可以制作一些圖畫。
如下（盜圖）
上面的圖畫，當(dāng)然不是通過手動(dòng)打出來的，有工具哦，推薦兩個(gè)：
http://picascii.com/ http://www.degraeve.com/img2txt.php控制臺(tái)顯示圖片
另外，也可以使用console.log在控制臺(tái)顯示圖片。
console.log("%c ", "background: url(https://img.aotu.io/FiLwh8e3l--mGdsJNw3Bm-Z8o_JF) no-repeat center center;font-size:60px;padding:50px 200px;background-size:100% 100%;");
效果如下圖：
在控制臺(tái)通過console.log打印圖片，需要注意的是：
1、console.log 不能定義圖片，因此借助于css背景圖片； 2、console.log 不支持對(duì)圖片進(jìn)行width，height設(shè)置，但是我們可以通過 font-size,padding,line-height 間接設(shè)置寬高，上面的示例也證明了這一點(diǎn)；展開對(duì)象
最后，console.log 借助 JSON.stringify 可以對(duì)一個(gè)對(duì)象進(jìn)行展開打印：
var obj = {
name: "lxs",
size: 20,
child: [
{
name: "ywx",
size: 0
},
{
name: "hhh",
size: 1
}
]
};
console.log(JSON.stringify(obj, null, 4));
打印效果如下：
console.time 可以開啟一個(gè)定時(shí)器，來跟蹤摸一個(gè)（或者一組）操作所花費(fèi)的時(shí)間，遇到同樣參數(shù)的console.timeEnd方法時(shí)，會(huì)關(guān)閉這個(gè)定時(shí)器，并在瀏覽器控制臺(tái)輸出所花費(fèi)的時(shí)間。
之前，我們想要知道某一些操作所花費(fèi)的時(shí)間時(shí)，通常會(huì)這么做：
var start = new Date(); ... ... ... var end = new Date(); console.log(end - start);
但是一個(gè)更方便快捷的方式就是使用 console.time 和 console.timeEnd
console.time("cost");
for (var i = 0, j = 0; i < 10000; i++) {
j++;
}
console.timeEnd("cost");
結(jié)果如下：
$_ 代表上一個(gè)語句的執(zhí)行結(jié)果：
代表的是inspect最近選中的5個(gè)DOM元素，
$0是最近選中的一次，$1...$4以此類推。這個(gè)很有用，在elements面板中單擊某個(gè)DOM后，在控制臺(tái)直接輸入$0,就是對(duì)剛才單擊元素的引用。
假設(shè)我們有如下DOM結(jié)構(gòu)：
我們依次單擊
div#J_content0, div#J_content1, div#J_content2, div#J_content3, div#J_content4, div#J_content5
再看控制臺(tái)：
控制臺(tái)中的$0引用的是 div#J_content5，$1引用的是倒數(shù)第二次點(diǎn)擊的div#J_content4, ... 到$5 的時(shí)候報(bào)錯(cuò)了，是因?yàn)槟壳爸С?個(gè).。
$(selector) 與 $$(selector)
這里的$并不是jquery的那個(gè)$, 而是瀏覽器提供的一個(gè) Command Line API.
$(selector)只匹配一個(gè)元素，其實(shí)是document.querySelector（如果支持）的別名； $$(selector)返回匹配的所有元素，其實(shí)是document.querySelectorAll（如果支持）的別名；
還是上面的DOM結(jié)構(gòu)：
$("div")
$$("div")
結(jié)果如下：
剛才說過，這里的$并不是 jquery， zepto等庫的$,那是在頁面沒有引用這些庫的情況下，如果頁面使用了這些庫，那么$就會(huì)被覆蓋。
未使用jquery，zepto等庫：
引用jquery之后：
table清除控制臺(tái)的所有輸出
console.table 用于將數(shù)據(jù)以表格的形式輸出。
console.table(["apples", "oranges", "bananas"]);
在控制臺(tái)輸出如下：
var names = {
0: {
firstName: "michael",
lastName: "jordan"
},
1: {
firstName: "bryant",
lastName: "kobe"
}
};
console.table(names, ["firstName", "lastName"]);
console.group 與 console.groupEnd
在控制臺(tái)上新建一個(gè)分組，隨后打印的內(nèi)容都會(huì)被添加一個(gè)縮進(jìn)，表示該內(nèi)容屬于當(dāng)前分組，直到遇到console.groupEnd()之后，當(dāng)前分組結(jié)束。
console.group(); console.log(1); console.log(2); console.log(3); console.groupEnd(); console.group(); console.log(4); console.log(5); console.log(6); console.groupEnd();console.info
console.warn在控制臺(tái)輸出通知信息，用法和 console.log 一樣。
console.debug在控制臺(tái)輸出警告信息，用法和 console.log 一樣。
console.errorconsole.log 的別名。
在控制臺(tái)輸出錯(cuò)誤信息，用法和 console.log 一樣。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89294.html
摘要：前言不定時(shí)更新在線預(yù)覽在線預(yù)覽的源碼部分內(nèi)容僅兼容內(nèi)核，其他內(nèi)核自行查詢可控密度的虛線分隔線通過更改值控制密度展示通過各屬性及方向轉(zhuǎn)換實(shí)現(xiàn)橫縱向不同的分隔線文字漸隱春眠不覺曉處處聞啼鳥夜來風(fēng)雨聲花落知多少引導(dǎo)用戶下方 前言 不定時(shí)更新 在線預(yù)覽 https://zzyper.github.io/opti... 在線預(yù)覽的源碼 https://github.com/zzyper/op...
摘要：前言不定時(shí)更新在線預(yù)覽在線預(yù)覽的源碼部分內(nèi)容僅兼容內(nèi)核，其他內(nèi)核自行查詢可控密度的虛線分隔線通過更改值控制密度展示通過各屬性及方向轉(zhuǎn)換實(shí)現(xiàn)橫縱向不同的分隔線文字漸隱春眠不覺曉處處聞啼鳥夜來風(fēng)雨聲花落知多少引導(dǎo)用戶下方 前言 不定時(shí)更新 在線預(yù)覽 https://zzyper.github.io/opti... 在線預(yù)覽的源碼 https://github.com/zzyper/op...
摘要：前言不定時(shí)更新在線預(yù)覽在線預(yù)覽的源碼部分內(nèi)容僅兼容內(nèi)核，其他內(nèi)核自行查詢可控密度的虛線分隔線通過更改值控制密度展示通過各屬性及方向轉(zhuǎn)換實(shí)現(xiàn)橫縱向不同的分隔線文字漸隱春眠不覺曉處處聞啼鳥夜來風(fēng)雨聲花落知多少引導(dǎo)用戶下方 前言 不定時(shí)更新 在線預(yù)覽 https://zzyper.github.io/opti... 在線預(yù)覽的源碼 https://github.com/zzyper/op...
摘要：小程序自選股項(xiàng)目團(tuán)隊(duì)在長達(dá)五個(gè)月的時(shí)間里經(jīng)歷了太多不為人知的故事，不知通宵了多少個(gè)夜晚，只為等待小龍宣布號(hào)小程序正式發(fā)布的到來。第一次被微信開放平臺(tái)開發(fā)二組團(tuán)隊(duì)小程序項(xiàng)目團(tuán)隊(duì)當(dāng)小白鼠各種實(shí)驗(yàn)新特性。。 導(dǎo)語：我很喜歡小龍的一句話，微信因你而變。是的，把事情做到極致的時(shí)候，這個(gè)世界就會(huì)因你而變。 小程序自選股項(xiàng)目團(tuán)隊(duì)在長達(dá)五個(gè)月的時(shí)間里經(jīng)歷了太多不為人知的故事， 不知通宵了多少個(gè)夜晚，只...
閱讀 2036·2021-10-09 09:41
閱讀 1609·2021-09-28 09:36
閱讀 1115·2021-09-26 09:55
閱讀 1303·2021-09-10 11:17
閱讀 1159·2021-09-02 09:56
閱讀 2772·2019-08-30 12:58
閱讀 2940·2019-08-29 13:03
閱讀 1867·2019-08-26 13:40
