網頁開發者工具之 Elements
前言
寫這篇文章的目的主要是為了幫助前端小白，學習使用瀏覽器自帶的F12網頁開發者工具，來快速定位調試分析問題、解決問題。當然這僅是作者的個人學習心得，有不足之處歡迎大家指點。由於篇幅有限，這篇文章僅介紹Elements。若覺得不錯請關注作者的後續更新。
如何在F12工具中定位元素
這裡拿我的博客作為網頁、用Chrome谷歌瀏覽器作為例子。打開網頁，按下鍵盤上的F12鍵。點擊Elements欄，選擇body元素，如下圖：
1.左邊用半透明藍色覆蓋表示被選區域，仔細看左下角還有個標誌顯示元素名稱和寬高。
2.中部內容就是Elements，即頁面元素。看圖可以發現我們選擇了body元素
3.右側區域為Style，即css樣式,顯示的是被選元素對應的css。這樣就非常方便我們調試樣式。
這裡我們假設有個需求，需要右邊頭像的元素代碼和css演示。我們不需要右鍵查看源代碼（早期有些教程會使用這個方法）。
可以使用F12工具的左上角的指針工具
1.鼠標左鍵單擊指針工具，單擊後工具會變為藍色狀態
2.移動鼠標到頭像上，你會發現自動出現藍色半透明選框。會顯示元素標籤和寬高
3.點擊確認後，你會發現中部Elements會自動定位到頭像代碼，右邊Style也會自動定位到頭像的css樣式
4.在中部選擇元素後，可以右鍵複製代碼。
5.在左側的Style面板中，點擊css右邊的css文件名也可以定位到個css文件中的具體位置
但是有些特殊的樣式需要鼠標到達某一特殊位置的時候才會觸發，我們再去點指針的時候就會回到原位。（比如博客右側的小埋，需要鼠標hover才能觸發）。
我們可以將鼠標移上去後，按快捷鍵Ctrl+Shift+C直接使用指針工具。就可以獲取這些特殊樣式的css代碼
還有些時候，我們需要搜索頁面中的某些內容。在中部Elements中使用Ctrl+F打開搜索框：
如圖我們搜索“一個好”就得到的想要的元素位置。
F12工具中的盒子模型
還有個東西這裡提一下，選擇任意一個元素，在右邊的Style面板下拉倒最下面，都可以看到我們的盒子模型(網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)。這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。)
這裡可以看出padding的值
這個是margin值
如何在F12工具中直接修改頁面
比如我們要修改下面這個標題
直接在Element面板下，雙擊修改其文本的內容（這裡改成餘額好多錢，是不是以後都不能相信截圖了）
接下來嘗試修改其css，我們選擇修改其字體顏色和大小
直接在Style面板下修改：顏色改成紅色，字體調大至32px。效果如下
我們也可以直接新加css元素，比如加個border(邊框)。
移動端開發
若是要調試移動端頁面怎麼辦？
我們只要點擊指標工具右邊的移動端工具就行，其他的和pc端一樣。效果如下：
最後的也是最重要的事
不要在他人電腦上不使用瀏覽器的記住密碼功能！
不使用瀏覽器的記住密碼功能！
不使用瀏覽器的記住密碼功能！
不使用瀏覽器的記住密碼功能！
為什麼？這裡作者來舉個有道雲筆記的栗子：
這是作者使用瀏覽器保密碼的有道雲筆記的登錄頁面，你可以看到瀏覽器默認給你填充好了賬號和密碼。密碼使用···號表示並不可見。
但是，我們打開F12工具:
用指針工具選擇密碼框。
只要將其input的輸入框的type=”password”值改為type=”text”，你的密碼就暴露無遺
希望這篇文章能給你帶來知識和樂趣，喜歡博主的文章可以加博主好友哦(๑•̀ㅂ•́)و✧
閱讀更多 看到他請叫他快去學習 的文章
