谷歌開發(fā)者工具是前端日常不可缺少的神奇，寫布局，找 bug，優(yōu)化加載速度統(tǒng)統(tǒng)靠他。但是你真的了解他么？這篇文章是專門介紹谷歌瀏覽器各種好用小技巧的。不是什么長篇大論，旨在提高你的開發(fā)效率，早日完工回家陪女朋友。
應該了解的快捷鍵
放大內容 CTRL + +
縮小內容 CTRL + -
回到正常大小 CTRL + 0
標簽頁切換 CTRL + 1~9 (1~9 分別代表第一個標簽，第二個標簽...)
打開新的標簽 CTRL + T
搜索內容 CTRL + F
回到上一頁 CTRL + 左箭頭
回到下一頁 CTRL + 右箭頭
打開開發(fā)者工具 F12 MAC command + shift + i
另外一個小知識就是設置搜索引擎了，直接在地址欄中輸入內容搜索內容。我用的 Bing 的搜索引擎：
設置方式也很簡單： 打開設置 -> 搜索引擎 -> 切換想要搜索引擎
Elements 中的的常用技巧
1.快速查看元素的快捷鍵 CTRL + SHIFT + C
每次選一個元素先去右上角點一下鼠標選元素狀態(tài)，在我這里不存在的。直接快捷鍵 CTRL + SHIFT + C 選中你想要的元素
2.想查看鼠標經(jīng)過的元素的樣式
鼠標經(jīng)過的樣式并不會直接在 Stylus 上顯示出來，需要鼠標移入才會出來。這樣就沒辦法修改樣式。這里就需要倆個技巧了
1.單擊上圖中的 :hov 按鈕會出來 force element state。然后打鉤就可以了。
2. 直接在 Elements 中右鍵選擇 Force state 也是可以的。
Console 中的的常用技巧
console 直接提供了命令行運行 js 的條件，強大的提示功能，想不起來哪個單詞怎么寫了直接命令行輸入就會出來一片一片的提示。想看某個對象的方法比起你去百度要快多了。必備技能啊
上圖中展示了字符串中的方法
1.瀏覽器支持直接使用 jQuery 的方式直接獲取元素例如：$("body")
這個有一個妙用，比如說改標簽的內容，你直接在 Elements 里面改非常不方便，但是你如果只把你需要的一部分拿出來改是不是就很爽了呢。
2.打印的東西太多，直接使用 clear() 函數(shù)清理掉
3. 使用" [ " " { " " . " 進行換行
Network 中常用的技巧
這個是我日常工作中使用頻率最高的，像數(shù)據(jù)不對后臺要請求報文，查看數(shù)據(jù)格式，看代碼加載時間等等。
1.如何只看前后端交互的請求？
上圖中的分類能夠最簡單的將請求進行分類，XHR 就是前后端之間的請求了，屬于重度使用對象。其他的還有看 CSS, JS，Img 等等。
要在高級一些就是 filter 了支持內容過濾，請求頭過濾。
2.對于單擊某個按鈕就跳轉新的頁面的情況如何查看上個頁面的請求？
Preserve log 了解一下。勾上了他不管你怎么刷新頁面，里面的記錄都不會消失了。
3.接口緩存清理，但請不要清理掉我的密碼記錄
還是上圖，Preserve log 旁邊有個 Disable cache 選中它就能夠不緩存請求數(shù)據(jù)了。當然這還遠遠不夠，因為有時候你還需要清除 session，cookiey等等緩存。
在打開控制臺的情況下，右鍵刷新按鈕有個 清空緩存并硬性重新加載的選項，它能夠還你一個初次打開的頁面哦。
4.快速獲取地址欄鏈接，上面還有很多其他信息的獲取方式?？梢远嗫纯?！
Application 的常用技巧
從圖中可以看到這是一個專門看各種緩存的地方。想知道自己的緩存存儲的情況，甚至修改緩存值調試代碼，這里都要方便的多
Source 的常用技巧
Source 是專門放資源的地方，在這里可以看到整個頁面都用到了哪些資源
1.壓縮的代碼格式化。
點一下這個 大括號 瞬間以你能讀的格式展示出來。從此再也不用復制粘貼到編輯器里面格式化了。
2.代碼調試
console 打印局部變量，查看代碼執(zhí)行順序其實還是蠻好用的。但是放到循環(huán)循環(huán)語句里面給你打印出來你能理解的了么？因此打斷點就很重要了。name如何打斷點呢？這里有倆種方法：
1. 代碼中加入 debugger。打開控制臺代碼執(zhí)行到這里的時候自然就會進入斷點模式，不打開控制臺是不會進來的。
2.在 Source 中打斷點
找到你要打斷點的那一行，在左邊行號這一點就打上斷點了，很簡單。甚至可以設置條件斷點：
右鍵這個小箭頭可以看到有個 Edit breakpoint 。就可以給斷點設置進入條件。比如 i=5 。就代表 i = 5 的時候才會進入斷點。
總結
文中涉及的內容都是比較常用的，沒有列舉很多感覺比較牛逼。但是實際操作的時候卻很少用的功能，如果想了解的更多更全面可以查看谷歌開發(fā)者工具的中文翻譯文檔：https://www.html.cn/doc/chrome-devtools/
如果你想了解更多的騷技巧可以看這倆篇文章：
