谷歌開發者工具，這些技巧你用過麼？

谷歌開發者工具是前端平常不可缺乏的神奇，寫佈局，找 bug，優化加載速度通通靠他。可是你真的瞭解他麼？這篇文章是專門介紹谷歌瀏覽器各類好用小技巧的。不是什麼長篇大論，旨在提升你的開發效率，早日完工回家陪女友。

應該瞭解的快捷鍵

1. 放大內容 CTRL + +
2. 縮小內容 CTRL + -
3. 回到正常大小 CTRL + 0
4. 標籤頁切換 CTRL + 1~9 (1~9 分別表明第一個標籤，第二個標籤...)
5. 打開新的標籤 CTRL + T
6. 搜索內容 CTRL + F
7. 回到上一頁 CTRL + 左箭頭
8. 回到下一頁 CTRL + 右箭頭
9. 打開開發者工具 F12 MAC command + shift + i

另一個小知識就是設置搜索引擎了，直接在地址欄中輸入內容搜索內容。我用的 Bing 的搜索引擎：

設置方式也很簡單： 打開設置 -> 搜索引擎 -> 切換想要搜索引擎

Elements 中的的經常使用技巧

1.快速查看元素的快捷鍵 CTRL + SHIFT + C

每次選一個元素先去右上角點一下鼠標選元素狀態，在我這裏不存在的。直接快捷鍵 CTRL + SHIFT + C 選中你想要的元素

2.想查看鼠標通過的元素的樣式

鼠標通過的樣式並不會直接在 Stylus 上顯示出來，須要鼠標移入纔會出來。這樣就沒辦法修改樣式。這裏就須要倆個技巧了

1.單擊上圖中的 :hov 按鈕會出來 force element state。而後打鉤就能夠了。

2. 直接在 Elements 中右鍵選擇 Force state 也是能夠的。

Console 中的的經常使用技巧

console 直接提供了命令行運行 js 的條件，強大的提示功能，想不起來哪一個單詞怎麼寫了直接命令行輸入就會出來一片一片的提示。想看某個對象的方法比起你去百度要快多了。必備技能啊

上圖中展現了字符串中的方法

1.瀏覽器支持直接使用 jQuery 的方式直接獲取元素例如：$("body")

這個有一個妙用，好比說改標籤的內容，你直接在 Elements 裏面改很是不方便，可是你若是隻把你須要的一部分拿出來改是否是就很爽了呢。

2.打印的東西太多，直接使用 clear() 函數清理掉

3. 使用" [ " " { " " . " 進行換行

Network 中經常使用的技巧

這個是我平常工做中使用頻率最高的，像數據不對後臺要請求報文，查看數據格式，看代碼加載時間等等。

1.如何只看先後端交互的請求？

上圖中的分類可以最簡單的將請求進行分類，XHR 就是先後端之間的請求了，屬於重度使用對象。其餘的還有看 CSS, JS，Img 等等。

要在高級一些就是 filter 了支持內容過濾，請求頭過濾。

2.對於單擊某個按鈕就跳轉新的頁面的狀況如何查看上個頁面的請求？

Preserve log 瞭解一下。勾上了他無論你怎麼刷新頁面，裏面的記錄都不會消失了。

3.接口緩存清理，但請不要清理掉個人密碼記錄

仍是上圖，Preserve log 旁邊有個 Disable cache 選中它就可以不緩存請求數據了。固然這還遠遠不夠，由於有時候你還須要清除 session，cookiey等等緩存。

在打開控制檯的狀況下，右鍵刷新按鈕有個 清空緩存並硬性從新加載的選項，它可以還你一個初次打開的頁面哦。

4.快速獲取地址欄連接，上面還有不少其餘信息的獲取方式。能夠多看看！

Application 的經常使用技巧

從圖中能夠看到這是一個專門看各類緩存的地方。想知道本身的緩存存儲的狀況，甚至修改緩存值調試代碼，這裏都要方便的多

Source 的經常使用技巧

Source 是專門放資源的地方，在這裏能夠看到整個頁面都用到了哪些資源

1.壓縮的代碼格式化。

點一下這個 大括號 瞬間以你能讀的格式展現出來。今後不再用複製粘貼到編輯器裏面格式化了。

2.代碼調試

console 打印局部變量，查看代碼執行順序其實仍是蠻好用的。可是放到循環循環語句裏面給你打印出來你能理解的了麼？所以打斷點就很重要了。name如何打斷點呢？這裏有倆種方法：

1. 代碼中加入 debugger。打開控制檯代碼執行到這裏的時候天然就會進入斷點模式，不打開控制檯是不會進來的。

2.在 Source 中打斷點

找到你要打斷點的那一行，在左邊行號這一點就打上斷點了，很簡單。甚至能夠設置條件斷點：

右鍵這個小箭頭能夠看到有個 Edit breakpoint 。就能夠給斷點設置進入條件。好比 i=5 。就表明 i = 5 的時候纔會進入斷點。

總結

文中涉及的內容都是比較經常使用的，沒有列舉不少感受比較牛逼。可是實際操做的時候卻不多用的功能，若是想了解的更多更全面能夠查看谷歌開發者工具的中文翻譯文檔： www.html.cn/doc/chrome-…

若是你想了解更多的騷技巧能夠看這倆篇文章：

juejin.im/post/5af538…

umaar.com/dev-tips/