如何使用瀏覽器的F12調試頁面？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【如何使用瀏覽器的F12調試頁面？ 】

1、背景介紹
一個程序員按照要求編寫一個網頁，不可能一次編寫就徹底達到目的，通常要對本身的的代碼修改調試幾回後才能到達要求，瀏覽器的F12開發人員工具就能夠很方便的幫助程序員調試本身的代碼。

2、知識剖析
F12 開發人員工具是一套按需採用的工具，網站開發人員能夠隨時在任何網頁上使用 F12 工具，從而快速調試 JavaScript、HTML 和級聯樣式表 (CSS)，還能夠跟蹤並查明網頁或網絡的性能問題。

注：部分電腦打開F12是須要組合鍵：Fn+F12；例如：Mac，ThinkPad等

3、常見問題
F12調試CSS樣式的主要功能有哪些？

4、解決方案
一、如何更改調試窗口的顯示位置
按下F12進入調試

 

二、如何選中須要修改的元素，如何進行手機端調試
 

三、如何更直觀的觀察到頁面中設置的盒子模型
 

四、如何修改當前元素的樣式
一、直接在當前元素上添加樣式

二、在當前元素對應的class上修改樣式

 

五、如何修改元素設置的僞類屬性
 

六、如何添加新的clas

ss
 

![圖片上傳中...]

七、如何快速增長元素樣式
谷歌瀏覽器自帶了4個快速增長屬性的按鈕：text-shadow、box-shadow、color、background-color

5、編碼實戰
查看修真院官網

6、拓展思考
如何經過F12開發者工具來學習優秀網站的設計

7、參考文獻
參考文獻--使用 F12 開發人員工具調試 HTML 和 CSS

Chrome調試工具簡單介紹

8、更多討論
一、怎麼保存調試後的代碼：

將調試好後的代碼複製出來，添加到對應css表中保存