作者：燁竹

寫(xiě)在前面：因?yàn)橹皇菍W(xué)習(xí)，所以只寫(xiě)了自己想學(xué)的，畢竟我只是個(gè)小白。主要介紹斷點(diǎn)調(diào)試，和console控制臺(tái)。

一、ui界面簡(jiǎn)介

Ctrl+ Shift+ P 打開(kāi)DevTools命令菜單
setting設(shè)置菜單

二、前端css樣式調(diào)節(jié)

2018-05-15_142419.png

樣式調(diào)節(jié).png

三、斷點(diǎn)調(diào)試

斷點(diǎn).png

四、控制臺(tái)

控制臺(tái)用途.png

打開(kāi)方式：conloseCtrl+Shift+J
清除控制臺(tái)歷史記錄：clear（）

功能簡(jiǎn)介

1.查看關(guān)于頁(yè)面的診斷信息。這些信息可以來(lái)自構(gòu)建頁(yè)面的Web開(kāi)發(fā)人員，也可以來(lái)自瀏覽器。

記錄消息：console.log('click listener executed')

2.運(yùn)行JavaScript。您可以通過(guò)在控制臺(tái)中鍵入JavaScript語(yǔ)句來(lái)查看和更改頁(yè)面的DOM。或者，如果您只想進(jìn)行實(shí)驗(yàn)，則可以使用控制臺(tái)作為您的代碼游樂(lè)場(chǎng)來(lái)運(yùn)行與頁(yè)面無(wú)關(guān)的代碼。

function add(a, b=20) {
  return a + b;
}
add(25);

診斷并記錄到控制臺(tái)中

console.log() 基本記錄
console.log("Node count:", "a.childNodes.length", "and the current time is:", Date.now());

console.error() 和 console.warn() 顯示引入注目的消息

console.error() 方法會(huì)顯示紅色圖標(biāo)和紅色消息文本；
console.warn() 方法會(huì)顯示一個(gè)黃色警告圖標(biāo)和相應(yīng)的消息文本；

console.group() 和 console.groupEnd() 對(duì)相關(guān)消息進(jìn)行分組，避免混亂

var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
    console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

console.assert() 顯示條件性錯(cuò)誤消息

console.assert() 方法可以僅在其第一個(gè)參數(shù)為 false 時(shí)有條件地顯示錯(cuò)誤字符串（其第二個(gè)參數(shù)）

console.assert(list.childNodes.length < 500, "Node count is > 500");
//此代碼僅會(huì)在屬于 list 元素的子節(jié)點(diǎn)數(shù)大于 500 時(shí)在控制臺(tái)中顯示一條錯(cuò)誤消息

字符串替代和格式設(shè)置

console.log("%s has %d points", "Sam", 100);

%s 將值格式化為字符串

%i 或 %d 將值格式化為整型

%f 將值格式化為浮點(diǎn)值

%o 將值格式化為可擴(kuò)展 DOM 元素。如同在 Elements 面板中顯示的一樣

%O 將值格式化為可擴(kuò)展 JavaScript 對(duì)象

%c 將 CSS 樣式規(guī)則應(yīng)用到第二個(gè)參數(shù)指定的輸出字符串

使用 CSS 設(shè)置控制臺(tái)輸出的樣式

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

將 DOM 元素格式化為 JavaScript 對(duì)象:console.dir ()

比較類似的數(shù)據(jù)對(duì)象

基本示例：記錄對(duì)象數(shù)組

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

高級(jí)示例：記錄特定的屬性

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

使用 console.time() 和 console.timeEnd() 跟蹤代碼執(zhí)行點(diǎn)之間經(jīng)過(guò)的時(shí)間。

基本示例

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

使用 console.count() 對(duì)相同字符串傳遞到函數(shù)的次數(shù)進(jìn)行計(jì)數(shù)。

function login(user) {
    console.count("Login called for user " + user);
}

users = [ // by last name since we have too many Pauls.
    'Irish',
    'Bakaus',
    'Kinlan'
];

users.forEach(function(element, index, array) {
    login(element);
});

login(users[0]);

異常和錯(cuò)誤處理

1.觸發(fā)異常時(shí)啟用 Pause on Exceptions 來(lái)調(diào)試代碼上下文。

