chrome是我比較喜歡的一個瀏覽器，本文作者通過圖文並茂的方式向我們展示了Chrome的13個基礎使用技巧，我從中發現跟使用Sublime Text2中有很多類似的快捷鍵，希望你也能從中有所收穫。
1.快速切換檔案
我一般如果查詢每個檔案，一般都是開啟控制檯，在source控制皮膚裡面一個一個去找，看下面的圖你就應該知道，這麼多檔案，你都不知道在哪個目錄下面，然後就只能一個一個點開看
後來才發現原來按Ctrl+P（cmd+p on mac）,就能快速搜尋和開啟你專案的檔案。
2.在原始碼中搜尋
大家都知道如果在要在Elements檢視原始碼，只要定位到Elements皮膚，然後按ctrl+f就可以了
可是如果你希望在原始碼中搜尋要怎麼辦呢？在頁面已經載入的檔案中搜尋一個特定的字串，快捷鍵是Ctrl + Shift + F (Cmd + Opt + F)，這種搜尋方式還支援正規表示式哦
3.在原始碼中快速跳轉到指定的行
大家都知道在VS裡，一個cs檔案可能特別多行，然後我們就是使用ctrl+g快捷鍵來跳轉到特定的行，事實上在chrome控制檯也是一樣的，在Sources標籤中開啟一個檔案之後，按Ctrl + G，(or Cmd + L for Mac)，然後輸入行號，chrome控制檯就會跳轉到你輸入的行號所在的行。
4.使用多個插入符進行選擇
當編輯一個檔案的時候，你可以按住Ctrl在你要編輯的地方點選滑鼠，可以設定多個插入符，這樣可以一次在多個地方編輯
5.裝置模式
最近做用H5做攜程商旅APP，用的最多的就是chrome瀏覽器的裝置模式。試想一下，如果我們每在Visual studio工具上開發完一個功能又得跑到手機上除錯，那得多煩，開發效率多低呀。想想就知道為什麼那麼多人喜歡用chrome瀏覽器。
6.裝置感測模擬
裝置模式的另一個很酷的功能是模擬移動裝置的感測器，例如觸控螢幕和加速計。你甚至可以惡搞你的地理位置。這個功能位於元素標籤的底部，點選“show drawer”按鈕，就可看見Emulation --> Sensors.
7.格式化凌亂的js原始碼
有時候看到壓縮好的一團糟的js，都不知道從何著手去看。chrome控制檯有內建的美化程式碼功能，可以返回一段最小化且格式易讀的程式碼。Pretty Print的按鈕在Sources標籤的左下角。
8.顏色選擇器
當在樣式編輯中選擇了一個顏色屬性時，你可以點選顏色預覽，就會彈出一個顏色選擇器。當選擇器開啟時，如果你停留在頁面，滑鼠指標會變成一個放大鏡，讓你去選擇畫素精度的顏色。
9.改變顏色格式
相信前端開發人員都知道，顏色有很多種表示方式，比如rgb,hsl,十六進位制表示方法等。看了下面的這個圖，我相信你肯定會佩服chrome的功能強大，連細節都做得那麼好。
在顏色預覽功能使用快捷鍵Shift + Click，可以在rgba、hsl和hexadecimal來回切換顏色的格式
10.強制改變元素狀態
chrome控制檯有一個可以模擬CSS狀態的功能，例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能檢視不同狀態下元素的樣式，我相信這個功能對於模仿別人介面的前端愛好者來說是非常實用的。
11.檢視和編輯本地檔案
事實上我們可以用chrome來檢視本地檔案，只要把相關目錄拖到chrome瀏覽器中即可。
12.選擇下一個匹配項
當在Sources標籤下編輯檔案時，按下Ctrl + D (Cmd + D) ，當前選中的單詞的下一個匹配也會被選中，有利於你同時對它們進行編輯。
13.視覺化的DOM陰影
eb瀏覽器在構建如文字框、按鈕和輸入框一類元素時，其它基本元素的檢視是隱藏的。不過，你可以在Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標籤頁中顯示被隱藏的程式碼。甚至還能單獨設計他們的樣式，這給你了很大的控制權。
這點特性在我的另一篇博文中有提到,當時遇到問題時找了半天才發現原因，如果早點能知道chrome的這個特性，我相信必定會節省不少時間。
原文連結： www.cnblogs.com/liyunhua/p/…
閱讀更多
如果你有什麼問題，歡迎隨時來聊我！