???由于F12是前端開發(fā)人員的利器，所以我自己也在不斷摸索中，查看一些博客和資料后，自己總結(jié)了一下來幫助自己理解和記憶，也希望能幫到有需要的小伙伴，嘿嘿！

首先介紹Chrome開發(fā)者工具中，調(diào)試時(shí)使用最多的三個(gè)功能頁面是：元素（ELements）、控制臺（Console）、源代碼（Sources），此外還有網(wǎng)絡(luò)（Network）等。

?

?元素（Elements）：用于查看或修改HTML元素的屬性、CSS屬性、監(jiān)聽事件、斷點(diǎn)等。
控制臺（Console）：控制臺一般用于執(zhí)行一次性代碼，查看JavaScript對象，查看調(diào)試日志信息或異常信息。
源代碼（Sources）：該頁面用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調(diào)試JavaScript源代碼，可以給JS代碼添加斷點(diǎn)等。
網(wǎng)絡(luò)（Network）：網(wǎng)絡(luò)頁面主要用于查看header等與網(wǎng)絡(luò)連接相關(guān)的信息。
1、元素（Elements）

查看元素代碼：點(diǎn)及如圖箭頭（或用者用快捷鍵Ctrl+Shift+C）進(jìn)入選擇元素模式，然后從頁面中選擇需要查看的元素，然后可以在開發(fā)者工具元素（Elements）一欄中定位到該元素源代碼的具體位置?。

查看元素屬性：可從被定位的源碼中查看部分，如class、src，也可在右邊的側(cè)欄中查看全部的屬性，如下圖位置查看

?修改元素的代碼與屬性：可直接雙擊想要修改的部分，然后就進(jìn)行修改，或者選中要修改部分后點(diǎn)擊右鍵進(jìn)行修改，如下圖

?

注意：這個(gè)修改也僅對當(dāng)前的頁面渲染生效，不會修改服務(wù)器的源代碼，故而這個(gè)功能也是作為調(diào)試頁面效果而使用。

右邊的側(cè)欄個(gè)功能的介紹:如下圖所示

?

?2、控制臺（Console）

查看JS對象的及其屬性

執(zhí)行JS語句
查看控制臺日志：當(dāng)網(wǎng)頁的JS代碼中使用了console.log()函數(shù)時(shí)，該函數(shù)輸出的日志信息會在控制臺中顯示。日志信息一般在開發(fā)調(diào)試時(shí)啟用，而當(dāng)正式上線后，一般會將該函數(shù)去掉。
3、源代碼（Sources）其主要功能如下介紹

?

?4、網(wǎng)絡(luò)（Network）大體功能如下：

?

請求文件具體說明

?

一共分為四個(gè)模塊：

Header：面板列出資源的請求url、HTTP方法、響應(yīng)狀態(tài)碼、請求頭和響應(yīng)頭及它們各自的值、請求參數(shù)等等
Preview：預(yù)覽面板，用于資源的預(yù)覽。
Response：響應(yīng)信息面板包含資源還未進(jìn)行格式處理的內(nèi)容
Timing：資源請求的詳細(xì)信息花費(fèi)時(shí)間
---------------------
作者：Self_Growing
來源：CSDN
原文：https://blog.csdn.net/m0_37724356/article/details/79884006
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！

轉(zhuǎn)載于:https://www.cnblogs.com/jingdenghuakai/p/10917627.html

總結(jié)

以上是生活随笔為你收集整理的chrom浏览器-F2使用方法一的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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