瀏覽器開發者工具基本使用教程

瀏覽器開發者工具基本使用教程

---

在閱讀下面內容以前，那麼些簡單的瞭解瀏覽器開發者工具究竟是什麼東西，到底有什麼用途。

瀏覽器開發者工具究竟是什麼？

其實簡單的說，瀏覽器開發者工具就是給專業的web應用和網站開發人員使用的工具，固然只要你有興趣想要了解，只要你對這個世界充滿這好奇，什麼東西你均可以瞭解。

開發者工具到底有什麼用？

它的做用在於，幫助開發人員對網頁進行佈局，好比HTML+CSS，幫助前端工程師更好的調試腳本（JavaScript、jQuery）之類的，還可使用工具查看網頁加載過程，獲取網頁請求（這個過程也叫作抓包），抓包是很是有意思的過程，而每個瀏覽器廠商生產出來的瀏覽器都會有本身的殺手鐗，也就是功能上的差異，那麼這個時候你就找一個最適合本身的瀏覽器使用就能夠，接下來就是介紹我經常使用的三個瀏覽器。

1、谷歌瀏覽器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標籤：這個就是咱們上面講的請求時間

那麼後面的幾個標籤也不是很經常使用，我就不作過多的說明，如今簡單的瞭解這些基本的入門使用知識就基本夠用，我相信這些功能都用熟以後你也會知道其餘的功能的。

2、火狐瀏覽器FireFox

經過谷歌瀏覽器的認識那麼咱們就很簡單的使用火狐咯，其實在mac上我是很是喜歡火狐的，由於功能是很是的強大。

如今只講火狐和谷歌瀏覽器的區別：



火狐瀏覽器的打開方式，這裏咱們選擇Web控制檯，固然你能夠打開沒一個試試，試試老是沒有錯的對吧，我不經意的打開了WebIDE簡直就是驚呆我了，這個直接就是一個寫前端的神奇沒有什麼好說的咯。你也能夠打開試試，每個均可以試試，這些功能真的很強大。

當打開以後，咱們會發現，火狐真的給人眼前一亮的趕腳



看吧，是否是有一種眼前一亮的趕腳，反正我是有的（固然了你第一次打開的話坑定和個人不同了，我這個是設置主題以後的效果，你也能夠去設置咯）

看看，和chrom沒有什麼不一樣吧，都是那幾個，並且人家是中文的，對一些看到English就發暈的同窗簡直是不能太有愛

功能上沒什麼區別，可是在我抓包的過程當中發現，火狐抓包的能力真的強，我本身開始是用谷歌如今我選擇使用火狐更多

那麼就簡單的介紹不一樣的地方



你們能夠看上圖，我以爲這個就是我不用深刻研究就能知道的最大區別啦：

一、看到沒有，這裏列出的消息頭 Cookie 響應什麼的一個都很多，並且人家多了參數 安全性
參數這個就不用多說了，在咱們抓包分析的過程當中參數絕對是很是重要的內容，因此可以直接給你展現出來，能夠給你減小去分析參數的過程，那麼安全性呢，不言而喻了吧。

二、咱們再來看，編輯和重發 原始頭 可以模擬請求，簡直碉堡啦，有沒有，喜歡到爆，谷歌固然也能夠有，可是好像是要裝插件的。

好啦，還有不少不一樣，可是我說啦，只要你掌握了上面所講的這些東西，我相信你去研究其餘的功能都會是小菜一碟咯。

那麼咱們來看看設置裏面給咱們提供了那些自定義功能，這個也是很是強大的功能哦



當點擊圖中1按鈕（設置按鈕）後將出現一個神奇的地方，就是這裏面，這裏面也有不少功能啦，能夠一個一個勾選上去體驗吧孩子。

注意：看到圖中2沒有，這個勾選上有什麼做用，和Chrom中的Preserve log是一個做用，當你請求道要挑傳的頁面的時候如不勾選上那麼你的請求會被清空，勾選上了那麼就不會被清空，這樣更加有力你分析問題咯。

3、Safari瀏覽器

Safari的開發者工具呢也很不錯，可是從功能上我以爲是不可以知足我心裏強大欲望的，so，我通常上網用Safari，開發調試用上面兩種，上網用Safari真的是方便並且簡潔。

好了簡單的放上幾張圖讓你們感覺吧：



這個呢就是打開Safari開發者工具的方式，在頂部菜單欄下面開發者標籤中打開顯示錯誤控制檯就能夠看到下面的場景咯



上面是打開網絡這個標籤的，咱們能夠看到該有的功能是一個都沒少，並且我以爲很是簡潔，說真的我若是不是一個開發者，我會愛死這樣的一個瀏覽器，簡潔大方，而且用戶體驗很是好，沒有雜七雜八的功能。
想起一句話：好的產品不是還能不能擴展，而是作到沒有辦法再精簡。



看吧這就是調試代碼的地方，功能上沒有什麼不一樣，可是感受很規範，很簡潔，很友好。

若是你是入門，我相信這些已經夠啦，當你熟練運用了這些功能以後我相信你本身去研究就很是容易啦

記錄學習的每一步，記錄每一次的成長！！！！