前言
在閱讀下面內容之前，那么些簡單的了解瀏覽器開發者工具到底是什么東西，到底有什么用途。
瀏覽器開發者工具到底是什么？
其實簡單的說，瀏覽器開發者工具就是給專業的web應用和網站開發人員使用的工具，當然只要你有興趣想要了解，只要你對這個世界充滿這好奇，什么東西你都可以了解。
開發者工具到底有什么用？
它的作用在於，幫助開發人員對網頁進行布局，比如HTML+CSS，幫助前端工程師更好的調試腳本（JavaScript、jQuery）之類的，還可以使用工具查看網頁加載過程，獲取網頁請求（這個過程也叫做抓包），抓包是非常有意思的過程，而每一個瀏覽器廠商生產出來的瀏覽器都會有自己的殺手鐧，也就是功能上的差別，那么這個時候你就找一個最適合自己的瀏覽器使用就可以，接下來就是介紹我常用的三個瀏覽器。
教程
一、谷歌瀏覽器chrom
一般在windows系統上瀏覽器開發者工具打開都是按F12快捷鍵，但是今天我是用mac進行講解的。
那么上面的這張圖就是打開chrom瀏覽器工具的方式，也可以通過快捷鍵打開
上面這張圖就是打開chrom開發者工具之后的樣子，現在簡單的介紹：
第一個框：是用於屏幕適配的，也就是傳說中的chrom能夠調試各種移動設備的屏幕分辨率。
上面這張圖就是點擊之后的效果，用於移動設備屏幕適配的功能
Element標簽：該標簽使用來查看頁面的HTML標簽元素的，能夠也就是查看源碼，我們可以看到布局，可以看到用到的樣式，還有用到的鏈接等等。
console標簽：這個就是一個web控制台
sources標簽：這個是顯示資源文件的
1.該選擇框使用來選擇資源的，當網頁被加載的時候向服務器端請求出來的文件包括.html .ccs .js這樣的文件。
2.這個地方使用來調試js代碼的地方，這個非常重要，看到行號上面有藍色的標簽，這個標簽就是斷電，當我們需要調試程序的時候打一個斷電，然后通過3這個工具欄進行調試
，那么調試過 程就不詳細解釋，也就是打一個斷電然后刷新頁面程序會調到你打斷點的地方，然后通過4來查看程序中變量的值什么的。
3.中的標簽，第一個是停止狀態的按鈕就是表示程序是否停止（在debug時），后面的是程序繼續跳過方法，跳過下一個語句，調到上一個語句。
Network標簽：這個就是抓包常用的工具
那么這個頁面就是用於抓包的頁面，我們需要分析頁面的請求，比如模擬登陸什么的都需要去分析程序是怎么在后台執行的，接下來就，我們可以看到Headers（請求消息頭） Preview（預覽） Response（響應） Timing（求求時間）Cookie這些東西
最上面還有一個工具欄，有一個紅色的圓點和靜止符號的按鈕，那么這兩個按鈕，當為紅色按鈕的時候表示當前的請求不被清空（但是這里的請求是不跳轉頁面的請求，當跳轉到新的頁面，那么也會請求也會被清空），后面這個按鈕就是清空請求的。
下面還有一行工具欄，這個工具欄主要是用來選擇和過濾請求消息的。
再下面可以看到時間線，這個就是記錄一個請求開始到結束的時間。
注意：當你需要請求到另一個頁面的時候都不清空你的請求的時候需要勾選上Preserve log，同時讓紅色按鈕顯示紅色
TimeLiness標簽：這個就是我們上面講的請求時間
那么后面的幾個標簽也不是很常用，我就不做過多的說明，現在簡單的了解這些基本的入門使用知識就基本夠用，我相信這些功能都用熟之后你也會知道其他的功能的。
二、火狐瀏覽器FireFox
通過谷歌瀏覽器的認識那么我們就很簡單的使用火狐咯，其實在mac上我是非常喜歡火狐的，因為功能是非常的強大。
現在只講火狐和谷歌瀏覽器的區別：
火狐瀏覽器的打開方式，這里我們選擇Web控制台，當然你可以打開沒一個試試，試試總是沒有錯的對吧，我不經意的打開了WebIDE簡直就是驚呆我了，這個直接就是一個寫前端的神奇沒有什么好說的咯。你也可以打開試試，每一個都可以試試，這些功能真的很強大。
當打開之后，我們會發現，火狐真的給人眼前一亮的趕腳
看吧，是不是有一種眼前一亮的趕腳，反正我是有的（當然了你第一次打開的話坑定和我的不一樣了，我這個是設置主題之后的效果，你也可以去設置咯）
看看，和chrom沒有什么不同吧，都是那幾個，而且人家是中文的，對一些看到English就發暈的同學簡直是不能太有愛
功能上沒什么區別，但是在我抓包的過程中發現，火狐抓包的能力真的強，我自己開始是用谷歌現在我選擇使用火狐更多
那么就簡單的介紹不同的地方
大家可以看上圖，我覺得這個就是我不用深入研究就能知道的最大區別啦：
1、看到沒有，這里列出的消息頭 Cookie 響應什么的一個都不少，而且人家多了參數 安全性
參數這個就不用多說了，在我們抓包分析的過程中參數絕對是非常重要的內容，所以能夠直接給你展示出來，可以給你減少去分析參數的過程，那么安全性呢，不言而喻了吧。
2、我們再來看，編輯和重發 原始頭 能夠模擬請求，簡直碉堡啦，有沒有，喜歡到爆，谷歌當然也可以有，但是好像是要裝插件的。
好啦，還有很多不同，但是我說啦，只要你掌握了上面所講的這些東西，我相信你去研究其他的功能都會是小菜一碟咯。
那么我們來看看設置里面給我們提供了那些自定義功能，這個也是非常強大的功能哦
當點擊圖中1按鈕（設置按鈕）后將出現一個神奇的地方，就是這里面，這里面也有很多功能啦，可以一個一個勾選上去體驗吧孩子。
注意：看到圖中2沒有，這個勾選上有什么作用，和Chrom中的Preserve log是一個作用，當你請求道要挑傳的頁面的時候如不勾選上那么你的請求會被清空，勾選上了那么就不會被清空，這樣更加有力你分析問題咯。
三、Safari瀏覽器
Safari的開發者工具呢也很不錯，但是從功能上我覺得是不能夠滿足我內心強大欲望的，so，我一般上網用Safari，開發調試用上面兩種，上網用Safari真的是方便而且簡潔。
好了簡單的放上幾張圖讓大家感受吧：
這個呢就是打開Safari開發者工具的方式，在頂部菜單欄下面開發者標簽中打開顯示錯誤控制台就可以看到下面的場景咯
上面是打開網絡這個標簽的，我們可以看到該有的功能是一個都沒少，而且我覺得非常簡潔，說真的我如果不是一個開發者，我會愛死這樣的一個瀏覽器，簡潔大方，並且用戶體驗非常好，沒有雜七雜八的功能。
想起一句話：好的產品不是還能不能擴展，而是做到沒有辦法再精簡。
看吧這就是調試代碼的地方，功能上沒有什么不同，但是感覺很規范，很簡潔，很友好。
如果你是入門，我相信這些已經夠啦，當你熟練運用了這些功能之后我相信你自己去研究就非常容易啦
記錄學習的每一步，記錄每一次的成長！！！！