由於f12是前端開發人員的利器，所以我自己也在不斷摸索中，檢視一些部落格和資料後，自己總結了一下來幫助自己理解和記憶，也希望能幫到有需要的小夥伴，嘿嘿！
首先介紹chrome開發者工具中，除錯時使用最多的三個功能頁面是：元素（elements）、控制台（console）、源**（sources），此外還有網路（network）等。
1、元素（elements）
檢視元素**：點選如圖
箭頭（或用者用快捷鍵ctrl+shift+c）進入選擇元素模式，然後從頁面中選擇需要檢視的元素，然後可以在開發者工具元素（elements）一欄中定位到該元素源**的具體位置 。
檢視元素屬性：可從被定位的原始碼中檢視部分，如class、src，也可在右邊的側欄中檢視全部的屬性，如下圖位置檢視
修改元素的**與屬性：可直接雙擊想要修改的部分，然後就進行修改，或者選中要修改部分後點選右鍵進行修改，如下圖
注意：這個修改也僅對當前的頁面渲染生效，不會修改伺服器的源**，故而這個功能也是作為除錯頁面效果而使用。
右邊的側欄個功能的介紹:如下圖所示
2、控制台（console）
3、源**（sources）其主要功能如下介紹
4、網路（network）大體功能如下：
請求檔案具體說明
一共分為四個模組：
以上就是我的總結，內容有點多，希望大家耐心檢視，chrome devtools還有很多非常有用的功能，大家可以繼續探索，希望我的總結對大家有所幫助。
IE瀏覽器F12無法使用
這是很久之前遇到的乙個問題了，當初公升級完ie瀏覽器之後出現的問題 當然現在我也好久沒有用過ie瀏覽器了，現在應該只有那些老專案還在使用ie瀏覽器了 錯誤的文字內容 diagnostic exception in windowonload error an error has occurredisp...
谷歌瀏覽器F12基本用法
第一步 開啟你想進行除錯的頁面，並按f12進入到除錯模式 這是關於最右側 元素選擇器 的功能展示 關於第二個功能的使用，這個功能是將頁面適應成手機螢幕大小，elements 點選這個功能後出現的是當前頁面的html檔案，在你想實時修改的那個元素處雙擊，可以暫時修改，不過並沒有同步到後台，這個功能通常...
chrome瀏覽器 F12開發者工具簡單使用
chrome開發者工具最常用的四個功能模組 元素 elements 控制台 console 源 sources 網路 network 那我就按照從左到右的順序來寫啦 也可以是一些指定條件 指定條件有哪些？domain 資源所在的域，即url中的網域名稱部分。如 domain api.github.c...