?姓名：丁英琦
?學(xué)號(hào)：17101223408
?轉(zhuǎn)載自：http://blog.csdn.net/FE_dev/article/details/78623204?locationNum=7&fps=1 有改動(dòng)
【嵌牛導(dǎo)讀】這篇文章主要介紹的就是一些chrome瀏覽器的小技巧，很簡(jiǎn)單，希望對(duì)大家有所幫助。
【嵌牛鼻子】chrome瀏覽器的小技巧
【嵌牛提問(wèn)】chrome瀏覽器的小技巧你知道多少？
【嵌牛正文】
快捷鍵
快捷鍵比較多，這里挑出幾個(gè)常用的說(shuō)一下
最后會(huì)給出一張比較完整的快捷鍵的表
下列快捷鍵可以在所有 開發(fā)者工具 面板中可以使用
全局快捷鍵windowMac
打開 開發(fā)者工具F12、Ctrl+Shift+ICmd+Opt+I
打開 開發(fā)者工具 并聚焦到控制臺(tái)Ctrl+Shift+JCmd+Shift+C
刷新頁(yè)面F5、Ctrl+RCmd+R
刷新忽略緩存內(nèi)容的頁(yè)面Ctrl+F5、Ctrl+Shift+RCmd+Shift+R
在Elements 面板中使用的快捷鍵
Elements 面板windowMac
編輯屬性Enter、雙擊屬性Enter、雙擊屬性
隱藏元素HH
切換為以HTML形式編輯F2
在Styles 邊欄中使用的快捷鍵
Styles 邊欄windowMac
轉(zhuǎn)到源中屬性值聲明行Ctrl+點(diǎn)擊屬性值CMd+點(diǎn)擊屬性值
在顏色定義值之間循環(huán)Shift+點(diǎn)擊顏色選取器框Shift+點(diǎn)擊顏色選取器框
編輯下一個(gè)/上一個(gè)屬性Tab、Tab+ShiftTab、Tab+Shift
在控制臺(tái)中使用的快捷鍵
控制臺(tái)windowMac
聚焦到控制臺(tái)Ctrl+Ctrl+
清除控制臺(tái)Ctrl+LCmd+K、Opt+L
多行輸入Shift+EnterCtrl+Return
區(qū)域截屏
選取頁(yè)面中的一部分，保存為圖片
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選擇左上角的元素選擇按鈕，圖標(biāo)顏色變?yōu)樗{(lán)色即表示選中了
3、Windows 下按住 Ctrl，Mac 就按住 Command，然后點(diǎn)擊鼠標(biāo)左鍵在頁(yè)面選擇區(qū)域即可，松開鼠標(biāo)后，截圖自動(dòng)下載。
4、圖片自動(dòng)下載好后，點(diǎn)擊圖片后面的箭頭，可以在文件夾中顯示
節(jié)點(diǎn)截圖
選中頁(yè)面中某一元素，保存為圖片
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選中任意元素節(jié)點(diǎn)
3、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
4、點(diǎn)擊Capture node screenshot，或者輸入這行中任意的關(guān)鍵字，比如輸入node，也會(huì)出來(lái)這個(gè)選項(xiàng)，然后點(diǎn)擊這個(gè)選項(xiàng)，圖片會(huì)自動(dòng)下載。
5、圖片自動(dòng)下載好后，點(diǎn)擊圖片后面的箭頭，可以在文件夾中顯示
截全屏
保存完整網(wǎng)頁(yè)為圖片
第一種方式
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
3、點(diǎn)擊Capture full size screenshot，或者輸入這行中任意的關(guān)鍵字，比如輸入full，也會(huì)出來(lái)這個(gè)選項(xiàng)
4、圖片自動(dòng)下載好后，點(diǎn)擊圖片后面的箭頭，可以在文件夾中顯示
第二種方式
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選中 切換開發(fā)模式按鈕，圖標(biāo)顏色變?yōu)樗{(lán)色即表示選中了
3、點(diǎn)右上方的三個(gè) 小點(diǎn)，點(diǎn)擊Capture full size screenshot，圖片會(huì)自動(dòng)下載
拾色器
在Styles邊欄 點(diǎn)擊任意顏色的小色塊，就可以彈出顏色選擇器
1、顏色選擇區(qū)域。
2、吸管。
3、復(fù)制到剪貼板。將顯示值復(fù)制到剪貼板。
4、顯示值。顏色的RGBA，HSLA或十六進(jìn)制表示。
5、調(diào)色板。單擊其中一個(gè)方塊將顏色更改為該方塊。
6、色相。
7、透明度。
8、顯示值切換器。在當(dāng)前顏色的RGBA，HSLA和Hex表示之間切換。
9、調(diào)色板切換器。
快速添加樣式規(guī)則
1、在Styles 邊欄，鼠標(biāo)放在每一小塊樣式規(guī)則上，右下方都會(huì)有三個(gè)小點(diǎn)
2、鼠標(biāo)放在這三個(gè)小點(diǎn)上，會(huì)出現(xiàn)5個(gè)小圖標(biāo)，每個(gè)小圖標(biāo)都有作用
3、他們從左到右分別代表
添加 text-shadow
添加 box-shadow
添加 color
添加 background-color
插入樣式規(guī)則
增加移動(dòng)設(shè)備
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、點(diǎn)擊右上方的三個(gè)小點(diǎn)，然后選擇Settings
3、選擇Devices，然后在需要添加的設(shè)備前面打上勾就可以了
總結(jié)
這些小技巧，很簡(jiǎn)單，希望對(duì)大家有所幫助，不過(guò)對(duì)于有辦法，有時(shí)間的朋友還是建議去官網(wǎng)看看吧，畢竟那里才更加全面。
