簡單說 chrome 瀏覽器必知必會的小技巧

發表於2017-11-29

說明

這篇文章主要介紹的就是一些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、調色盤切換器。