1. 模擬慢速網(wǎng)絡(luò)和慢速設(shè)備

我們可能習(xí)慣了在城市的網(wǎng)速，那是杠杠的，并不意味網(wǎng)速在中國(guó)哪個(gè)都一樣的，在一些偏遠(yuǎn)地方，網(wǎng)速依然慢的可憐，所以有時(shí)候我們所做的產(chǎn)品是需要考慮網(wǎng)速慢的情況的，那怎么模擬呢？

打開(kāi)谷歌瀏覽器的performance選項(xiàng)卡，然后單擊右上角的齒輪圖標(biāo)就可以看到 Newwork 和CPU的模擬情況。

2. 顏色選擇器

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

啟用顏色選擇器后，可以將網(wǎng)頁(yè)懸停并使用顏色選擇器來(lái)獲取該像素的顏色。

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

3. Audits

Audits（審計(jì)）,這個(gè)功能其實(shí)一直存在，只不過(guò)在chrome 60之后，發(fā)生了翻天覆地的變化：引入了Google開(kāi)源的另外一個(gè)項(xiàng)目：LightHouse。

Audits主要從5個(gè)方面來(lái)給網(wǎng)頁(yè)打分，最終會(huì)生成一個(gè)report:

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

我們知道許多網(wǎng)站都對(duì)Javascript代碼進(jìn)行了壓縮，但這對(duì)開(kāi)發(fā)者和學(xué)習(xí)者來(lái)說(shuō)，讀起來(lái)很費(fèi)勁，谷歌提供一個(gè)功能給我們，可以更好查看壓縮文件。

我們點(diǎn)擊下方的大括號(hào)｛｝圖標(biāo)，即可使用Pretty Print功能了

5.快速文件切換器

如果你知道文件名，則不必打開(kāi)“Sources”選項(xiàng)卡。只需按cmd/ctrl + p，然后輸入你想查找的文件名，接下按下回車(chē)就 ok 了。

6. 響應(yīng)模式

我們?cè)谧烂婧鸵苿?dòng)設(shè)備上開(kāi)發(fā)網(wǎng)站，通常我們傾向于最初的桌面體驗(yàn)。 但是這與越來(lái)越多的用戶使用移動(dòng)設(shè)備訪問(wèn)網(wǎng)絡(luò)的趨勢(shì)相脫離。 為了提高網(wǎng)站的用戶體驗(yàn)，我們需要準(zhǔn)確地知道網(wǎng)站在移動(dòng)設(shè)備上的效果。 Chrome 開(kāi)發(fā)者工具包里加入了手機(jī)模擬器特性，幫助我們測(cè)試：

對(duì)于大多數(shù)人而言，大多數(shù)時(shí)間只需要通過(guò)不同的屏幕尺寸和方向查看他們的網(wǎng)站即可。

Icomo

7.屏幕截圖

1、F12

2、【ctrl+shift+p】

3、輸入“capture”

4、選擇以下任意

1. capture full size screenshot”【整個(gè)網(wǎng)頁(yè)】
2. capture node screenshot”【節(jié)點(diǎn)網(wǎng)頁(yè)】
3. “capture screenshot”【當(dāng)前屏幕】

8. Extensions

我們可以將擴(kuò)展程序安裝到Chrome開(kāi)發(fā)者控制臺(tái)。 許多框架都有自己的擴(kuò)展名，以簡(jiǎn)化其技術(shù)（Vue，Angular，React等）的開(kāi)發(fā)。 這是Featured DevTools擴(kuò)展的列表。

9. Coverage

Coverage 是chrome開(kāi)發(fā)者工具的一個(gè)新功能，從字面意思上可以知道它是可以用來(lái)檢測(cè)代碼在網(wǎng)站運(yùn)行時(shí)有哪些js和css是已經(jīng)在運(yùn)行，而哪些js和css是還沒(méi)有用到的，如圖，這是我在打開(kāi)csdn網(wǎng)頁(yè)時(shí)，所顯示的已運(yùn)行和尚未運(yùn)行的代碼情況。

如何打開(kāi)caverage 前提：chrome瀏覽器的版本必須是59或以上，在ctrl+shift+i快速打開(kāi)devtools，點(diǎn)擊右上角的… More tools 有個(gè)Coverage。

那這個(gè)新功能有什么作用呢？

如上圖所示，最右邊顯示的是我們加載的css和js文件數(shù)量，紅色區(qū)域表示已運(yùn)行的代碼，而青色表示已加載但未運(yùn)行的代碼?？捎脕?lái)發(fā)現(xiàn)頁(yè)面中尚未用到的js 和 css代碼，你可以為用戶只提供必要的代碼，這樣就可以提升頁(yè)面的性能。這對(duì)于找出可以進(jìn)行拆分的腳本以及延遲加載非關(guān)鍵腳本來(lái)說(shuō)非常有用。

10. 實(shí)時(shí)跟進(jìn)新功能

Chrome 的開(kāi)發(fā)工具會(huì)不斷更新，它會(huì)在What's New In DevTools 上發(fā)布更新的視頻，我們可以時(shí)不是去看看，了解一些新出來(lái)的功能，這樣我們就能實(shí)時(shí)知道谷歌的一些好用的功能了。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug（https://www.fundebug.com/?utm_source=xiaozhi）。