i.跟蹤異常:查看JavaScript錯(cuò)誤消息,每一條消息都有一個(gè)指向文件名的鏈接，文件名帶有您可以導(dǎo)航到文件的行號(hào)。
ii.視圖異常堆疊追蹤:導(dǎo)致錯(cuò)誤的執(zhí)行路徑并不總是非常明顯。
完整的JavaScript 調(diào)用堆棧在控制臺(tái)中會(huì)伴隨著異常。展開(kāi)這些控制臺(tái)消息可以查看堆棧框架和導(dǎo)航到代碼中的相應(yīng)位置
iii.出現(xiàn)JavaScript 異常時(shí)暫停:下一次引發(fā)異常時(shí)，請(qǐng)暫停JavaScript 執(zhí)行并檢查其調(diào)用堆棧、范圍變量以及您應(yīng)用的狀態(tài)。
利用Scripts 面板底部的三態(tài)停止按鈕，您可以在不同的異常處理模式之間切換：暫停按鈕

2.打印堆疊追蹤

Error.stack:每個(gè)Error 對(duì)象都有一個(gè)包含堆疊追蹤的字符串屬性命名的堆棧
console.trace():使用可以打印當(dāng)前JavaScript調(diào)用跟蹤的console.trace()調(diào)用設(shè)置您的代碼
console.assert():通過(guò)將帶有錯(cuò)誤條件的console.assert()作為第一個(gè)參數(shù)調(diào)用，在您的JavaScript代碼中放置斷言。
當(dāng)此表達(dá)式評(píng)估為false時(shí)，您將看到一條相應(yīng)的Console記錄

3.使用 window.onerror 記錄瀏覽器中發(fā)生的錯(cuò)誤。

api

>console.assert(expression, object):在被評(píng)估的表達(dá)式為 false 時(shí)向控制臺(tái)寫(xiě)入一個(gè)錯(cuò)誤
console.clear():清除控制臺(tái)

console.count(label)寫(xiě)入在同一行使用相同標(biāo)簽調(diào)用 count() 的次數(shù)

console.debug(object [, object, ...]):與 console.log() 作用相同。

console.dir(object):輸出以 JavaScript 形式表示的指定對(duì)象。
如果正在記錄的對(duì)象是 HTML 元素，將輸出其以 DOM 形式表示的屬性，如下所示:console.dir(document.body);

console.dirxml(object)
如果可以，輸出 object 子級(jí)元素的 XML 表示形式，否則輸出其 JavaScript 表示形式
 在 HTML 和 XML 元素上調(diào)用 console.dirxml() 等同于調(diào)用 console.log()。

console.error(object [, object, ...])
輸出一條類似于 console.log() 的消息，將消息設(shè)置成錯(cuò)誤樣式，并在調(diào)用此方法的地方包含一個(gè)堆疊追蹤。

console.error(object [, object, ...])
輸出一條類似于 console.log() 的消息，將消息設(shè)置成錯(cuò)誤樣式，并在調(diào)用此方法的地方包含一個(gè)堆疊追蹤

console.group(object[, object, ...])
啟動(dòng)一個(gè)帶有可選標(biāo)題的新日志組。以可視化方式將在 console.group() 后、console.groupEnd() 前發(fā)生的所有控制臺(tái)輸出組合在一起;

console.groupCollapsed(object[, object, ...])創(chuàng)建一個(gè)初始處于折疊狀態(tài)而不是打開(kāi)狀態(tài)的新日志組

console.groupEnd()關(guān)閉日志組

console.info(object [, object, ...]);;輸出一條類似 console.log() 的消息，但同時(shí)在輸出旁顯示一個(gè)圖標(biāo)（帶白色“i”的藍(lán)色圓圈）

console.log(object [, object, ...]);;在控制臺(tái)中顯示一條消息。將一個(gè)或多個(gè)對(duì)象傳遞到此方法。每個(gè)對(duì)象都會(huì)進(jìn)行評(píng)估并級(jí)聯(lián)到一個(gè)由空格分隔的字符串中

console.profile([label]);;啟動(dòng)一個(gè)帶有可選標(biāo)簽的 JavaScript CPU 配置文件。要完成配置文件，請(qǐng)調(diào)用 console.profileEnd()
每一個(gè)配置文件都會(huì)添加到 Profiles 面板中

console.profileEnd();;停止當(dāng)前的 JavaScript CPU 分析會(huì)話（如果正在進(jìn)行此會(huì)話），并將報(bào)告輸出到 Profiles 面板中。

