Chrome瀏覽器必知必會的小技巧
說明
這篇文章主要介紹的就是一些chrome瀏覽器的小技巧，很簡單，希望對大家有所幫助。
這其中的一些小技巧在低版本中是沒有的，所以建議大家用***版的，目前***版是62，版本很重要，如果發現有些技巧不起作用，請先查看瀏覽器的版本。
快捷鍵
快捷鍵比較多，這里挑出幾個常用的說一下
***會給出一張比較完整的快捷鍵的表
下列快捷鍵可以在所有 開發者工具 面板中可以使用
| 全局快捷鍵 | window | Mac |
|---|---|---|
| 打開 開發者工具 | F12、Ctrl+Shift+I | Cmd+Opt+I |
| 打開 開發者工具 并聚焦到控制臺 | Ctrl+Shift+J | Cmd+Shift+C |
| 刷新頁面 | F5、Ctrl+R | Cmd+R |
| 刷新忽略緩存內容的頁面 | Ctrl+F5、Ctrl+Shift+R | Cmd+Shift+R |
在Elements 面板中使用的快捷鍵
| Elements 面板 | window | Mac |
|---|---|---|
| 編輯屬性 | Enter、雙擊屬性 | Enter、雙擊屬性 |
| 隱藏元素 | H | H |
| 切換為以HTML形式編輯 | F2 | |
在Styles 邊欄中使用的快捷鍵
| Styles 邊欄 | window | Mac |
|---|---|---|
| 轉到源中屬性值聲明行 | Ctrl+點擊屬性值 | CMd+點擊屬性值 |
| 在顏色定義值之間循環 | Shift+點擊顏色選取器框 | Shift+點擊顏色選取器框 |
| 編輯下一個/上一個屬性 | Tab、Tab+Shift | Tab、Tab+Shift |
在控制臺中使用的快捷鍵
| 控制臺 | window | Mac |
|---|---|---|
| 聚焦到控制臺 | Ctrl+ | Ctrl+ |
| 清除控制臺 | Ctrl+L | Cmd+K、Opt+L |
| 多行輸入 | Shift+Enter | Ctrl+Return |
區域截屏
選取頁面中的一部分，保存為圖片
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選擇左上角的元素選擇按鈕，圖標顏色變為藍色即表示選中了
3、Windows 下按住 Ctrl，Mac 就按住 Command，然后點擊鼠標左鍵在頁面選擇區域即可，松開鼠標后，截圖自動下載。
4、圖片自動下載好后，點擊圖片后面的箭頭，可以在文件夾中顯示
節點截圖
選中頁面中某一元素，保存為圖片
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選中任意元素節點
3、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
4、點擊Capture node screenshot，或者輸入這行中任意的關鍵字，比如輸入node，也會出來這個選項，然后點擊這個選項，圖片會自動下載。
5、圖片自動下載好后，點擊圖片后面的箭頭，可以在文件夾中顯示
截全屏
保存完整網頁為圖片
***種方式
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
3、點擊Capture full size screenshot，或者輸入這行中任意的關鍵字，比如輸入full，也會出來這個選項
4、圖片自動下載好后，點擊圖片后面的箭頭，可以在文件夾中顯示
第二種方式
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選中 切換開發模式按鈕，圖標顏色變為藍色即表示選中了
3、點右上方的三個 小點，點擊Capture full size screenshot，圖片會自動下載
拾色器
在Styles邊欄 點擊任意顏色的小色塊，就可以彈出顏色選擇器
1、顏色選擇區域。
2、吸管。
3、復制到剪貼板。將顯示值復制到剪貼板。
4、顯示值。顏色的RGBA，HSLA或十六進制表示。
5、調色板。單擊其中一個方塊將顏色更改為該方塊。
6、色相。
7、透明度。
8、顯示值切換器。在當前顏色的RGBA，HSLA和Hex表示之間切換。
9、調色板切換器。
快速添加樣式規則
1、在Styles 邊欄，鼠標放在每一小塊樣式規則上，右下方都會有三個小點
2、鼠標放在這三個小點上，會出現5個小圖標，每個小圖標都有作用
3、他們從左到右分別代表
- 添加 text-shadow
- 添加 box-shadow
- 添加 color
- 添加 background-color
- 插入樣式規則
增加移動設備
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、點擊右上方的三個小點，然后選擇Settings
3、選擇Devices，然后在需要添加的設備前面打上勾就可以了
總結
這些小技巧，很簡單，希望對大家有所幫助，不過對于有辦法，有時間的朋友還是建議去官網看看吧，畢竟那里才更加全面。
