原文位址： http://www.cnblogs.com/liyunhua/p/4544738.html
閱讀目錄
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label0">寫在前面</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label1">快速切換檔案</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label2">在源代碼中搜尋</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label3">在源代碼中快速跳轉到指定的行</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label4">使用多個插入符進行選擇</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label5">裝置模式</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label6">裝置傳感仿真</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label7">格式化淩亂的js源碼</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label8">顔色選擇器</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label9">改變顔色格式</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label10">強制改變元素狀态（友善檢視不同狀态下元素的樣式）</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label11">利用chrome來檢視和編輯本地檔案</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label12">選擇下一個比對項</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label13">可視化的DOM陰影</a>
<a href="http://www.cnblogs.com/liyunhua/p/4544738.html#_label14">如果您覺得本篇博文對您有所收獲，覺得小女子還算用心，請點選右下角的 [推薦]，謝謝！</a>
<a href="http://www.cnblogs.com/liyunhua/p/4529079.html" target="_blank">你可能不知道console強大</a>
<a href="http://www.cnblogs.com/liyunhua/p/4531964.html" target="_blank">我所了解的chrome</a>
最近又學到了一些chrome的使用技巧，在此分享一下，大家不要說我是抄襲，我隻是覺得工欲善其事，必先利其器。chrome在我心裡就是神。
我隻是很用心的寫一下這篇文章，希望這些使用技巧對大家有用。
我一般如果查找每個檔案，一般都是打開控制台，在source控制台裡面一個一個去找，看下面的圖你就應該知道，這麼多檔案，你都不知道在哪個目錄下面，然後就隻能一個一個點開看
後來才發現原來按Ctrl+P（cmd+p on mac）,就能快速搜尋和打開你項目的檔案。
大家都知道如果在要在Elements檢視源碼，隻要定位到Elements面闆，然後按ctrl+f就可以了
可是如果你希望在源代碼中搜尋要怎麼辦呢？在頁面已經加載的檔案中搜尋一個特定的字元串，快捷鍵是Ctrl + Shift + F (Cmd + Opt + F)，這種搜尋方式還支援正規表達式哦
大家都知道在VS裡，一個cs檔案可能特别多行，然後我們就是使用ctrl+g快捷鍵來跳轉到特定的行，事實上在chrome控制台也是一樣的，在Sources标簽中打開一個檔案之後，按Ctrl + G，(or Cmd + L for Mac)，然後輸入行号，chrome控制台就會跳轉到你輸入的行号所在的行。
當編輯一個檔案的時候，你可以按住Ctrl在你要編輯的地方點選滑鼠，可以設定多個插入符，這樣可以一次在多個地方編輯
最近做用H5做攜程商旅APP，用的最多的就是chrome浏覽器的裝置模式。試想一下，如果我們每在Visual studio工具上開發完一個功能又得跑到手機上調試，那得多煩，開發效率多低呀。想想就知道為什麼那麼多人喜歡用chrome浏覽器。
裝置模式的另一個很酷的功能是模拟移動裝置的傳感器，例如觸摸螢幕和加速計。你甚至可以惡搞你的地理位置。這個功能位于元素标簽的底部，點選“show drawer”按鈕，就可看見<code>Emulation --> Sensors</code>.
當在樣式編輯中選擇了一個顔色屬性時，你可以點選顔色預覽，就會彈出一個顔色選擇器。當選擇器開啟時，如果你停留在頁面，滑鼠指針會變成一個放大鏡，讓你去選擇像素精度的顔色。
相信前端開發人員都知道，顔色有很多種表示方式，比如rgb,hsl,十六進制表示方法等。看了下面的這個圖，我相信你肯定會佩服chrome的功能強大，連細節都做得那麼好。
在顔色預覽功能使用快捷鍵Shift + Click，可以在rgba、hsl和hexadecimal來回切換顔色的格式
chrome控制台有一個可以模拟CSS狀态的功能，例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能檢視不同狀态下元素的樣式，我相信這個功能對于模仿别人界面的前端愛好者來說是非常實用的。
事實上我們可以用chrome來檢視本地檔案，隻要把相關目錄拖到chrome浏覽器中即可。
這點特性在我的另一篇博文中有提到,當時遇到問題時找了半天才發現原因，如果早點能知道chrome的這個特性，我相信必定會節省不少時間。
<a href="http://www.cnblogs.com/liyunhua/p/4536291.html" target="_blank">用css3實作各種圖示效果（2）</a>