chrome dev tools

chrome dev tools
介紹一下Chrome dev tools 的基本使用和一些意想不到的小技巧。\\
Chrome Developer Tools 是Chrome內嵌的一系列編輯和調試的工具。能夠有效的追蹤佈局的問題，爲javascript設置斷點並對程序進行優化
====打開方式====
Ctrl+Shift+I 打開/關閉調試工具.(顯示的是上次關前的tab)\\
Ctrl+Shift+J 打開/關閉調試工具的Console頁\\
Ctrl+Shift+C 打開調試工具Elements頁 在此界面繼續按下組合鍵至關於放大鏡按鈕快捷鍵\\
====8個工具====
Chrome調試工具根據任務的不一樣分紅8個Tab\\
他們是Elements COnsole Source Network Audit Timeline Profile Resource。 能夠經過 Ctrl + [ 和 Ctrl + ] 來切換他們\\
Elements 檢查the DOM and styles
Console 查看console API產生的信息 好比console.log() 能夠直接輸入js語句和你的程序交互
Source 主要用於debug 甚至能夠直接編輯文件
Network 實時顯示了當前的網絡請求和下載的資源
Audit 分析頁面加載，並提供建議和優化爲減小網頁加載時間，提升響應速度。
Timeline 加載頁面的時間都花費在哪裏，全部的事件，從loading，解析js，計算樣式，頁面重繪都有記錄。
Profile 記錄下執行時間和內存的使用，幫助你你明白資源都消耗在哪裏，所以能夠優化的你的代碼
Resource 檢查頁面加載的資源。它可讓你直接操做HTML5 數據庫，本地存儲，Cookie，AppCache
====Elements====
能夠經過這個界面來查看HTML和對應的樣式。最多見的方式則是右鍵--Inspect Element.
使用放大鏡按鈕，將會高亮你選中的元素。當你選中後，Element將用藍色顯示對應的HTML片斷。
能夠經過拖拽的方式來改變HTML的結構，雙擊能夠修改標記和屬性名屬性值
按下F2或者Edit as HTML 能夠編輯HTML
Elements底部的區域叫作breadcrumb trail 用於顯示當前節點層級
在Elements界面中 選中一個元素右鍵Scroll into View 所選中的元素將滾動到視圖內

