chrome dev tools

標籤：des   style   color   io   使用   java   ar   for   檔案   

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 用於顯示當前節點層級

DOM breakPoints

Event Listeners
在這個介面可以看到元素註冊的事件 點擊漏鬥標識選擇 selected nodes only 可以只顯示當前選中的節點的事件 展開事件可以看到究竟是哪個檔案哪一行定義了該事件

Styles
同時，你也可以在Styles介面中看到該元素對應的CSS。
樣式前面有複選框，可以很方便的使這一個css失效或生效
(有的樣式用刪除線蓋住了 表示該樣式被其他樣式覆蓋)
通過單擊可以修改值 對於數值型的值，可以通過????來改變 Alt + ???? 則是以0.1為單位改變
斷行符號後可以增加一條新的樣式
+號按鈕可以增加一個新的樣式選取器
滑鼠按鍵可以強制的使元素使用偽類樣式(不過這裡的偽類僅限於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(藍色) 過濾器可以分別顯示這幾種資訊

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");
//......
console.timeEnd("Array initiaize");

選取器
$(‘#loginBtn‘); 相當於querySelector
$$(‘button.loginBtn‘); 相當於querySelectorAll

====Source====
主要是用於Debug 當然還可以編輯代碼
單擊設定斷點 右鍵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
可以在漏鬥中選擇希望顯示的列
單擊名字可以看到詳細的請求和相應資訊

 

chrome dev tools