Chrome Devtools 是我們整天用的工具，多學一些小技巧還是挺有意義的。

今天我們再來學一些常用的小技巧吧，都是一看就會的那種。

Sources 切換分組方式

Sources 面板默認是按照域名來分組的，這樣想找某個文件比較麻煩：

其實可以切換到不以域名分組的方式：

這樣想找某個文件是不是就清爽多了。

Network 自定義展示列

Network 是可以修改展示的列的，比如我勾選 Cookie 和 Set-Cookie：

就會在 Network 列表里展示這兩列：

這兩列啥意思呢?

Set-Cookie 的意思就是這個請求的響應會設置幾個 cookie。

點開請求的詳情確實是這樣的：

Cookies 的意思就是說這個請求會攜帶幾個 cookie：

比如那個攜帶 17 個 cookie 的請求：

不用數，肯定是 17 個。

除此以外，你還可以自定義展示的 header：

想展示啥 header 都行。

有同學可能會問，請求詳情里不是能看到所有 header 么?這里展示有什么意義么?

效率不一樣呀，一個個點開看，和列表里直接展示這個 header，那效率肯定差很多呀。

樣式快速復制

我們經常用 chrome devtools 來調試樣式，然后把調好的樣式復制到編輯器里。

大家是不是都是選中再復制的?其實不用，可以直接用這兩個功能：

復制單個樣式或者復制全部樣式，效率更高一些。

快速查看計算后的樣式

有的時候我們寫的樣式是要經過一些計算才能得到最終的樣式的，比如 rem，calc 等：

怎么知道這里的 1rem 計算后是多少呢?

可以在右邊的 computed 里找：

但是這樣是也太多了吧，怎么快速找到我想看的那個 1rem 對應的是多少呢?

可以右鍵這個樣式，點擊 view computed value，就可以快速過濾出對應那條樣式對應的計算后的樣式了：

調試手機網頁

很多人調試移動端的網頁都是用 vconsole 來展示日志，這樣效率是很低的。

chrome devtools 支持遠程調試，可以調試安卓手機上的網頁。

用 USB 連接手機和電腦就行(安卓手機上要在設置里打開允許 USB 調試)。

之后打開 chrome://inspect 就可以看到所有手機上的網頁了，還有 APP 調試包的 webview 里的網頁：

點擊 inspect 就可以調試移動端網頁了：

可以審查元素，可以在控制臺執行一些 JS，可以用 Network 查看網絡請求，大部分調試功能都能用。這不比 vconsole 香么?

瀏覽器里的網頁，還有調試包 APP 的 webview 里的網頁都能調試。當然，最好還是手機也用 chrome 瀏覽器打開，這樣支持的功能是最多的。

總結

今天我們又學了一些 chrome devtools 的小技巧：

• Sources 默認是按照域名分組，可以切換成文件名列表的方式，更容易查找文件
• Network 可以自定義展示列，比如 Cookie、Set-Cookie 或者任意的 header
• 樣式可以右鍵 copy declaration 快速復制
• 樣式可以右鍵 view computed value 快速查看計算之后的值
• chrome devtools 可以調試 USB 連接的安卓手機的網頁(瀏覽器里的和調試包 APP 的 webview 里的)，調試體驗比 vconsole 好得多

這幾個小技巧看一遍就記住了，下次用 chrome devtools 的時候就試一下吧。