- 寫在前面
- 快速切換檔案
- 在源代碼中搜尋
- 在源代碼中快速跳轉到指定的行
- 使用多個插入符進行選擇
- 裝置模式
- 裝置傳感仿真
- 格式化淩亂的js源碼
- 顔色選擇器
- 改變顔色格式
- 強制改變元素狀态（友善檢視不同狀态下元素的樣式）
- 利用chrome來檢視和編輯本地檔案
- 選擇下一個比對項
- 可視化的DOM陰影
回到頂部
寫在前面
之前有看過劉哇勇寫的Chrome 控制台不完全指南,讓我覺得瞬間對chrome的了解實在太淺了。對此特意了解了一番（也就是在他的博文上進行了一些總結和了解一些其它chrome使用方面的訣竅），寫了兩篇博文
你可能不知道console強大
我所了解的chrome
最近又學到了一些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”按鈕，就可看見
Emulation --> Sensors
.
回到頂部
格式化淩亂的js源碼
有時候看到壓縮好的一團糟的js，都不知道從何着手去看。chrome控制台有内建的美化代碼功能，可以傳回一段最小化且格式易讀的代碼。Pretty Print的按鈕在Sources标簽的左下角。
回到頂部
顔色選擇器
當在樣式編輯中選擇了一個顔色屬性時，你可以點選顔色預覽，就會彈出一個顔色選擇器。當選擇器開啟時，如果你停留在頁面，滑鼠指針會變成一個放大鏡，讓你去選擇像素精度的顔色。
回到頂部
改變顔色格式
相信前端開發人員都知道，顔色有很多種表示方式，比如rgb,hsl,十六進制表示方法等。看了下面的這個圖，我相信你肯定會佩服chrome的功能強大，連細節都做得那麼好。
在顔色預覽功能使用快捷鍵Shift + Click，可以在rgba、hsl和hexadecimal來回切換顔色的格式
回到頂部
強制改變元素狀态（友善檢視不同狀态下元素的樣式）
chrome控制台有一個可以模拟CSS狀态的功能，例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能檢視不同狀态下元素的樣式，我相信這個功能對于模仿别人界面的前端愛好者來說是非常實用的。
回到頂部
利用chrome來檢視和編輯本地檔案
事實上我們可以用chrome來檢視本地檔案，隻要把相關目錄拖到chrome浏覽器中即可。
回到頂部
選擇下一個比對項
當在Sources标簽下編輯檔案時，按下Ctrl + D (Cmd + D) ，目前選中的單詞的下一個比對也會被選中，有利于你同時對它們進行編輯。
回到頂部
可視化的DOM陰影
eb浏覽器在建構如文本框、按鈕和輸入框一類元素時，其它基本元素的視圖是隐藏的。不過，你可以在
Settings -> General
中切換成
Show user agent shadow DOM
，這樣就會在元素标簽頁中顯示被隐藏的代碼。甚至還能單獨設計他們的樣式，這給你了很大的控制權。
這點特性在我的另一篇博文中有提到,當時遇到問題時找了半天才發現原因，如果早點能知道chrome的這個特性，我相信必定會節省不少時間。
用css3實作各種圖示效果（2）