1. 切換 DevTools 窗口的展示布局

一般我在使用 DevTools 時， dock 的展示窗口都在底部 ，但是有時候我想把 dock 的窗口 切換到右邊。

怎么做呢？

這時就可以通過 DevTools 的下拉菜單，或者命令菜單...或者使用一個快捷鍵 ctrl + shift + D (? + shift + D Mac) 來實現(xiàn)位置的切換（通常是從 開始的位置 到 右邊位置， 但是如果一開始就是 右邊的位置 那么會切換到 左邊的位置）:

2. 切換 DevTools 的面板

如果可以的話，我想成為一個不需要鼠標(biāo)的開發(fā)者，日常開發(fā)中，我們常需要從 元素面板 跳轉(zhuǎn)到 資源面板 并返回，這樣往返的來調(diào)試我們的代碼，怎么來節(jié)省鼠標(biāo)點擊的時間呢：

• 按下 ctrl + [ 和 ctrl + ] 可以從當(dāng)前面板的分別向左和向右切換面板。

• 按下 ctrl + 1 到 ctrl + 9 可以直接轉(zhuǎn)到編號 1...9 的面板(ctrl + 1 轉(zhuǎn)到元素面板，ctrl + 4 轉(zhuǎn)到網(wǎng)絡(luò)信息面板等等)

請注意! 我們在上面介紹的第二組快捷鍵默認(rèn)被禁用了。你可以通過 DevTools>>Settings>>Preferences>>Appearance 打開這個選項：

3. 遞增/遞減

接下來這個技巧，對調(diào)整樣式是最有用的：通過使用 帶有 或者 不帶有修飾鍵 的 上 / 下 箭頭按鍵 你可以實現(xiàn) 遞增 和 遞減 0.1 ， 1 或者 10 這樣數(shù)值類型的值。

windows：0.1是alt+上下鍵，1是直接上下鍵，10是shift+上下鍵，100是Ctrl+上下鍵

4. elements， logs， sources & network 中的查找

DevTools 中的前4個主要的面板，每一個都支持 [ctrl] + [f] 快捷方式，你可以使用對應(yīng)的查詢方式來查找信息:

• 在 Elements 面板中 - 通過 string ，選擇器 或者 XPath 來查找
• 而在 Console， Network 以及 Source 面板 - 通過區(qū)分大小寫，或者可以被視為表達(dá)式的 strings， 來查找