Event Listeners
在這個界面能夠看到元素註冊的事件 點擊漏斗標識選擇 selected nodes only 能夠只顯示當前選中的節點的事件 展開事件能夠看到到底是哪一個文件哪一行定義了該事件
Styles
同時，你也能夠在Styles界面中看到該元素對應的CSS。
樣式前面有複選框，能夠很方便的使這一個css失效或生效
(有的樣式用刪除線蓋住了 表示該樣式被其餘樣式覆蓋)
經過單擊能夠修改值 對於數值型的值，能夠經過⬆️⬇️來改變 Alt + ⬆️⬇️ 則是以0.1爲單位改變 Shift +Up/Down 以10爲單位改變值
回車後能夠增長一條新的樣式
+號按鈕能夠增長一個新的樣式選擇器
鼠標按鈕能夠強制的使元素使用僞類樣式(不過這裏的僞類僅限於active focus hover vistied4種)
對於顏色值，單擊色塊能夠打開一個顏色選擇器來修改。
css選擇器後面顯示了哪一個文件哪一行定義了該樣式，能夠點擊它進入到Sources面板對對應的css文件作修改
修改後能夠暫時保存(並不會寫入到文件 只是暫時保存在當前回話中)
右擊Load Modifications 能夠查看所作的改動
經過Revert能夠撤銷改動
Styles右側有一個 Metrics面板，經過盒模型的方式很直觀的顯示了Margin Padding border width height的值 經過雙擊能夠很輕鬆的修改他們
且當鼠標Hover在Metric中各個區塊之上時，頁面中對應的區域也會用相同的顏色高亮。
====Console====
Console界面很是有用，能夠在Console中輸入語句與程序交互。\\
尤爲是Debug的時候，Console面板能夠和其餘面板同時顯示\\
使用設置按鈕旁邊的抽屜按鈕便可用Split-View的方式打開Console
清除Console中得內容\\
可使用禁止標誌 或者在Console中輸入 clear() 或者使用快捷鍵 Ctrl + L\\
若是在程序中想要清除Console 使用Console.clear()\\
Console中能夠輸入語句 Console中默認回車是執行 若是想輸入多行語句 可使用Shift + Enter 來換行\\
===> 所以能夠定義一個函數並執行他\\
Console中也有一個過濾器(漏斗標誌) 能夠用來篩選要顯示的信息
在Console中顯示的信息主要有4種 log error(紅色) warning(黃色) info(藍色) 過濾器能夠分別顯示這幾種信息\\
刷新頁面仍然想保留控制檯中得信息，右鍵選中Preserve Log upon Navigation\\
Console中比較使用的小技巧
以組輸出
console.group("Authentication phase");
//......
console.groupEnd("Authentication phase");
格式化輸出
console.log("%s has %d points", "Sam", "100");
應用CSS改變字體樣式
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
統計一段代碼執行時間
console.time("Array initialize");
//......
cons™ole.timeEnd("Array initiaize");
選擇器
$('#loginBtn'); 至關於querySelector
$$('button.loginBtn'); 至關於querySelectorAll
Xpath
$x(xpath)命令能夠執行一個xpath查詢，如$x('//img')
會找出頁面中全部的圖片\\
====Source====
主要是用於Debug 固然還能夠編輯代碼\\
格式化Javascript 使用{} Pretty View按鈕
單擊設置斷點 右鍵Edit BreakPoint 能夠設置斷點失效條件\\
右側Watch Expression 能夠監控變量\\
Call Stack 能夠看到函數調用狀況\\
對於異步函數調用(異步請求 setTimeout等) 須要勾上Async才能看到正確的函數調用順序\\
能夠暫時對文件作修改 以後按下Ctrl + S 能夠臨時保存
背景色將變成粉色\\
右鍵 Load Modifications 能夠載入全部的改動 點擊revert能夠撤銷改動\\
和sublime同樣 經過Ctrl + F能夠查找
Ctrl + G 能夠跳轉到某一行\\
=====DOM modifications=====
當DOM節點發生改變的時候能夠中斷js程序執行\\
在Elements面板中 右鍵一個元素 Break On中設置\\
有三種狀況\\
Subtree Modification 當子節點改變的額時候\\
Attributes Modifications 屬性發生改變的時候\\
Node Removal 節點被刪除的時候\\
====Network====
在次面板打開的時候 它將會記錄全部的網絡活動\\
默認給出了不少列 Name名稱 Method請求方式 Status請求狀態\\
資源類型Type 請求來源Initiator 大小Size Time時長
時間線Timeline\\
Timeline中得淺色表示等待時間，深色表示加載時間\\
能夠在漏斗中選擇但願顯示的列\\
單擊名字能夠看到詳細的請求和相應信息\\
對於XHR請求 能夠右鍵選擇Replay XHR 來從新發送XHR請求
====Timeline====
Timeline工具欄提供了對於在加載你的Web應用的過程當中，時間花費狀況的概覽，這些應用包括處理DOM事件, 頁面佈局渲染以及向屏幕繪製元素。\\
它將真實三個層面的數據(Event Frame Memory)來顯示程序從加載到顯示時間都花費在了哪裏\\
默認該面板不記錄任何信息
點開記錄按鈕(紅色表示正在記錄) 再次點擊則中止記錄
或者使用Ctrl + E快捷鍵開始記錄\\
想要記錄一個頁面從加載開始的所有信息 可使用 Ctrl + R + E 組合鍵
禁止按鈕會清空目前全部記錄\\
垃圾桶按鈕會強制進行一次垃圾回收\\
漏斗按鈕能夠篩選出耗時超過15ms的記錄
=====Frames=====

====Profile====
Profile裏面提供了三種類型，經過這三種分析能夠查看內存泄露和佔用狀況。
收集JavaScript的CPU佔用信息\\
獲取堆的快照\\
錄製堆的分配狀況\\
Ctrl+E 開始/結束錄製\\

====Resources====
Resources可讓你檢查應用的本地數據資源，包括indexedDB/WebSql DB，localStorage/sessionStorage，cookie以及AppCache，你還能夠檢查應用的視覺資源，包括圖片、字體和樣式等(在Frames中)。
好比AppCache中，你能夠檢查Chrome已經緩存了當前文檔的哪些資源以及AppCache的狀態和瀏覽器鏈接狀況。\\

=====Audits=====
分析頁面的性能，並提供優化建議\\
使用Run開始分析