建站
咨詢
售后
建站咨詢
新聞中心
常用快捷鍵
創(chuàng)新互聯(lián)建站是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、成都微信小程序、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十多年以來，已經(jīng)為1000多家水電改造各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的1000多家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。
- 在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開開發(fā)者工具或是在開發(fā)者工具已經(jīng)打開的情況下開啟查閱選項(xiàng)。
- 在Source選項(xiàng)， Cmd + o (Mac OS X) 可以搜索文件， Cmd + Shift + o (Mac OS X) 搜索文件中的對應(yīng)函數(shù)/特定選擇器的一個(gè)選擇框。
- Cmd + L (Mac OS X) 跳轉(zhuǎn)到指定行號(hào)。
- 要打開抽屜式控制臺(tái)，你需要在鍵盤上按下 Esc 鍵或者點(diǎn)擊開發(fā)者工具窗口右上角的 Show Drawer 按鈕。
Snippets
Snippets是一個(gè)新的可以在這個(gè)開發(fā)流程中使用的開發(fā)者工具，它允許你在源面板中創(chuàng)建，存儲(chǔ)和執(zhí)行 JavaScript。
- 書簽所有你的書簽可以作為片段進(jìn)行存儲(chǔ)，特別是那些你可能想編輯的。
- 實(shí)用工具調(diào)試工具可以和當(dāng)前頁面進(jìn)行交互，并且可以保存和調(diào)試。一個(gè)社區(qū)企劃的列表已經(jīng)被提供。
- Debugging Snippets提供了一個(gè)語法高亮顯示并且可持續(xù)的多行控制臺(tái)，這樣使得調(diào)試代碼比單行要更加便捷。
- Monkey-patching code你想要在運(yùn)行時(shí)修復(fù)的代碼可以通過 Snipptes 來完成，盡管多數(shù)時(shí)候你可能只是在源面板中實(shí)時(shí)編輯代碼。
如果你想在控制臺(tái)中，執(zhí)行 snippet 的一些特殊行中的代碼，你可以在編輯器中選中這些代碼，然后右鍵，選擇 Evaluate in Console 選項(xiàng)來進(jìn)行執(zhí)行。
控制臺(tái)
斷言
console.assert() 方法僅僅只當(dāng)它的***個(gè)參數(shù)為 false 時(shí)才顯示一個(gè)錯(cuò)誤信息字符串(它的第二個(gè)參數(shù))
在下面的代碼中，如果在列表中的子節(jié)點(diǎn)的數(shù)量超過 500，將會(huì)在控制臺(tái)中引起錯(cuò)誤信息。
示例：
- console.assert(list.childNodes.length < 500, "Node count is > 500");
結(jié)果：
輸出分組
你可以通過分組命令把相關(guān)聯(lián)的輸出信息分在一起。 group 命令通過一個(gè)字符串的參數(shù)來給你的組命名?？刂婆_(tái)將會(huì)把所有所有的輸出信息組合到一塊。要結(jié)束分組，你只需要調(diào)用 groupEnd 即可。
示例代碼
- var user = "jsmith", authenticated = true, authorized = true;
- // Top-level group
- console.group("Authenticating user '%s'", user);
- if (authenticated) {
- console.log("User '%s' was authenticated", user);
- // Start nested group
- console.group("Authorizing user '%s'", user);
- if (authorized) {
- console.log("User '%s' was authorized.", user);
- }
- // End nested group
- console.groupEnd();
- }
- // End top-level group
- console.groupEnd();
- console.log("A group-less log trace.");
結(jié)果：
瀏覽結(jié)構(gòu)化數(shù)據(jù)
table() 方法提供一個(gè)簡單的方法來查看相似數(shù)據(jù)對象。這將給一個(gè)數(shù)據(jù)提供屬性并且創(chuàng)建一個(gè)頭。行數(shù)據(jù)將會(huì)從每一個(gè)索引屬性值中獲取。
示例代碼：
- console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
- console.table([[1,2,3], [2,3,4]]);
結(jié)果：
table() 中的第二個(gè)參數(shù)是可選項(xiàng)。你可以定義任何你想顯示的屬性字符串?dāng)?shù)組。
一個(gè)使用了對象集合的控制臺(tái)輸出表。
示例代碼：
- 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"]);
結(jié)果：
將 DOM 元素格式化成 JavaScript 對象
當(dāng)你想要在控制臺(tái)中記錄一個(gè) DOM 元素，就顯示成了 XML 格式。在元素面板中也會(huì)是同樣的顯示。要顯示 JavaScript 格式的信息，你可以使用 dir() 方法或者是在 log() 中使用占位符來替換成你的 JavaScript。
使用 CSS 樣式來更改控制臺(tái)輸出形式
CSS 格式說明符可以修改在控制臺(tái)中輸出的樣式。以你要修飾的文字配上占位符開始，然后在第二個(gè)參數(shù)中寫上你要展示的風(fēng)格。
更改日志樣式
示例代碼：
- console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
結(jié)果：
計(jì)算時(shí)間開銷
通過 time() 方法可以啟動(dòng)一個(gè)計(jì)時(shí)器。你必須輸入一個(gè)字符串來識(shí)別時(shí)間的標(biāo)記。當(dāng)你要結(jié)束計(jì)算的時(shí)候，使用 timeEnd() 方法，并且傳遞一個(gè)相同的字符串給構(gòu)造器?？刂婆_(tái)會(huì)在 timeEnd() 方法結(jié)束的時(shí)候，記錄下標(biāo)簽以及時(shí)間的花銷。
關(guān)于 JavaScript 執(zhí)行時(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");
結(jié)果：
當(dāng) time() 方法正在執(zhí)行期間，將會(huì)生成一個(gè) 時(shí)間軸 記錄并為其做出注解。這對于追蹤應(yīng)用的使用以及其來源非常有用。
反向查找元素
你也可以在任何一個(gè)元素上右鍵然后點(diǎn)擊 Reveal in Elements Panel，這樣就可以在DOM 中找到它。
控制臺(tái)設(shè)置
在開發(fā)者工具的設(shè)置窗口中的常規(guī)選項(xiàng)卡里你可以修改四個(gè)控制臺(tái)設(shè)置。
網(wǎng)站名稱：你可能不知道的Chrome-devtools用法總結(jié)
鏈接分享：http://www.5511xx.com/article/dpcpcsg.html
