chrome使用技巧（看了定不讓你失望）

寫在前面

以前有看過劉哇勇寫的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）