原文鏈接：http://www.cnblogs.com/liyunhua/p/4544738.html

寫在前面

之前有看過劉哇勇寫的Chrome 控制臺不完全指南,讓我覺得瞬間對chrome的了解實(shí)在太淺了。對此特意了解了一番（也就是在他的博文上進(jìn)行了一些總結(jié)和了解一些其它c(diǎn)hrome使用方面的訣竅），寫了兩篇博文

你可能不知道console強(qiáng)大

我所了解的chrome

最近又學(xué)到了一些chrome的使用技巧，在此分享一下，我只是覺得工欲善其事，必先利其器。chrome在我心里就是神。

我只是很用心的寫一下這篇文章，希望這些使用技巧對大家有用。

快速切換文件

我一般如果查找每個(gè)文件，一般都是打開控制臺，在source控制面板里面一個(gè)一個(gè)去找，看下面的圖你就應(yīng)該知道，這么多文件，你都不知道在哪個(gè)目錄下面，然后就只能一個(gè)一個(gè)點(diǎn)開看

后來才發(fā)現(xiàn)原來按Ctrl+P（cmd+p on mac）,就能快速搜尋和打開你項(xiàng)目的文件。

在源代碼中搜索

大家都知道如果在要在Elements查看源碼，只要定位到Elements面板，然后按ctrl+f就可以了

可是如果你希望在源代碼中搜索要怎么辦呢？在頁面已經(jīng)加載的文件中搜尋一個(gè)特定的字符串，快捷鍵是Ctrl + Shift + F (Cmd + Opt + F)，這種搜尋方式還支持正則表達(dá)式哦

在源代碼中快速跳轉(zhuǎn)到指定的行

大家都知道在VS里，一個(gè)cs文件可能特別多行，然后我們就是使用ctrl+g快捷鍵來跳轉(zhuǎn)到特定的行，事實(shí)上在chrome控制臺也是一樣的，在Sources標(biāo)簽中打開一個(gè)文件之后，按Ctrl + G，(or Cmd + L for Mac)，然后輸入行號，chrome控制臺就會跳轉(zhuǎn)到你輸入的行號所在的行。

使用多個(gè)插入符進(jìn)行選擇

當(dāng)編輯一個(gè)文件的時(shí)候，你可以按住Ctrl在你要編輯的地方點(diǎn)擊鼠標(biāo)，可以設(shè)置多個(gè)插入符，這樣可以一次在多個(gè)地方編輯

設(shè)備模式

最近做用H5做攜程商旅APP，用的最多的就是chrome瀏覽器的設(shè)備模式。試想一下，如果我們每在Visual studio工具上開發(fā)完一個(gè)功能又得跑到手機(jī)上調(diào)試，那得多煩，開發(fā)效率多低呀。想想就知道為什么那么多人喜歡用chrome瀏覽器。

設(shè)備傳感仿真

設(shè)備模式的另一個(gè)很酷的功能是模擬移動設(shè)備的傳感器，例如觸摸屏幕和加速計(jì)。你甚至可以惡搞你的地理位置。這個(gè)功能位于元素標(biāo)簽的底部，點(diǎn)擊“show drawer”按鈕，就可看見Emulation –> Sensors.

格式化凌亂的js源碼

有時(shí)候看到壓縮好的一團(tuán)糟的js，都不知道從何著手去看。chrome控制臺有內(nèi)建的美化代碼功能，可以返回一段最小化且格式易讀的代碼。Pretty Print的按鈕在Sources標(biāo)簽的左下角。

顏色選擇器

當(dāng)在樣式編輯中選擇了一個(gè)顏色屬性時(shí)，你可以點(diǎn)擊顏色預(yù)覽，就會彈出一個(gè)顏色選擇器。當(dāng)選擇器開啟時(shí)，如果你停留在頁面，鼠標(biāo)指針會變成一個(gè)放大鏡，讓你去選擇像素精度的顏色。

改變顏色格式

相信前端開發(fā)人員都知道，顏色有很多種表示方式，比如rgb,hsl,十六進(jìn)制表示方法等。看了下面的這個(gè)圖，我相信你肯定會佩服chrome的功能強(qiáng)大，連細(xì)節(jié)都做得那么好。

在顏色預(yù)覽功能使用快捷鍵Shift + Click，可以在rgba、hsl和hexadecimal來回切換顏色的格式

強(qiáng)制改變元素狀態(tài)（方便查看不同狀態(tài)下元素的樣式）

chrome控制臺有一個(gè)可以模擬CSS狀態(tài)的功能，例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個(gè)功能查看不同狀態(tài)下元素的樣式，我相信這個(gè)功能對于模仿別人界面的前端愛好者來說是非常實(shí)用的。

利用chrome來查看和編輯本地文件

事實(shí)上我們可以用chrome來查看本地文件，只要把相關(guān)目錄拖到chrome瀏覽器中即可。

選擇下一個(gè)匹配項(xiàng)

當(dāng)在Sources標(biāo)簽下編輯文件時(shí)，按下Ctrl + D (Cmd + D) ，當(dāng)前選中的單詞的下一個(gè)匹配也會被選中，有利于你同時(shí)對它們進(jìn)行編輯。

可視化的DOM陰影

eb瀏覽器在構(gòu)建如文本框、按鈕和輸入框一類元素時(shí)，其它基本元素的視圖是隱藏的。不過，你可以在Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標(biāo)簽頁中顯示被隱藏的代碼。甚至還能單獨(dú)設(shè)計(jì)他們的樣式，這給你了很大的控制權(quán)。

這點(diǎn)特性在我的另一篇博文中有提到,當(dāng)時(shí)遇到問題時(shí)找了半天才發(fā)現(xiàn)原因，如果早點(diǎn)能知道chrome的這個(gè)特性，我相信必定會節(jié)省不少時(shí)間。

用css3實(shí)現(xiàn)各種圖標(biāo)效果（2）

總結(jié)

以上是生活随笔為你收集整理的chrome使用技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。