如果你要用一種工具用幾年，甚至十幾年，那就現在開始用它，用的爛熟，那你可以將來的工作中節省掉很大一部分的時間。來源：segmentfault
我還記得 18 年的時候，有一次小組開會，當時的老大說我的工作效率不夠高，他見我當時不服的表情，然後他又當場問我：瀏覽器的快捷鍵記得有幾個 ?
比如：向下滾動網頁，一次一個屏幕的快捷鍵是 ？打開新的標籤頁，並跳轉到該標籤頁的快捷鍵是 ？
注意，問得是幾個！我當時還真答不上來幾個，他問得那兩個，我剛好又沒答對。
我們應該有一個目標：儘量只操作鍵盤即可滿足我們對瀏覽器的日常使用，擺脫鼠標的依賴，因為只操作鍵盤是最快的方式，還是高逼格的操作。
特別是程序員，每天少敲幾個鍵，少動幾下肩膀，長年累計下來，都能長命幾歲！
如本文題目，本文將分為 3 部分講解內容，由淺入深。
- 高效快捷鍵
- 高效擴展插件
- 高效調試技巧
原文地址：https://github.com/biaochenxuying/blog/issues/58
2. 高效快捷鍵
說明：下面表格中加粗的快捷鍵，都是筆者覺得非常常用，但很多人還不會用的，所以加粗突出重要性。
2.1 標籤頁和窗口快捷鍵
2.2 Google Chrome 功能快捷鍵
2.3 地址欄快捷鍵
2.4 網頁快捷鍵
2.5 鼠標快捷鍵
以下快捷鍵要求您使用鼠標：
更全的 Chrome 鍵盤快捷鍵請點這裡： Chrome 鍵盤快捷鍵傳送門。
3. 高效拓展插件
如果你還不懂如何安裝Chrome 插件 ？
可以看看 Chrome 插件安裝教程。
1. Clear Cache
只需單擊一下按鈕，即可清除緩存並瀏覽數據，這對前端開發人員非常有用，修改程序時，往往可能是因為有緩存而不生效。
使用此擴展程序可以快速清除緩存，而無需任何確認對話框，彈出窗口或其他煩人的內容。
您可以在選項頁面上自定義要清除的數據以及要清除的數據量，包括：應用程序緩存，緩存，Cookie，下載，文件系統，表單數據，歷史記錄，索引數據庫，本地存儲，插件數據，密碼和WebSQL 。
Cookie可以全局刪除，僅適用於某些域或除某些域以外的所有內容。
2. OneTab：將無數 Tab 合併在一個頁面
當您發現自己有太多的標籤頁時，單擊 OneTab 圖標，將所有標籤頁轉換成一個列表。當您需要再次訪問這些標籤頁時，可以單獨或全部恢復它們。
當您的標籤頁位於 OneTab 列表時，您將節省高達 95％ 的內存，因為你將減少 Google Chrome 瀏覽器中打開的標籤頁的數量。
當你有暫時看不完的標籤頁面時，可以收到 OneTab 裡面。
而且重新打開瀏覽器時，那些有收藏到 OneTab 的標籤頁面會打開，可以一鍵恢復之前的標籤頁。這樣又可以保存之前想保存的標籤頁面，又能關閉瀏覽器，不佔內存了。
3. Infinty：美觀實用的新建標籤頁
新標籤頁，自由添加網站圖標，雲端高清壁紙，快速訪問書籤、天氣、筆記、待辦事項、擴展管理與歷史記錄。
Infinity 新標籤頁是相比 Chrome 自帶的新標籤頁，您可以通過 Infinity 自定義添加自己喜愛的網站，我們重繪了上千圖標，當然您也可以自定義這些網站的圖標。
除此之外，還可以更新新標籤頁的背景圖片，既可以使用您自己的圖片，也可以使用自動更換圖片。
集成了天氣，待辦事項，筆記等功能，甚至還能顯示你的 Gmail 郵件數量和通知。流暢的體驗和漂亮的界面。
4. Google翻譯
Google 翻譯是一款由谷歌公司提供的網頁劃詞翻譯插件，是 Google Chrome 的翻譯擴展工具，由 Google 官方發佈。安裝後，會在 Chrome 瀏覽器菜單欄中添加一個按鈕，可以方便的在任何時候點擊翻譯你當前正在訪問的頁面。
5. 沙拉查詞-聚合詞典劃詞翻譯
Saladict 沙拉查詞是一款專業劃詞翻譯擴展，為交叉閱讀而生。大量權威詞典涵蓋中英日韓法德西語，支持複雜的劃詞操作、網頁翻譯、生詞本與 PDF 瀏覽。
比 google 翻譯的強大之處在於有多種翻譯及發音，還有例句。
6. FireShot：捕捉網頁截圖
有時候需要將網頁保存成圖片，通常情況下使用系統自帶或者微信截圖工具即可。但是如果頁面較長，有滾動條就比較麻煩了。
「FireShot」插件就能夠解決這個問題，不僅支持區域截圖，
還支持完整的長網頁截圖。捕捉網頁截圖，編輯並將它們保存為 PDF，JPEG，GIF，PNG 或 BMP；上傳，打印，在 Photoshop 中打開，複製到剪貼板或電子郵件等。
7. 右鍵搜：擴展你的右鍵菜單
不僅僅可以搜索文字，還可以搜索圖片。
擴展右鍵菜單，超過 300 種功能，方便的選擇、組合或自定義頁面、劃詞、圖片菜單，並有生成、解析二維碼和短網址功能。
選擇文字後右鍵顯示搜索菜單或右鍵圖片顯示圖片搜索。
8. 廣告終結者
廣告終結者的功能
- 過濾網頁上的各種類型廣告
- 百度聯盟等廣告聯盟的廣告
- 淘寶，天貓，京東等商城廣告
- 惡意彈窗廣告
- 各種影響網頁閱讀的浮動廣告
- 屏蔽視頻廣告
- 視頻片頭廣告
- 視頻暫停廣告
- 視頻下方的小廣告
- 提升網頁瀏覽體驗
- 屏蔽廣告，網頁排版更整齊，更易閱讀
- 屏蔽跟蹤代碼，防止個人隱私洩露
- 過濾廣告、跟蹤代碼，網頁加載速度更快
9. WEB前端助手(FeHelper)
Awesome，All In One的一個工具，包含多個獨立小應用，比如：Json工具、代碼美化、代碼壓縮、二維碼、Postman、markdown、網頁油猴、便籤筆記、信息加密與解密、隨機密碼生成、Crontab等等。
可以說是開發者的神器了，特別是前端開發者的神助手。
10. octotree：以目錄層級形式查看 github 代碼
GitHub 現有的目錄層級形式，在查看來自不同層級文件夾的文件的時候，顯得似乎不是很方便。
Octotree 這款 Chrome 插件能夠讓你通過文檔庫的方式管理、查看你的 GitHub 倉庫，簡單直觀的同時，也方便你進行文件之間的跳轉操作。
11. isometric-contributions
純裝逼利器，這個插件就是把 Github 的提交記錄從二維平面的變成三維立體的。安裝前：
安裝後：除了提交記錄變三維立體外，還支持通過設置來統計你的各項數據。
12. Save All Resources
經常在仿站的時候會遇到下載別人網站上的圖片、css、js 等資源，如果你是一個個的手動下載是很麻煩的，也很慢的。
程序員要學會偷懶，如果這些資源能一鍵下載下來，並按原來的目錄結構放好文件，直接打開就完美復原原來的網站，該多好啊！
筆者找了大半天，，找了好幾個插件，都不太好用，而且會打亂目錄結構。
終於找到了一個比較神奇的 Chrome 插件：Save All Resources 完美的滿足了我的需求！
審查元素後，翻到最後一個選項，點擊 Save All Resources 即可。
下載時的文件會被打包成一個壓縮包。
比如我下載小米手機的官網頁面：
解壓下載的壓縮包，裡面的文件結構長這樣。
html、css、js 等文件是下載下來了，直接打開你的 html 文件即可。
13. Lighthouse 前端性能優化測試工具
對於前端開發者來說，應該都非常熟悉 lighthouse 插件了。它是一款由谷歌官方團隊開發的開源網站性能測評工具，中文別稱“燈塔”，主要用於測試網站頁面性能、PWA、可訪問性（無障礙）、SEO 等內容。
lighthouse 插件會對任意網頁的各個測試項的結果打分，並給出優化建議報告，是一個非常實用的可視化網站優化工具。
14. Vue.js devtools 調試插件
Vue.js devtools是一款在 Chrome 商店和火狐商店裡擁有上百萬用戶的人氣插件，有 “Vue調試神器” 的稱號。
由於 Vue 是數據驅動的，所以開發者在開發調試中查看 DOM 結構不能夠解析出什麼。
但是藉助 Vue.js devtools 這款插件，大家就可以很方便地對數據結構進行解析和調試了，可以查看到 Vue 裡面的 data 、prop、method 等多種屬性和綁定的方法。
同類的調試工具，比較出名的還有 Facebook 出品的 React Developer Tools插件。
15. Wappalyzer 網站技術分析
Wappalyzer 是一款功能強大的、且非常實用的 Chrome 網站技術分析插件。
開發者有時候也是需要在別人的網站上尋找靈感和借鑑長處的。
那麼，當我們在瀏覽到一個感覺很不錯的網站，想知道他們運用了什麼框架和技術時該怎麼辦呢？這個時候，Wappalyzer 就能幫上忙了。
它能夠分析網站所採用的平臺構架、網站環境、服務器配置環境、JavaScript框架、編程語言等參數。
安裝完畢後，在你感興趣的網頁點擊Wappalyzer的插件圖標，就能在下拉窗口裡面看到這個網站用到的框架和技術了。
16. 一個神奇的網站
擴展迷：https://extfans.com/ 。
大家都知道 Chrome 插件一般都要科學上網才能下載到，但是自從這個網站出現以後下載插件不再需要折騰了。
直接訪問搜索名稱就可以下載到以上所提到的插件。
4. 高效調試技巧
下面介紹能提高前端工作效率的調試技巧。
4.1 修改 HTML
- 想變換元素位置，直接 拖動 HTML 元素到相應的位置即可。
- 想刪除元素，直接按鍵盤上的 刪除健 即可。
- 給元素添加或者修改屬性，可以右鍵，然後選擇 Add attribute 或者 Edit attribute 即可。
- 想收起所有的 children 時，可以右鍵，然後選擇 Callapse childen 即可。
- 想展開 HTML 裡面的所有 children 時，可以右鍵，然後選擇 Expand recusively 即可。
- 強制元素的狀態為 hover、active、focus、visited、focus-widthin 。
- 把 HTML 元素做為 js 變量，選中元素右鍵，選擇 Store as global ，就可以在 js 控制檯直接寫 js 操作 dom 了。
4.2 Copy HTML
幾乎所有人都知道，右擊或者點擊在 HTML 元素左邊上的省略號 ... 就可以將它 copy 到剪貼板中。
但是你不知道的是：古老的 [ctrl] + [c] 大法依舊可用！
4.3 修改 CSS
4.4 Copy CSS
4.5 console
- console.table
- console.dir
有時候你想要打印一個 DOM 節點。 console.log 會將這個交互式的元素渲染成像是從 Elements 中剪切出來的一樣。如果說你想要查看 這個節點所關聯到的真實的js對象 呢？並且想要查看他的 屬性 等等？
在那樣的情況下，就可以使用console.dir:
查看圖片：https://segmentfault.com/img/remote/1460000021894701
4.6 copy(...)
你可以通過全局的方法 copy() 在 console 裡 copy 任何你能拿到的數據，無論是 引用類型。
<code>// 控制檯輸入
location
// copy
copy(location);
// 複製到的數據
{
"href": "chrome-extension://nnnkddnnlpamobajfibfdgfnbcnkgngh/pages/newtab.html",
"ancestorOrigins": {},
"origin": "chrome-extension://nnnkddnnlpamobajfibfdgfnbcnkgngh",
"protocol": "chrome-extension:",
"host": "nnnkddnnlpamobajfibfdgfnbcnkgngh",
"hostname": "nnnkddnnlpamobajfibfdgfnbcnkgngh",
"port": "",
"pathname": "/pages/newtab.html",
"search": "",
"hash": ""
}/<code>
4.7 發送 XHR
- 重新發送 XHR 的請求
如何重新發送 XHR 的請求？刷新頁面？太老套了，試試這麼做：
- 用新的 tab 打開請求、清除瀏覽器緩存、清除瀏覽器 cookies，每次請求都禁用緩存
動圖
- 複製 請求鏈接、請求頭、請求返回頭、請求返回數據
動圖
4.8 Store as global (存儲為一個全局變量)
如果你在 console 中打印了一堆數據 (例如你在 App 中計算出來的一個數組) ，然後你想對這些數據做一些額外的操作，比如我們剛剛說的 copy (在不影響它原來值的情況下) 。 那就可以將它轉換成一個全局變量，只需要 右擊 它，並選擇 “Store as global variable” (保存為全局變量) 選項。
第一次使用的話，它會創建一個名為 temp1 的變量，第二次創建 temp2，第三次 ... 。通過使用這些變量來操作對應的數據:
4.9 保存堆棧信息( Stack trace )
大多數情況下都不是一個人開發一個項目，而是一個團隊協作，那麼 如何準確的描述問題，就成為了溝通的關鍵 ，這時候 console 打印出來的堆棧跟蹤的信息對你和同事來說就起大作用了，可以省去很多溝通成本，所以你可以直接把堆棧跟蹤的信息保存為一個文件，而不只是截圖發給對方：
4.10 切換 DevTools 窗口的展示佈局
這時就可以通過 DevTools 的下拉菜單，或者命令菜單...或者使用一個快捷鍵 ctrl + shift + D (⌘ + shift + D Mac) 來實現位置的切換（通常是從 開始的位置 到 右邊位置， 但是如果一開始就是 右邊的位置 那麼會切換到 左邊的位置）
4.11 切換 DevTools 的面板
如果可以的話，我想成為一個不需要鼠標的開發者，日常開發中，我們常需要從 元素面板 跳轉到 資源面板 並返回，這樣往返的來調試我們的代碼，怎麼來節省鼠標點擊的時間呢：
按下 ctrl + [ 和 ctrl + ] 可以從當前面板的分別向左和向右切換面板。
想學更多的 Chrome 技巧，請移步：Chrome 開發者工具。
上面講到的調試技巧，有幾點是掘金小冊：你不知道的 Chrome 調試技巧 裡面的內容，裡面還有更多的技巧，推薦技術人員去看看，真的是良心作品，只需要 1 分錢！
5. 後語
最近公司項目組的事真的好忙，本來項目的事就忙了，還要接手一個前端自動化項目，一邊學習新技術，一邊熟悉業務，所以更忙了。
距離上篇原創已經過去一個月了啊 ，這篇文章還是年前寫的，不過當時沒寫完，直到今天才有時間把它寫完 。
其實這篇文章的內容是筆者在我司項目組裡面做的一次內部分享，因為面對的人不止是技術人員，所以選了提升工作效率的主題，現在把它修改一下內容，整理成文章分享給讀者們，一起進步。
其實筆者想寫的內容還很多的，就是時間最緊缺，生活艱難 ，等熟練新項目和技術之後，應該又能愉快的寫文章了。
原文地址：https://github.com/biaochenxuying/blog/issues/58
閱讀更多 加米穀大數據 的文章
