1.1 概述
- 調(diào)試程序免钻，顯示網(wǎng)頁(yè)代碼運(yùn)行時(shí)的錯(cuò)誤信息
- 提供了一個(gè)命令行接口倒淫，用來(lái)與網(wǎng)頁(yè)代碼互動(dòng)
- 運(yùn)行JavaScript命令
1.2 三種打開方式（chrome）
- 按F12或者Control + Shift + i（PC平臺(tái)）/ Alt + Command + i（Mac平臺(tái)）
- “工具/開發(fā)者工具”
- “Inspect Element”
1.1 log()失息，info()骏庸，debug()戚啥，warn()杂数，error() 打印
- console.info()和console.debug()都是console.log方法的別名宛畦，用法完全一樣
- 用來(lái)與控制臺(tái)窗口互動(dòng)
1.1.1 Console.log
- 用于在console窗口輸出信息
參數(shù)格式
第一種
- 接受多個(gè)參數(shù)
- 將它們的結(jié)果連接起來(lái)輸出
- 會(huì)自動(dòng)在每次輸出的結(jié)尾，添加換行符
第二種
- 第一個(gè)參數(shù)是格式字符串（使用了格式占位符）
- console.log方法將依次用后面的參數(shù)替換占位符耍休，然后再進(jìn)行輸出
- 不同格式的數(shù)據(jù)必須使用對(duì)應(yīng)格式的占位符
%s 字符串 %d 整數(shù) %i 整數(shù) %f 浮點(diǎn)數(shù) %o 對(duì)象的鏈接 %c CSS格式字符串
console.log('%cThis text is styled!','color: red; background: yellow; font-size: 24px;')
兩種結(jié)合
console.log(' %s + %s ', 1, 1, '= 2') // 1 + 1 = 2
console.log({foo: 'bar'}) // Object {foo: "bar"}
console.log(Date) // function Date() { [native code] }
1.1.2 Console.warn警告
- 輸出信息時(shí)刃永，在最前面加一個(gè)黃色三角，表示警告
1.1.3 Console.error錯(cuò)誤
- 輸出信息時(shí)羊精，在最前面加一個(gè)紅色的叉斯够，表示出錯(cuò)，同時(shí)會(huì)顯示錯(cuò)誤發(fā)生的堆棧
1.1.4 Console.table打印出對(duì)象表格
可以將某些復(fù)合類型的數(shù)據(jù)轉(zhuǎn)為表格顯示
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
]; console.table(languages);
- 復(fù)合型數(shù)據(jù)轉(zhuǎn)為表格顯示的條件是喧锦，必須擁有主鍵
- 對(duì)于數(shù)組來(lái)說(shuō)读规，主鍵就是數(shù)字鍵
- 對(duì)于對(duì)象來(lái)說(shuō)，主鍵就是它的最外層鍵
1.1.5 Console.count調(diào)用次數(shù)
- 用于計(jì)數(shù)燃少，輸出它被調(diào)用了多少次
- 接受一個(gè)字符串作為參數(shù)束亏，作為標(biāo)簽，對(duì)執(zhí)行次數(shù)進(jìn)行分類
console.count('cc')//cc: 1 console.count('cc')//cc: 2
dir()阵具，dirxml()
1.1.6 Console.dir打印對(duì)象閱讀格式
- 用來(lái)對(duì)一個(gè)對(duì)象進(jìn)行檢查（inspect）碍遍，并以易于閱讀和打印的格式顯示
console.dir({f1: 'foo', f2: 'bar'})
// Object
// f1: "foo"
// f2: "bar"
// __proto__: Object
- 該方法對(duì)于輸出DOM對(duì)象非常有用，因?yàn)闀?huì)顯示DOM對(duì)象的所有屬性
1.1.7 Console.dirxml將DOM節(jié)點(diǎn)樹狀圖打印
- 用于以目錄樹的形式阳液，顯示DOM節(jié)點(diǎn)
- 如果參數(shù)不是DOM節(jié)點(diǎn)怕敬，而是普通的JavaScript對(duì)象，console.dirxml等同于console.dir
1.2 Console.assert（boolean,”字符串”）判斷邏輯是否正確
- 接受兩個(gè)參數(shù)帘皿，第一個(gè)參數(shù)是表達(dá)式东跪，第二個(gè)參數(shù)是字符串
- 只有當(dāng)?shù)谝粋€(gè)參數(shù)為false，才會(huì)輸出第二個(gè)參數(shù)鹰溜，否則不會(huì)有任何結(jié)果
console.assert(typeof 11 === "number","11不是number類型");沒(méi)有報(bào)錯(cuò)
1.3 time(“同樣的字符串”)虽填，timeEnd(”同樣的字符串”)計(jì)時(shí)
這兩個(gè)方法用于計(jì)時(shí)，可以算出一個(gè)操作所花費(fèi)的準(zhǔn)確時(shí)間
1.3.1 Time
- 表示計(jì)時(shí)開始曹动，在程序最前面使用
1.3.2 timeEnd
- 程序結(jié)束時(shí)使用斋日，表示計(jì)時(shí)結(jié)束
- 它們的參數(shù)是計(jì)時(shí)器的名稱
- 調(diào)用timeEnd方法之后，console窗口會(huì)顯示“計(jì)時(shí)器名稱: 所耗費(fèi)的時(shí)間”
1.3.3 group()墓陈，groupend()桑驱，groupCollapsed()折疊
- console.group和console.groupend這兩個(gè)方法用于將顯示的信息分組
- 它只在輸出大量信息時(shí)有用竭恬，分在一組的信息，可以用鼠標(biāo)折疊/展開
- console.groupCollapsed方法與console.group方法很類似熬的，唯一的區(qū)別是該組的內(nèi)容痊硕，在第一次顯示時(shí)是收起的（collapsed），而不是展開的
1.4 trace()押框，clear()調(diào)用路徑,清除
1.4.1 Console.trace
- 顯示當(dāng)前執(zhí)行的代碼在堆棧中的調(diào)用路徑
1.4.2 Console.clear
- 用于清除當(dāng)前控制臺(tái)的所有輸出岔绸，將光標(biāo)回置到第一行
2命令行API
- 在控制臺(tái)中，除了使用console對(duì)象橡伞，還可以使用一些控制臺(tái)自帶的命令行方法盒揉。
2.1 $_
- 返回上一個(gè)表達(dá)式的值
2.2 $0 - $4
- 控制臺(tái)保存了最近5個(gè)在Elements面板選中的DOM元素，$0代表倒數(shù)第一個(gè)兑徘，$1代表倒數(shù)第二個(gè)刚盈，以此類推直到$4
2.3 $(selector)
- 返回一個(gè)數(shù)組，包括特定的CSS選擇器匹配的所有DOM元素挂脑。該方法實(shí)際上是document.querySelectorAll方法的別名
2.4 $$(selector)取DOM
- 返回一個(gè)選中的DOM對(duì)象藕漱，等同于document.querySelectorAll
2.5 $x(path)
- 返回一個(gè)數(shù)組，包含匹配特定XPath表達(dá)式的所有DOM元素
2.6 nspect(object)取DOM和JS
- 打開相關(guān)面板崭闲，并選中相應(yīng)的元素：DOM元素在Elements面板中顯示肋联，JavaScript對(duì)象在Profiles面板中顯示
2.7 getEventListeners(object)取對(duì)象和所有事件
- 返回一個(gè)對(duì)象，該對(duì)象的成員為登記了回調(diào)函數(shù)的各種事件（比如click或keydown）
- 每個(gè)事件對(duì)應(yīng)一個(gè)數(shù)組刁俭，數(shù)組的成員為該事件的回調(diào)函數(shù)
2.8 keys(object)橄仍，values(object)取數(shù)組鍵名和值
2.8.1 keys(object)
- 返回一個(gè)數(shù)組，包含特定對(duì)象的所有鍵名
2.8.2 values(object)
- 返回一個(gè)數(shù)組牍戚，包含特定對(duì)象的所有鍵值
2.9 monitorEvents(object[, events])侮繁，unmonitorEvents(object[, events])
2.9.1 monitorEvents(object[, events])監(jiān)聽對(duì)象和事件
- 監(jiān)聽特定對(duì)象上發(fā)生的特定事件
- 當(dāng)這種情況發(fā)生時(shí)，會(huì)返回一個(gè)Event對(duì)象如孝，包含該事件的相關(guān)信息
2.9.2 unmonitorEvents
- 用于停止監(jiān)聽
monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])
unmonitorEvents(window, 'resize');
####2.10監(jiān)聽同一大類事件（四個(gè)大類）
>######1. mouse：
”mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
######2. key：
”keydown”, “keyup”, “keypress”, “textInput”
######3. touch：
”touchstart”, “touchmove”, “touchend”, “touchcancel”
######4. control：
”resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”
####2.11 profile([name])宪哩，profileEnd()CPU性能測(cè)試
####2.11.1 Profil
> - 用于啟動(dòng)一個(gè)特定名稱的CPU性能測(cè)試
####2.11.2 profileEnd
> - 用于結(jié)束該性能測(cè)試
###2.12其他方法
####2.12.1 clear()
> - 清除控制臺(tái)的歷史
####2.12.2 copy(object)
> - 復(fù)制特定DOM元素到剪貼板
####2.12.3 dir(object)
> - 顯示特定對(duì)象的所有屬性，是console.dir方法的別名
####2.12.4 dirxml(object)
> - 顯示特定對(duì)象的XML形式暑竟，是console.dirxml方法的別名。
###3 debugger設(shè)置斷點(diǎn)
> - 用于除錯(cuò)育勺，作用是設(shè)置斷點(diǎn)
- 如果有正在運(yùn)行的除錯(cuò)工具
- 程序運(yùn)行到debugger語(yǔ)句時(shí)會(huì)自動(dòng)停下
- 如果沒(méi)有除錯(cuò)工具
- debugger語(yǔ)句不會(huì)產(chǎn)生任何結(jié)果但荤，JavaScript引擎自動(dòng)跳過(guò)這一句
- 在Chrome瀏覽器中，當(dāng)代碼運(yùn)行到debugger語(yǔ)句時(shí)涧至，就會(huì)暫停運(yùn)行腹躁，-
自動(dòng)打開控制臺(tái)界面
>
for(var i = 0; i < 5; i++){
console.log(i);
if (i === 2) debugger;
}
- 上面代碼打印出0，1南蓬，2以后纺非，就會(huì)暫停哑了，自動(dòng)打開控制臺(tái)，等待進(jìn)一步處理