說明

這篇文章主要介紹的就是一些chrome瀏覽器的小技巧，很簡單，希望對大家有所幫助。

這其中的一些小技巧在低版本中是沒有的，所以建議大家用***版的，目前***版是62，版本很重要，如果發(fā)現(xiàn)有些技巧不起作用，請先查看瀏覽器的版本。

快捷鍵

快捷鍵比較多，這里挑出幾個(gè)常用的說一下

***會給出一張比較完整的快捷鍵的表

下列快捷鍵可以在所有 開發(fā)者工具 面板中可以使用

全局快捷鍵	window	Mac
打開 開發(fā)者工具	F12、Ctrl+Shift+I	Cmd+Opt+I
打開 開發(fā)者工具 并聚焦到控制臺	Ctrl+Shift+J	Cmd+Shift+C
刷新頁面	F5、Ctrl+R	Cmd+R
刷新忽略緩存內(nèi)容的頁面	Ctrl+F5、Ctrl+Shift+R	Cmd+Shift+R

在Elements 面板中使用的快捷鍵

Elements 面板	window	Mac
編輯屬性	Enter、雙擊屬性	Enter、雙擊屬性
隱藏元素	H	H
切換為以HTML形式編輯	F2

在Styles 邊欄中使用的快捷鍵

Styles 邊欄	window	Mac
轉(zhuǎn)到源中屬性值聲明行	Ctrl+點(diǎn)擊屬性值	CMd+點(diǎn)擊屬性值
在顏色定義值之間循環(huán)	Shift+點(diǎn)擊顏色選取器框	Shift+點(diǎn)擊顏色選取器框
編輯下一個(gè)/上一個(gè)屬性	Tab、Tab+Shift	Tab、Tab+Shift

在控制臺中使用的快捷鍵

控制臺	window	Mac
聚焦到控制臺	Ctrl+	Ctrl+
清除控制臺	Ctrl+L	Cmd+K、Opt+L
多行輸入	Shift+Enter	Ctrl+Return

區(qū)域截屏

選取頁面中的一部分，保存為圖片

1、打開開發(fā)者工具

使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)

 

2、選擇左上角的元素選擇按鈕，圖標(biāo)顏色變?yōu)樗{(lán)色即表示選中了

3、Windows 下按住 Ctrl，Mac 就按住 Command，然后點(diǎn)擊鼠標(biāo)左鍵在頁面選擇區(qū)域即可，松開鼠標(biāo)后，截圖自動下載。

4、圖片自動下載好后，點(diǎn)擊圖片后面的箭頭，可以在文件夾中顯示

節(jié)點(diǎn)截圖

選中頁面中某一元素，保存為圖片

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，也會出來這個(gè)選項(xiàng)，然后點(diǎn)擊這個(gè)選項(xiàng)，圖片會自動下載。

5、圖片自動下載好后，點(diǎn)擊圖片后面的箭頭，可以在文件夾中顯示

截全屏

保存完整網(wǎng)頁為圖片

***種方式

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，也會出來這個(gè)選項(xiàng)

4、圖片自動下載好后，點(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，圖片會自動下載

拾色器

在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ī)則上，右下方都會有三個(gè)小點(diǎn)

2、鼠標(biāo)放在這三個(gè)小點(diǎn)上，會出現(xiàn)5個(gè)小圖標(biāo)，每個(gè)小圖標(biāo)都有作用

3、他們從左到右分別代表

• 添加 text-shadow
• 添加 box-shadow
• 添加 color
• 添加 background-color
• 插入樣式規(guī)則

增加移動設(shè)備

1、打開開發(fā)者工具

使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)

2、點(diǎn)擊右上方的三個(gè)小點(diǎn)，然后選擇Settings

3、選擇Devices，然后在需要添加的設(shè)備前面打上勾就可以了

總結(jié)

 

這些小技巧，很簡單，希望對大家有所幫助，不過對于有辦法，有時(shí)間的朋友還是建議去官網(wǎng)看看吧，畢竟那里才更加全面。