開發者工具對開發人員**除錯有很大的幫助。
頁面 css、js 除錯，介面除錯，效能調優等等。
so，筆者決定用自己的方式記錄一下工作中用到的 f12 工具的種種，方便查閱。
一、怎麼開啟開發者工具
兩種方式開啟下圖紅框中的內容：
1、ctrl + shift + i
2、f12 或者 fn + f12
二、f12 可以做些什麼
從左往右、從上到下來看看
1、選中小箭頭，可以在左側頁面上選擇元素找到對應的 code
2、手機端和 pc 端切換，頁面尺寸大小切換
3、elements 元素，檢視頁面 code，css 式樣
4、console 控制台，顯示一些提示資訊
5、sources 資源，當前頁面載入的所有檔案
6、network 網路資訊，資源載入和響應
7、performance 效能優化，cpu 執行時間、記憶體占用等
8、memory 儲存資訊
10、security 安全相關
11、audits 頁面分析，根據分析結果優化頁面
最後，右上角的三個點，裡面是 f12 的一些設定。
三、怎麼檢視頁面元素的樣式
上圖中，左側頁面中任意選擇乙個元素，會在 f12 的 elements 中看到很多資訊。
12、style 樣式，當前元素的 css **，可以清楚看到對應的 css 檔案
通過 style 下面的檢索框，針對性的找到 css 設定
點選【檢索框後面的 「:hov」】，可以檢視元素的偽類
點選【檢索框後面的「:cls」】，可以快速給元素新增 class
點選【檢索框後面的「+」】，可以給當前元素重置 css
每一組 css 右下角會有三個點，滑鼠滑過可以看到幾個圖示，分別是 text-shadow、box-shadow、color、background-color，給選擇器快速新增相應的樣式
13、computed 檢視元素對應的盒子模型
14、event listeners 顯示元素所有的監聽事件
15、dom breakpoints 所有除錯斷點
16、properities 元素的所有屬性
17、accessibility 輔助
四、怎麼快速修改式樣
1、寫行內 style 式樣
在 styles 檢索框下面，element.style 裡面直接寫
2、在現有的選擇器中新增
利用上面提到的快捷方式快速新增，或者自定義新增
3、在和模型中修改
直接在盒子模型中修改寬高等屬性
在 f12 中除錯好後，將**複製到檔案中即可。
以上幾點都比較簡單，不再贅述。
chrome瀏覽器 F12開發者工具簡單使用
chrome開發者工具最常用的四個功能模組 元素 elements 控制台 console 源 sources 網路 network 那我就按照從左到右的順序來寫啦 也可以是一些指定條件 指定條件有哪些？domain 資源所在的域，即url中的網域名稱部分。如 domain api.github.c...
Chrome瀏覽器F12開發者工具簡單使用
chrome開發者工具最常用的四個功能模組 元素 elements 控制台 console 源 sources 網路 network 那我就按照從左到右的順序來寫啦 也可以是一些指定條件 指定條件有哪些？domain 資源所在的域，即url中的網域名稱部分。如 domain api.github.c...
細說網頁開發者工具F12 前端開發利器二
前言f12之console 就是位於elemnets右邊的，開啟後你會發現什麼都沒有 我們試著進入到友鏈頁面，發現console面板出現了一些警告。這是因為在https網域名稱下使用http的資源引起的警告。為了更好的示範，我們這裡新建乙個html檔案，如下 我們可以看出js的console.log...