作者：燁竹

寫在前面：因為只是學(xué)習(xí)珊蟀，所以只寫了自己想學(xué)的远寸，畢竟我只是個小白途蒋。主要介紹斷點調(diào)試猛遍，和console控制臺。

一号坡、ui界面簡介

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

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

2018-05-15_142419.png

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

三、斷點調(diào)試

斷點.png

四宽堆、控制臺

控制臺用途.png

打開方式：conloseCtrl+Shift+J
清除控制臺歷史記錄：clear（）

功能簡介

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

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

2.運行JavaScript壁肋。您可以通過在控制臺中鍵入JavaScript語句來查看和更改頁面的DOM∽崖或者浸遗，如果您只想進行實驗，則可以使用控制臺作為您的代碼游樂場來運行與頁面無關(guān)的代碼箱亿。

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

診斷并記錄到控制臺中

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

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

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

console.group() 和 console.groupEnd() 對相關(guā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() 顯示條件性錯誤消息

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

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

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

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

%s 將值格式化為字符串

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

%f 將值格式化為浮點值

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

%O 將值格式化為可擴展 JavaScript 對象

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

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

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

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

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

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

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

高級示例：記錄特定的屬性

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í)行點之間經(jīng)過的時間驾茴。

基本示例

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() 對相同字符串傳遞到函數(shù)的次數(shù)進行計數(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]);

異常和錯誤處理

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

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

2.打印堆疊追蹤

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

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

api

>console.assert(expression, object):在被評估的表達式為 false 時向控制臺寫入一個錯誤
console.clear():清除控制臺

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

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

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

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

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

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

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

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

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

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

console.log(object [, object, ...]);;在控制臺中顯示一條消息豁护。將一個或多個對象傳遞到此方法哼凯。每個對象都會進行評估并級聯(lián)到一個由空格分隔的字符串中

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

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

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

console.timeEnd(label)停止當(dāng)前的計時器（如果正在運行一個計時器），并將計時器標(biāo)簽和經(jīng)過的時間輸出到控制臺沉唠。

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

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

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

評估表達式

只需鍵入表達式即可對其進行評估。
按下 Enter 鍵后满葛，此控制臺可評估您提供的任何 JavaScript 表達式
輸入表達式后径簿，系統(tǒng)將顯示屬性名稱建議；控制臺還會提供自動填充和 Tab 自動補全功能

使用一個快捷鍵選擇元素嘀韧。

$() 返回與指定 CSS 選擇器匹配的第一個元素篇亭。 document.querySelector() 的快捷鍵。
$$() 返回一個與指定 CSS 選擇器匹配的所有元素數(shù)組锄贷。等同于 document.querySelectorAll()暗赶。
$x() 返回一個與指定 XPath 匹配的元素數(shù)組鄙币。

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

inspect() 函數(shù)選取一個 DOM 元素或 JavaScript 引用作為一個參數(shù)蹂随。
如果您提供一個 DOM 元素十嘿，則 DevTools 進入“Elements”面板并顯示該元素。如果您提供一個 JavaScript 引用岳锁，則它進入“Profile”面板绩衷。

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

使用 $0 - 4 訪問最近選擇的元素和對象

控制臺在變量中存儲最后使用的五個元素和對象，以方便訪問乒躺。使用 $0 - 4 從控制臺訪問這些元素
請記住招盲，計算機從 0 開始計算，這意味著最新的項目是 $0嘉冒，最早的項目是 $4

監(jiān)控事件

使用 monitorEvents() 偵聽特定類型的事件曹货。

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

使用 unmonitorEvents() 停止偵聽。

unmonitorEvents(document.body);

使用 getEventListeners() 獲取 DOM 元素的偵聽器究驴。

getEventListeners() API 返回在指定對象上注冊的事件偵聽器
getEventListeners(document);

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

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

Command Line API 參考

$_：$_ 返回最近評估的表達式的值

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

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

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

$x(path) 返回一個與給定 XPath 表達式匹配的 DOM 元素數(shù)組

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

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

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

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

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

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

getEventListeners(object) 返回在指定對象上注冊的事件偵聽器

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

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

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

profile() 使用可選的名稱啟動一個 JavaScript CPU 分析會話爬坑。
profileEnd() 在 Profile 面板中完成分析纠屋，并顯示結(jié)果

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

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

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

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

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

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

Application.png

六闯估、進階版--開發(fā)常用使用實例

1.選取DOM元素

$$('id或者class')

2.所見即所得

document.body.contentEditable=true