10個必須知道的Chrome開發工具和技巧

做者：FelDev
譯者：前端小智
來源：medium

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

1. 模擬慢速網絡和慢速設備

咱們可能習慣了在城市的網速，那是槓槓的，並不意味網速在中國哪一個都同樣的，在一些偏遠地方，網速依然慢的可憐，因此有時候咱們所作的產品是須要考慮網速慢的狀況的，那怎麼模擬呢？

打開谷個瀏覽器的performance選項卡，而後單擊右上角的齒輪圖標就能夠看到 Newwork 和CPU的模擬狀況。

2. 顏色選擇器

單擊表示顏色的小方塊，彈出顏色選擇器。

啓用顏色選擇器後，能夠將網頁懸停並使用顏色選擇器來獲取該像素的顏色。

彈出顏色選擇器的小方塊還有快捷鍵按住Shift並單擊以更改顏色格式。

3. Audits

Audits（審計）,這個功能其實一直存在，只不過在chrome 60以後，發生了翻天覆地的變化：引入了Google開源的另一個項目：LightHouse。

Audits主要從5個方面來給網頁打分，最終會生成一個report:

4.Pretty Print（顯示可讀代碼）

咱們知道許多網站都對Javascript代碼進行了壓縮，但這對開發者和學習者來講，讀起來很費勁，谷歌提供一個功能給咱們，能夠更好查看壓縮文件。

咱們點擊下方的大括號｛｝圖標，便可使用Pretty Print功能了

5.快速文件切換器

若是你知道文件名，則沒必要打開「Sources」選項卡。只需按cmd/ctrl + p，而後輸入你想查找的文件名，接下按下回車就 ok 了。

6. 響應模式

咱們在桌面和移動設備上開發網站，一般咱們傾向於最初的桌面體驗。 可是這與愈來愈多的用戶使用移動設備訪問網絡的趨勢相脫離。 爲了提升網站的用戶體驗，咱們須要準確地知道網站在移動設備上的效果。 Chrome 開發者工具包里加入了手機模擬器特性，幫助咱們測試：

對於大多數人而言，大多數時間只須要經過不一樣的屏幕尺寸和方向查看他們的網站便可。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

我和阿里雲合做服務器，折扣價比較便宜：89/年，223/3年，比學生9.9每個月還便宜，買了搭建個項目，熟悉技術棧比較香（老用戶用家人帳號買就行了，我用我媽的)推薦買三年的划算點，點擊本條就能夠查看。

Icomo

7.屏幕截圖

一、F12

二、【ctrl+shift+p】

三、輸入「capture」

四、選擇如下任意

1. capture full size screenshot」【整個網頁】
2. capture node screenshot」【節點網頁】
3. 「capture screenshot」【當前屏幕】

8. Extensions

咱們能夠將擴展程序安裝到Chrome開發者控制檯。 許多框架都有本身的擴展名，以簡化其技術（Vue，Angular，React等）的開發。 這是Featured DevTools擴展的列表。

9. Coverage

Coverage 是chrome開發者工具的一個新功能，從字面意思上能夠知道它是能夠用來檢測代碼在網站運行時有哪些js和css是已經在運行，而哪些js和css是尚未用到的，如圖，這是我在打開csdn網頁時，所顯示的已運行和還沒有運行的代碼狀況。

如何打開caverage 前提：chrome瀏覽器的版本必須是59或以上，在ctrl+shift+i快速打開devtools，點擊右上角的... More tools 有個Coverage。

那這個新功能有什麼做用呢？

如上圖所示，最右邊顯示的是咱們加載的css和js文件數量，紅色區域表示已運行的代碼，而青色表示已加載但未運行的代碼。可用來發現頁面中還沒有用到的js 和 css代碼，你能夠爲用戶只提供必要的代碼，這樣就能夠提高頁面的性能。這對於找出能夠進行拆分的腳本以及延遲加載非關鍵腳原本說很是有用。

10. 實時跟進新功能

Chrome 的開發工具會不斷更新，它會在What's New In DevTools 上發佈更新的視頻，咱們能夠時不是去看看，瞭解一些新出來的功能，這樣咱們就能實時知道谷歌的一些好用的功能了。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

來源：https://medium.com/better-pro...

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。