概覽
Element
- 第一部分：操作dom元素
- 查看
DOM樹 - 選取
DOM節(jié)點 - 操作
DOM節(jié)點
- 查看
- 第二部分
- 查看界面樣式
- 修改界面樣式
- 第三部分
- 相當于一個目錄，指向指定的地方
console
基本的console使用方法
console.warn('<output>') // 用來顯示警告
console.error('<output>') // 用來顯示錯誤
console.info('<output>') // 用來顯示提示信息
console.assert([Condition Expression], '<output>') // 可以在console進行打出斷言的結果
console.clear()// 清空控制臺的內容
console.dir([DOMElement])// 打印DOM元素
console.table([object/array]) // 以表格的形式打出對象或是數組
/**
* 將輸出資料分群顯示
**/
console.group('<groupName>') // 開始分群郭蕉，預設展開
console.groupCollapsed('<groupName>') // 開始分群帐姻，預設不展開
console.groupEnd() // 結束分群
例子：
console.warn('aijin')
console.error('aijin')
console.assert(2<3,'The condition is true') // 正確的時候不會打出后面的斷言
console.assert(2>3,'The condition is false')
const data =[{name:'json',age:'11'},{name:'lucy',age:'12'},{name:'iii',age:'13'}]
console.log(data)
console.table(data)
console.log("Runoob");
console.group("RunoobLabel");
console.log("我在指定標簽分組里22。");
console.log("我在指定標簽分組里22仑濒。");
console.groupEnd()
console.log(7777)
/**
* 使用 '%c' 幫輸出的內容添加樣式
**/
console.log('%c What a Cool Console', 'font-size: 32px; color: red')
console的特殊用法
// 計數
console.count([String])
// 計時
console.time([String]) // 開始計時
console.timeEnd([String]) // 結束計時
console.count()每次調用鳄梅，如果標簽一樣數字會增加 1巷送，如果不一樣則重新開始計數纺讲。
console.count("Runoob");
console.count("Runoob");
console.count("Runoob2");
console.time()可以用來計算一個算法執(zhí)行了多長的時間
console.time("Runoob");
for (i = 0; i < 100000; i++) {
// 代碼部分
}
console.timeEnd("Runoob");
Source
第一部分
- content script：主要是第三方插件和Chrome瀏覽器資源問件等
- Snippets.js:擂仍，允許用戶自設定JS，主要用來測試JS文件熬甚、記住調試片段逢渔、單元測試、少了功能代碼編寫等
console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
第二部分
- 設置和取消斷點乡括。選擇想要設置斷點的js具體行肃廓，點擊行號，就設置了斷點诲泌，再次點擊盲赊，就取消已設置的斷點。
-
CTR+F快速查找匹配資源敷扫。CTR+G快速定位文件具體行角钩。 -
“{}”表示格式化代碼。 - 緊挨
{}處右側呻澜，表示當前光標行號和列號。
第三部分
-
F10單步執(zhí)行惨险，但當遇到方法羹幸，不進入方法，直接方法外的下一行代碼 -
F11單步調試辫愉，且遇方法體栅受，需要經過。
call Stack：函數被調用的調用棧Scope監(jiān)視環(huán)境變量恭朗，私有變量屏镊、公有變量、全局變量等痰腮。
<html>
<head>
<script>
const add1 = () => {
let a = 1;
let b = 2;
console.log(alert);
};
add = () => {
add1();
};
</script>
</head>
<body>
<button onclick="add()">1111</button>
</body>
</html>
network
停止記錄網絡請求
- 點擊
Stop recording network log紅色圖標而芥，當它變?yōu)榛疑珪r，表示DevTools不在記錄請求
跨頁面加載時膀值，保留網絡請求記錄
當頁面重載或是跳轉頁面的 時候棍丐，netWork面板的網絡請求也是應該刷新的误辑，想要保留跳轉或是重載之前的請求可以勾選Preserve log，這個場景在登錄跳轉的時候十分的常見歌逢。
頁面加載時捕獲屏幕截圖
捕獲屏幕截圖可以分析在頁面加載的過程中巾钉，用戶在不同的時間段內看到的網頁是什么樣子的。
點擊Capture screenshots圖標開啟捕獲功能秘案，當圖標變?yōu)樗{色表示已開啟砰苍，重載頁面即可看到不同時間的屏幕截圖
鼠標懸浮在一張圖片上時，該圖片四周會出現一個黃色的邊框阱高，同時赚导，在
Overview和Waterfall窗口里面也分別有一條黃色的豎線，這條黃色的豎線表示這張圖片的捕獲時間點擊某一張圖片讨惩，可以過濾掉在這張圖片捕獲之后發(fā)生的所有請求
雙擊圖片辟癌，可以放大該圖片
禁用瀏覽器緩存
有些資源在狀態(tài)碼為304的時候，證明我們使用的是瀏覽器緩存的資源荐捻，為了盡可能準確的模擬我們第一次加載網頁的情景黍少，需要禁止使用瀏覽器的緩存，我們可以勾選下面的圖標处面。
模擬網速條件
在Network Throttling下拉框中可以選擇不同的網絡條件進行模擬厂置，如2G、3G魂角、4G昵济、WiFi等，當想要斷網的時候直接選址offline就可以
提示：有時候開發(fā)者會看到Network左側有個警告圖標野揪，這個圖標就是提示開發(fā)者當前處于模擬網絡條件下访忿。
手動清除瀏覽器緩存、cookies
在網絡請求記錄表里面右鍵斯稳，選擇Clear Browser Cache或Clear Browser Cookies海铆。
根據屬性過濾
輸入框中可以輸入一些字符串、域挣惰、大小卧斟、狀態(tài)碼、媒體類型等等可以實現過濾憎茂，也可以根據類型進行過濾
隱藏data URLs
data URLs指一些嵌入到文檔中的小型文件珍语，在請求表里面以data:開頭的文件就是，如較為常見的svg文件竖幔。勾選Hide data URLs復選框即可隱藏此類文件板乙。
查看請求記錄
Name：文件的名字或者資源的標識符Status：HTTP狀態(tài)碼Type：請求資源的MIME類型-
Initiator：以下對象或處理可以發(fā)起一個請求Parse：Chrome的HTML解析器Redirect：HTTP重定向Script：js函數Other：一些別的處理或操作，比如通過鏈接導航到一個頁面拳氢，或者是在瀏覽器的地址欄輸入一個地址然后回車
Size：響應頭大小+響應體大小Time：總的持續(xù)時間亡驰，從發(fā)起請求到資源下載完成Waterfall：每一個請求活動的不同階段的可視化展示
-
Preview：查看響應體的預覽 -
Response：查看響應體 -
Timing：查看請求在各個階段對應的時間
-
Queueing：瀏覽器會在以下情況對請求進行排隊：有更高優(yōu)先級的請求
在這個域下晓猛，已經有6個
TCP連接了，達到Chrome最大限制數量凡辱。此條規(guī)則僅適用在HTTP/1.0和HTTP/1.1
Stalled：Queueing中的任何一個因素發(fā)生都會導致該請求被拖延Request sent：請求發(fā)送消耗的時間Waiting (TTFB)：瀏覽器等待響應的時間戒职，TTFB表示Time To First ByteContent Download：資源下載所消耗的時間
Performance
DEMO的鏈接 demo
模擬移動設備的CPU
有的時候移動設備的CPU一般會比臺式機和筆記本差很多，當我們想要等戲界面的時候透乾，可以用cpu控制起來模擬移動設備洪燥，具體的操作如下所示：
ps：其中的4xslow是：Devtools開始模擬兩倍速低速CPU
設置demo并記錄運行時的性能
打開上面的demo
- 其中
ADD是添加藍色的小方塊 - 點擊
Optimize按鈕，你會發(fā)現藍色小方塊會變的很快而且動畫變得平滑乳乌。 - 點擊
un-optimize按鈕捧韵，藍色小方塊又會變成之前的模樣。
點擊performace的錄制按鈕汉操，我們就可以錄制各種指標
等待一會再来，點擊stop按鈕 DevTools就會停止錄制并開始處理數據了：
分析數據指標
我們從上向下看：
-
FPS：如果發(fā)現了一條很長的紅色長條，那么說明這些幀存在問題磷瘤，這個時候用戶的體驗是十分差的 -
cpu：顏色和Summery里的樣式是一一對應的芒篷，cpu表格中的各種顏色代表CPU在這各種處理上花費的時間，如果某一項的占用的時間過長采缚，那么這里就可以找到性能瓶頸線索 -
Frames圖表：移動在這個上面去的针炉，Devtools就會展現這個幀的FPS，每一個幀都可能在60以下扳抽，沒有達到標準- 谷歌瀏覽器提供了中可以實時顯示FPS的面板：
- 按下
Command+Shift+P（Mac）或者Control+Shift+P(Windows, Linux)打開命令菜單 - 輸入
Rendering篡帕，點選Show Rendering - 在
Rendering面板里，激活FPS Meter贸呢。FPS實時面板就出現在頁面的右上方镰烧。
- 按下
- 谷歌瀏覽器提供了中可以實時顯示FPS的面板：
定位瓶頸的位置
大部分的時間花費在了rending位置上，所以我們想要提高性能就要減少rendering的時間
- 我們打開Main圖標楞陷，
Devtools展示了主線程的運行狀況怔鳖，X軸代表的是時間，每一個長條代表一個event猜谚，長條越長，代表這個event花費的時間越長赌渣，y軸代表了調用棧魏铅，在棧里面，上面的event調用了下面的event坚芜。 - 在事件長條的右上角出览芳，如果出現了紅色小三角，說明這個事件是存在問題的鸿竖，需要特別注意沧竟。
- 在
app.update這個事件的長條下方铸敏，有很多被觸發(fā)的紫色長條。如果放大這些事件長條悟泵，你會看到它們每個都帶有紅色小三角杈笔。點擊其中一個紫色事件長條，Devtools在Summary面板里展示了更多關于這個事件的信息糕非。確實蒙具，這里有很多reflow的警告。 - 在
summary面板里點擊app.js:70鏈接朽肥，Devtools會跳轉到需要優(yōu)化的代碼處
應用面板
如果使用本地存儲存儲鍵值對 (
KVP)禁筏，則可以從Local Storage窗格中檢查、修改和刪除這些KVP衡招。Session Storage窗格與Local Storage窗格篱昔，cookie的窗格的工作方式相同。
安全面板
-
Security Overview：安全頁面會通過消息This page is secure (valid HTTPS). 指示始腾。 - 點擊
View certificate查看主源的服務器證書州刽。 非安全頁面會通過消息This page is not secure.指示。 -
Security面板可以區(qū)分兩種非安全頁面窘茁。 如果請求的頁面通過HTTP提供怀伦，則主源會被標記為不安全。 - 如果點擊非安全源山林，
Security面板會提供Network面板過濾視圖的鏈接房待。