console.time(label);;啟動(dòng)一個(gè)具有關(guān)聯(lián)標(biāo)簽的新計(jì)時(shí)器。使用相同標(biāo)簽調(diào)用 console.timeEnd() 時(shí)，定時(shí)器將停止，經(jīng)過(guò)的時(shí)間將顯示在控制臺(tái)中
計(jì)時(shí)器值精確到亞毫秒。傳遞到 time() 和 timeEnd() 的字符串必須匹配，否則計(jì)時(shí)器不會(huì)結(jié)束

console.timeEnd(label)停止當(dāng)前的計(jì)時(shí)器（如果正在運(yùn)行一個(gè)計(jì)時(shí)器），并將計(jì)時(shí)器標(biāo)簽和經(jīng)過(guò)的時(shí)間輸出到控制臺(tái)。

console.timeStamp([label]);;在錄制會(huì)話期間向 Timeline 添加一個(gè)事件

console.trace(object);;從調(diào)用此方法的位置輸出一個(gè)堆疊追蹤

console.warn(object [, object, ...])輸出一條類似 console.log() 的消息，但同時(shí)在記錄的消息旁顯示一個(gè)黃色警告圖標(biāo)

評(píng)估表達(dá)式

只需鍵入表達(dá)式即可對(duì)其進(jìn)行評(píng)估。
按下 Enter 鍵后，此控制臺(tái)可評(píng)估您提供的任何 JavaScript 表達(dá)式
輸入表達(dá)式后，系統(tǒng)將顯示屬性名稱建議；控制臺(tái)還會(huì)提供自動(dòng)填充和 Tab 自動(dòng)補(bǔ)全功能

使用一個(gè)快捷鍵選擇元素。

$() 返回與指定 CSS 選擇器匹配的第一個(gè)元素。 document.querySelector() 的快捷鍵。
$$() 返回一個(gè)與指定 CSS 選擇器匹配的所有元素?cái)?shù)組。等同于 document.querySelectorAll()。
$x() 返回一個(gè)與指定 XPath 匹配的元素?cái)?shù)組。

使用 inspect() 檢查 DOM 元素和 JavaScript 堆對(duì)象。

inspect() 函數(shù)選取一個(gè) DOM 元素或 JavaScript 引用作為一個(gè)參數(shù)。
如果您提供一個(gè) DOM 元素，則 DevTools 進(jìn)入“Elements”面板并顯示該元素。如果您提供一個(gè) JavaScript 引用，則它進(jìn)入“Profile”面板。

當(dāng)此代碼在該頁(yè)面上的控制臺(tái)中執(zhí)行時(shí)，它會(huì)抓取此圖并在“Elements”面板上顯示它。
這會(huì)利用到 $_ 屬性以獲取最后一個(gè)評(píng)估的表達(dá)式的輸出。

使用 $0 - 4 訪問(wèn)最近選擇的元素和對(duì)象

控制臺(tái)在變量中存儲(chǔ)最后使用的五個(gè)元素和對(duì)象，以方便訪問(wèn)。使用 $0 - 4 從控制臺(tái)訪問(wèn)這些元素
請(qǐng)記住，計(jì)算機(jī)從 0 開(kāi)始計(jì)算，這意味著最新的項(xiàng)目是 $0，最早的項(xiàng)目是 $4

監(jiān)控事件

使用 monitorEvents() 偵聽(tīng)特定類型的事件。

第一個(gè)參數(shù)是要監(jiān)控的對(duì)象。如果不提供第二個(gè)參數(shù)，所有事件都將返回。
若要指定要偵聽(tīng)的事件，則傳遞一個(gè)字符串或一個(gè)字符串?dāng)?shù)組作為第二個(gè)參數(shù)
monitorEvents(document.body, "click");
如果監(jiān)控的事件是受支持的事件類型，DevTools 將其映射到一組標(biāo)準(zhǔn)事件名稱，則該方法偵聽(tīng)該類型的事件

使用 unmonitorEvents() 停止偵聽(tīng)。

unmonitorEvents(document.body);

使用 getEventListeners() 獲取 DOM 元素的偵聽(tīng)器。

getEventListeners() API 返回在指定對(duì)象上注冊(cè)的事件偵聽(tīng)器
getEventListeners(document);

使用“Event Listeners Inspector”面板獲取有關(guān)事件偵聽(tīng)器的信息

Elements Inspector 中的 Event Listeners 面板顯示附加到頁(yè)面的所有事件

Command Line API 參考

