Chrome除錯技能和常用外掛完全指北
Chrome瀏覽器是前端工程師必備工具，以其強大的擴充套件程式和多程序架構、高速、簡單搜尋、更安全等特點為大家廣泛使用。
接下來就簡單介紹Chrome的除錯技能和常用外掛（針對前端）
一、除錯技能
前端如果不需要相容IE瀏覽器，那麼基本就一直使用Chrome瀏覽器了，它是基於WebKit核心的，安全高效。Chrome除錯面板瀏覽器位於右上角，如下圖所示
或者使用 Ctrl+Shift+I 快捷鍵 都可以開啟。
1、認識面板
1是元素，是構建這個網頁的DOM樹以及CSS樣式渲染。在這裡可以檢視每個元素的佔比和樣式，可以修改顯示。一般情況下關於樣式的問題，我都會開啟，在這裡審查元素，一個一個的看，修改畫素值，新增樣式，得到預期效果，再往程式碼中寫。講真，CSS真的是難。
2是除錯視窗，有js報錯，警告，也可以在程式碼中console.log()來輸出內容進行除錯，這是開發中最常使用的技能了，對於值的獲取和解析很有幫助，同時，它還可以直接輸入程式碼執行。這裡將error，warning，info分開在tab視窗顯示，個人覺得更好觀察一些。
3是資源，這裡是對網頁解析後的每個檔案， 如果是不同域名或是不同站點，它都會分析出來。現在都多用框架構建網頁，都是打包後在伺服器上跑著的，就會出現這樣，看不懂的js檔案。不用擔心，這些都是打包後的檔案，還會有圖片資源等。在這裡可以斷點debugger除錯，就在這裡的程式碼前點選一下就加好了斷點，在執行的時候就會斷點除錯，你自己可以按下一步的按鈕讓其執行。
4是請求資源，關於此網頁的所有資源都會請求，包括圖片，樣式，介面資料等。點選檢視具體的某個請求，header表示請求頭，即傳送資料方，有很多欄位，這些都是在學習HTTP中要了解的，也是前端開發必備的重要技能，學習HTTP協議非常的重要，
詳見
https://blog.csdn.net/zr15829039341/article/details/64125868
preview是返回值，請求成功會返回前後端約定好的資料，拿到資料進行解析就可以展示到頁面上。這裡也是判斷bug屬於前端還是後端的一個重要的點，如果200ok，資料都正確，那就是前端沒有展示好，或者400錯誤，都是前端的鍋（不完全是，看情況）；反之如果是500錯誤，那就是後端的錯誤了。
5是儲存物件，展示一些網頁端儲存的資料，比如Cookies、LocalStorage、SessionStorage、Mainfest、Cache等，常用的就是Cookies,它用來記住網站的使用者名稱和密碼，可以設定過期時間，但是它不太安全，現在都是後端設定cookie和session來進行使用者的區別和登入狀態判斷。
二、常用外掛推薦
Chrome瀏覽器最強大的特點可能就是擴充套件程式了，真的超級贊
1、谷歌訪問助手
使用谷歌，當然是希望可以正(ke)確(xue)上網了，那麼你就需要谷歌訪問助手了。前提是不想花錢，然後還想正(ke)確(xue)上網，那你就可以使用它，但是你需要忍受它會將hao123設為預設頁，不過沒關係，我們之後有標籤頁，不怕。
下載：http://www.ggfwzs.com/
教程：
https://laod.cn/black-technology/google-chrome-gmail-chajian.html
反正我一直使用，搜尋是夠用了，有時會有一些不穩定，但是想一想，en，免費的，很好了。
連結:
https://pan.baidu.com/s/1kpRnO2s2wDWs4D8wa2fkHg
提取碼: 1iut
2、Infinity pro 標籤頁
用著很舒服，可以新增很多快捷網站，可以切換桌布，桌布都超級好看，可以看天氣，使用筆記，待辦事項等，對於整天使用電腦的我們來說，新的標籤頁每天要開啟不下10次，舒適和實用是很重要的。既然已經可以正(ke)確(xue)上網了，那就去應用商店直接搜尋外掛，然後新增吧。ps：使用本連結，進行下載也可以
連結:
https://pan.baidu.com/s/1QCm6SzNjNChDfi7IhOHlag
提取碼: vyi7
順便給大家推薦我常用的網站哈哈。
3、WEB前端助手
身為前端，使用的工具很多，這個外掛就是將其集成了，有JSON轉換，時間戳轉換，二維碼生成，網頁截圖，正則，效能檢測，ajax等工具，可以高效快捷的使用工具。ps：ps：使用本連結，進行下載也可以
連結:
https://pan.baidu.com/s/1djb74aPpb8c2IDyZ3Iwj0w
提取碼: psvc
4、有道詞典Chrome劃詞
對於程式設計師來說，英語是硬傷，很多文件或者回答都是英文的，想要短期內提升又很難，但是遇到不會的單詞，再開啟一個視窗來查詞是不是就很難受了。所以需要一款即時查詞的外掛，在網頁上，就像複製那樣，選中需要查詢的單詞，就可以查詢了，是不是很贊。哈哈。
5、Octotree
github是每個程式設計師都經常使用的網站，但是有一個問題，在看原始碼的時候，想要看另一個檔案，就得返回上一個網頁，再找到那個網頁。很麻煩，有時候會忘記要去那個檔案了。Octotree 會在左側生成目錄樹，直接點選切換就可以了，是不是很讚的哈哈。
連結:
https://pan.baidu.com/s/1X9Zi_bjeAKhQWYVsoKGJbA
提取碼: hemx
6、markdown here
超好用的一款外掛，強烈推薦！！有它再也不用擔心編輯器不支援markdown語法了，寫好以後直接一鍵轉換。而且也是一個跨平臺神器，比如我們可以把簡書寫好的文章（帶md語法）直接複製到微信公眾號，然後一鍵轉換，格式幾乎無變化！
連結:
https://pan.baidu.com/s/1wEzQIGXt4ZhAA76hEf0ZMA
提取碼: bey6
7、Adblock Plus：免除廣告困擾
廣告真的是令人很煩惱，有了這個外掛，就可以遮蔽大多數的廣告了。看部落格時再也沒有各種廣告了哈哈。很贊。
連結:
https://pan.baidu.com/s/1nUN33pglve5zoocEoIvhlA
提取碼: b2cz
ps: 先寫到這，後續補充
PS：微信公眾號 FEvivi
獲取所有下載包，回覆 chrome 即可獲取上述所有外掛
關注後回覆 vivi 獲取我的微訊號，望不吝賜教，pps：可輕撩哈哈
感謝大佬們閱讀，希望大家頭髮濃密，睡眠良好，情緒穩定，早日實現財富自由~