前端工程師大部分工作成果需要在瀏覽器中查看，使用 chrome 瀏覽器的頻率非常高。更好更優雅地使用 chrome，將 chrome 配置成趁手的瀏覽器，將極大提升編程效率。本文將詳細介紹 chrome 瀏覽器的使用技巧
調試工具
下面介紹一些冷門但很有用的調試工具使用方法
【控制台】
在 chrome 開發者工具中的任何一個面板下(除 console 面板外)，按住 esc 都可以在該面板下方新生成一個 console 面板
通常情況下，控制台只提供單行輸入，可以用分號做分割符來執行多個 javascript 語句；而如果需要多行代碼的話，可以通過組合鍵 shift+enter 來實現換行，在這種情況下代碼不會被立即執行
【代碼片段】
chrome 在 sources 頁面提供 snippets 一欄，這里我們可以隨時編寫 Javascript 代碼，運行結果會打印到控制台。代碼是全局保存的，在任何頁面，包括新建標簽頁，都可以查看或運行這些代碼。使用 command + enter 可以運行該代碼
【展開 DOM】
在 Elements 標簽頁中，如果要查看一個元素中曾經很深的子元素，可以按住 option 鍵，點擊元素，則元素的 DOM 結構會完全展開
【搜索】
在 elements 標簽下使用 ctrl+f 搜索功能，可以使用 css 選擇器，如'.test'，可以搜索到所有類名為 test 的元素
【跳轉位置】
在 elements 標簽下，選擇元素節點，點擊右鍵菜單中的 scroll into view，可以滾動瀏覽器到元素所處位置
【快速定位】
在 Sources 標簽下的代碼文件中，使用 ctrl + p 呼出搜索框，然后以 :行號:列號 的形式輸入並回車，可以將代碼快速定位到該位置
【刷新】
一般地，人們對於刷新的印象只是停留在使用F5快捷鍵上。但實際上，刷新包括三種。在開發者調試工具打開的情況下，長按刷新按鈕，會出現這三種刷新選項
【代碼反壓縮】
一般地，線上的 javascript 代碼都是經過壓縮的，基本上無法直接閱讀。點擊下方的大括號｛｝圖標，瀏覽器會反壓縮過重新排版美化當前的 javascript 代碼
【計算樣式】
通過點擊 elements 標簽右側的 computed 子標簽，可以查看元素計算后的樣式
插件
下面將詳細介紹常用的一些 chrome 插件
【Web 前端助手】
FEHelper(Web 前端助手)包含多個獨立小應用，比如：Json工具、代碼美化、代碼壓縮、二維碼、Postman、markdown、網頁油猴、便簽筆記、信息加密與解密、隨機密碼生成、Crontab等，這樣安裝一個 FEHelper 相當於安裝了多個插件
【字符編碼】
前端開發時，經常出現亂碼的情況。但是，新版本的 chrome 瀏覽器已經沒有更改字符編碼的設置選擇，這時就要用到set character Encoding插件了
在頁面空白處，點擊右鍵，即可選擇需要的編碼格式
【OneTab】
經常有開 10 個以上的標簽頁經歷，更痛苦的是，有太多的標簽頁時，Chrome 有卡頓現象出現！使用OneTab插件，不僅節省高達 95% 的內存，還能減輕標簽頁混亂現象！單擊 OneTab 圖標，所有標簽頁轉換成一個列表。需要再次訪問標簽頁時，可以單獨或全部恢復它們
【測量】
Page Ruler 可以直接查看網頁一些圖片的詳細像素大小、具體位置等，非常實用
快捷鍵
多記幾個快捷鍵，就可以少點幾次鼠標，提升工作效率
【標簽頁】
Command + W 關閉標簽頁
Command + T 打開標簽頁
Command + Shift + T 重新打開關閉的標簽頁
Command + 左方向鍵 后退
Command + 右方向鍵 前進
Command + Option + 右方向鍵 跳轉到后一個標簽頁
Command + Option + 左方向鍵 跳轉到前一個標簽頁
Command + 1(到 8) 跳轉到特定標簽頁
Command + 9 跳轉到最右側標簽頁
【功能】
Command + Option + I 打開“開發者工具”
Command + Shift + J 打開“下載內容”頁
Command + Shift + Delete 打開“清除瀏覽數據”選項
【網頁】
Command + R 刷新
Command + L 將光標置於地址欄
Command + + 網頁放大
Command + - 網頁縮小
Command + 0 縮放 100%
空格鍵 向下滾動網頁，一次一個屏幕
Shift + 空格鍵 向上滾動網頁，一次一個屏幕
小功能
chrome 瀏覽器中隱藏了一些小功能
【文本編輯器】
在地址欄里，輸入data:text/html,<html contenteditable>，當前的標簽頁將變成一個文本編輯器，可以用來臨時記錄一些數據
【小恐龍游戲】
無法連接網絡，網頁出現小恐龍的時候，按空格，就可以玩游戲了
在地址欄里，輸入chrome://dino/，回車后，按空格，也可以出現小恐龍游戲