$_：$_ 返回最近評(píng)估的表達(dá)式的值

$0 - $4：$0、$1、$2、$3 和 $4 命令用作在 Elements 面板中檢查的最后五個(gè) DOM 元素或在 Profiles 面板中選擇的最后五個(gè) JavaScript 堆對(duì)象的歷史參考。
$0 返回最近一次選擇的元素或 JavaScript 對(duì)象，$1 返回僅在最近一次之前選擇的元素或?qū)ο螅来祟愅啤?在以下示例中，在 Elements 面板中選擇一個(gè)具有類 medium 的元素。
在 Console 抽屜式導(dǎo)航欄中，$0 已評(píng)估，并顯示相同的元素

$(selector) 返回帶有指定的 CSS 選擇器的第一個(gè) DOM 元素的引用。此函數(shù)等同于 document.querySelector() 函數(shù)

$$(selector) 返回與給定 CSS 選擇器匹配的元素?cái)?shù)組。此命令等同于調(diào)用 document.querySelectorAll()

$x(path) 返回一個(gè)與給定 XPath 表達(dá)式匹配的 DOM 元素?cái)?shù)組

clear() 清除其歷史記錄的控制臺(tái)

copy(object) 將指定對(duì)象的字符串表示形式復(fù)制到剪貼板

debug(function)：調(diào)用指定的函數(shù)時(shí)，將觸發(fā)調(diào)試程序，并在 Sources 面板上使函數(shù)內(nèi)部中斷，從而允許逐行執(zhí)行代碼并進(jìn)行調(diào)試

dir(object) 顯示所有指定對(duì)象的屬性的對(duì)象樣式列表。
此方法等同于 Console API 的 console.dir() 方法

dirxml(object) 輸出以 XML 形式表示的指定對(duì)象，如 Elements 標(biāo)簽中所示。
此方法等同于 console.dirxml() 方法

inspect(object/function) 在相應(yīng)的面板中打開(kāi)并選擇指定的元素或?qū)ο螅横槍?duì) DOM 元素使用 Elements 面板，或針對(duì) JavaScript 堆對(duì)象使用 Profiles 面板

getEventListeners(object) 返回在指定對(duì)象上注冊(cè)的事件偵聽(tīng)器

keys(object) 返回一個(gè)包含屬于指定對(duì)象的屬性名稱的數(shù)組。如需獲取相同屬性的關(guān)聯(lián)值，請(qǐng)使用 values()

monitor(function) 調(diào)用指定函數(shù)時(shí)，系統(tǒng)會(huì)向控制臺(tái)記錄一條消息，其中指明函數(shù)名稱及在調(diào)用時(shí)傳遞到該函數(shù)的參數(shù)

monitorEvents(object[, events])
當(dāng)在指定對(duì)象上發(fā)生一個(gè)指定事件時(shí)，將 Event 對(duì)象記錄到控制臺(tái)。
您可以指定一個(gè)要監(jiān)控的單獨(dú)事件、一個(gè)事件數(shù)組或一個(gè)映射到預(yù)定義事件集合的常規(guī)事件“類型
以下命令監(jiān)控 window 對(duì)象上的所有 resize 事件  
monitorEvents(window, "resize");

profile() 使用可選的名稱啟動(dòng)一個(gè) JavaScript CPU 分析會(huì)話。
profileEnd() 在 Profile 面板中完成分析，并顯示結(jié)果

table(data[, columns])通過(guò)傳入含可選列標(biāo)題的數(shù)據(jù)對(duì)象記錄具有表格格式的對(duì)象數(shù)據(jù)

undebug(function) 可停止調(diào)試指定函數(shù)，以便在調(diào)用函數(shù)時(shí)，不再調(diào)用調(diào)試程序

unmonitor(function) unmonitor(function) 可停止監(jiān)控指定函數(shù)。它可與 monitor(fn) 結(jié)合使用

unmonitorEvents(object[, events]) 可停止針對(duì)指定對(duì)象和事件的事件監(jiān)控

values(object) 返回一個(gè)包含屬于指定對(duì)象的所有屬性值的數(shù)組

五.檢查和管理存儲(chǔ)、數(shù)據(jù)庫(kù)與緩存

Application.png

六、進(jìn)階版--開(kāi)發(fā)常用使用實(shí)例

1.選取DOM元素

$$('id或者class')

2.所見(jiàn)即所得

document.body.contentEditable=true