1.?箭頭

用來選擇頁面元素的，選擇之后進(jìn)行顯示對應(yīng)的程序代碼

2.?設(shè)備圖標(biāo)

可以用來切換手機(jī)電腦適配

3.?Elements

顯示頁面代碼，及其對應(yīng)的css樣式、盒模型

4.?Console

報(bào)錯與輸出

Console.log進(jìn)行顯示錯誤

進(jìn)行打斷點(diǎn)，進(jìn)行輸出

4.1 console.assert(message1, message2)?
message1: Boolean類型，當(dāng)為false的時候會輸入message2?
message2: 一般情況下是字符串，表示一些具體的信息?

var flag = false; console.assert(flag, "可以輸出"); var flag2 = true; console.assert(flag2, "不會輸出");4.2??console.clear();?
用于清空console控制臺

4.3 console.count()?
使用console.count()可以計(jì)算某段代碼的執(zhí)行次數(shù)。

4.4?console.debug()?

可用于代碼調(diào)試，chrome已經(jīng)將其做成界面化操作

4.5?console.dir()和console.dirxml()?

將DOM結(jié)點(diǎn)以Js對象的形式輸出到控制臺，

4.6 console.log()/console.info()/console.warn()/console.error()?
打印內(nèi)容/輸出信息/輸出警告/輸出錯誤

console.log("打印內(nèi)容");console.info("輸出信息");console.warn("輸出警告");console.error("輸出錯誤");

? ? ? ? ? ? ? ??

5.?Sources

即：sources js 代碼

5.1?左側(cè)

包括 Sources 和 Content scripts和Snippets，對應(yīng)的是源代碼、腳本內(nèi)容、片段

5.2 右側(cè)

右側(cè)都是js代碼，點(diǎn)擊（）可以轉(zhuǎn)換為可讀模式 分段分行形式

5.3?測試

5.4 Content scripts

加載項(xiàng)目中的擴(kuò)展

6.?Network

網(wǎng)絡(luò)的所有的請求資源

XHR：異步請求資源?

7.?Timeline

Timeline可以顯示js執(zhí)行時間、頁面元素渲染時間

8.?Profiles

Profiles可以查看cpu執(zhí)行時間與內(nèi)存的占用

9.?Resource

Resources標(biāo)簽頁會列出所有的資源，及HTML5的Database和LocalStore等，

你可以對存儲的內(nèi)容編輯和刪除。

10.?Security

Security標(biāo)簽頁 可以告訴你這個網(wǎng)站的安全性，查看有效的證書等

11.?Audits

Audits標(biāo)簽頁 可以幫你分析頁面性能，有助于優(yōu)化前端頁面，分析后得到的報(bào)告

12.?Sources斷點(diǎn)

在source中，選中對應(yīng)的js文件，雙擊某一行就會

? ? ? ? 點(diǎn)擊paused in debugger”按鈕執(zhí)行下一步，從中也可以看到每行代碼的賦值情況等

快捷鍵F8是執(zhí)行到最后一步，F10執(zhí)行下一步，ctrl+F8禁用斷點(diǎn)

當(dāng)鼠標(biāo)懸浮在變量上的時候可以查看到變量的值

13.再分析斷點(diǎn)調(diào)試

總結(jié)

以上是生活随笔為你收集整理的Browser控制台分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。