Chrome調試技能和經常使用插件徹底指北

Chrome瀏覽器是前端工程師必備工具，以其強大的擴展程序和多進程架構、高速、簡單搜索、更安全等特色爲你們普遍使用。

接下來就簡單介紹Chrome的調試技能和經常使用插件（針對前端）

1、調試技能

前端若是不須要兼容IE瀏覽器，那麼基本就一直使用Chrome瀏覽器了，它是基於WebKit內核的，安全高效。Chrome調試面板瀏覽器位於右上角，以下圖所示

或者使用 Ctrl+Shift+I 快捷鍵 均可以打開。

一、認識面板

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來進行用戶的區別和登陸狀態判斷。

2、經常使用插件推薦

Chrome瀏覽器最強大的特色可能就是擴展程序了，真的超級贊

一、谷歌訪問助手

使用谷歌，固然是但願能夠正(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

二、Infinity pro 標籤頁

用着很舒服，能夠添加不少快捷網站，能夠切換壁紙，壁紙都超級好看，能夠看天氣，使用筆記，待辦事項等，對於成天使用電腦的咱們來講，新的標籤頁天天要打開不下10次，溫馨和實用是很重要的。既然已經能夠正(ke)確(xue)上網了，那就去應用商店直接搜索插件，而後添加吧。ps：使用本連接，進行下載也能夠

連接:

https://pan.baidu.com/s/1QCm6SzNjNChDfi7IhOHlag

提取碼: vyi7

順便給你們推薦我經常使用的網站哈哈。

三、WEB前端助手

身爲前端，使用的工具不少，這個插件就是將其集成了，有JSON轉換，時間戳轉換，二維碼生成，網頁截屏，正則，性能檢測，ajax等工具，能夠高效快捷的使用工具。ps：ps：使用本連接，進行下載也能夠

連接:

https://pan.baidu.com/s/1djb74aPpb8c2IDyZ3Iwj0w

提取碼: psvc

四、有道詞典Chrome劃詞

對於程序員來講，英語是硬傷，不少文檔或者回答都是英文的，想要短時間內提高又很難，可是遇到不會的單詞，再打開一個窗口來查詞是否是就很難受了。因此須要一款即時查詞的插件，在網頁上，就像複製那樣，選中須要查詢的單詞，就能夠查詢了，是否是很贊。哈哈。

五、Octotree

github是每一個程序員都常用的網站，可是有一個問題，在看源碼的時候，想要看另外一個文件，就得返回上一個網頁，再找到那個網頁。很麻煩，有時候會忘記要去那個文件了。Octotree 會在左側生成目錄樹，直接點擊切換就能夠了，是否是很讚的哈哈。

連接:

https://pan.baidu.com/s/1X9Zi_bjeAKhQWYVsoKGJbA

提取碼: hemx

六、markdown here

超好用的一款插件，強烈推薦！！有它不再用擔憂編輯器不支持markdown語法了，寫好之後直接一鍵轉換。並且也是一個跨平臺神器，好比咱們能夠把簡書寫好的文章（帶md語法）直接複製到微信公衆號，而後一鍵轉換，格式幾乎無變化！

連接:

https://pan.baidu.com/s/1wEzQIGXt4ZhAA76hEf0ZMA

提取碼: bey6

七、Adblock Plus：免除廣告困擾

廣告真的是使人很煩惱，有了這個插件，就能夠屏蔽大多數的廣告了。看博客時再也沒有各類廣告了哈哈。很贊。

連接:

https://pan.baidu.com/s/1nUN33pglve5zoocEoIvhlA

提取碼: b2cz

ps: 先寫到這，後續補充

PS：微信公衆號 FEvivi

獲取全部下載包，回覆 chrome 便可獲取上述全部插件

關注後回覆 vivi 獲取個人微信號，望不吝賜教，pps：可輕撩哈哈

感謝大佬們閱讀，但願你們頭髮濃密，睡眠良好，情緒穩定，早日實現財富自由~