閱讀目錄

• 寫在前面
• 快速切換文件
• 在源代碼中搜索
• 在源代碼中快速跳轉到指定的行
• 使用多個插入符進行選擇
• 設備模式
• 設備傳感仿真
• 格式化淩亂的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）

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