工欲善其事，必先利其器(一)

　　今天我胡漢三懷着很悲疼的心情在這寫文章，爲啥呢，我寫好的草稿居然沒了？？？心痛到沒法膚吸，但是我能怎麼辦，隨筆仍是要寫的呀。

　　相信你們在工做中有一半的時間都是在瘋狂的懟F12，從今天開始呢，咱們就一步步的把他解析出來，看看還有哪些咱們不經常使用的功能，廢話很少說，開整，此篇適合剛剛入門的新手看，大佬就不要浪費時間咯.

　　

　　入場篇

　　　 打開調試器：

　　　　　　　　1.快捷鍵：　　F12   或者  ctrl+shift+i

　　　　　　　　2.瀏覽器右鍵點擊頁面空白處，選擇審查

　　  　　　　　　

 

 　　初識篇

　　　　打開後：

         

　　　　來，讓咱們來總覽一下他的一些小的功能點，大的功能點將會在後續進行記錄

　　　　小箭頭：

　　　　

 

 　　　　　此乃點點點點讀機，想看哪裏點哪裏，選擇小箭頭Icon並移到頁面元素後，則會出現長寬，點擊後則會在Elements裏高亮所選中的元素，例：

 　　　　

 

 　　　　小手機：

　　　　　　點擊後則會出現以下界面， 能夠用來調試移動端的頁面

　　　　

 

 　　　　Elements：

　　　　元素調試，右側會顯示頁面的DOM結構，左側則會顯示元素的CSS樣式

　　　　

　　　

　　　　Console：

　　　　控制檯，打印報錯數據，也可直接在裏面作一些運算

　　　　

 

 　　　　Sources:

　　　　來源，可在此看到打開的文件及代碼，也能夠在這裏進行代碼斷點調試

　　　　

 

 　　　　Network:

　　　　網絡請求，請求之類的都在此頁面

　　　　

 

 　　　　Performance:

　　　　性能，能夠用來分析頁面的性能

　　　　 

 

 　　　　Memory：

　　　　存儲，能夠用來看一下對象和節點以及對內存進行分析

　　　　

 

 　　　　application:

　　　　應用， storage，cookies等皆在此處，記錄網站加載的全部資源信息，包括存儲數據

　　　　

 

 　　　　Audits：

　　　　審查，能夠在此跑跑分，看看頁面有什麼須要優化的地方

　　　　

 

　　　　Security: 

　　　　能夠在此調試當前網頁的安全和認證等問題並確保在你的網站上正確地實現HTTPS

　　　　

 

 此篇爲基礎篇就先簡單介紹一下，後續會參照chrome的官方文檔對每個功能點進行詳細的操做說明，愈來愈以爲利用好調試器會讓咱們開發以及debug的效率獲得有效的提高！！就一句話，工欲善其事，必先利其器！！