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

說明

這篇文章主要介紹的就是一些chrome瀏覽器的小技巧，很簡單，但願對你們有所幫助。
這其中的一些小技巧在低版本中是沒有的，因此建議你們用最新版的，目前最新版是62，版本很重要，若是發現有些技巧不起做用，請先查看瀏覽器的版本。

快捷鍵

快捷鍵比較多，這裏挑出幾個經常使用的說一下
最後會給出一張比較完整的快捷鍵的表

下列快捷鍵能夠在全部 開發者工具 面板中使用

全局快捷鍵	window	Mac
打開 開發者工具	F十二、Ctrl+Shift+I	Cmd+Opt+I
打開 開發者工具 並聚焦到控制檯	Ctrl+Shift+J	Cmd+Shift+C
刷新頁面	F五、Ctrl+R	Cmd+R
刷新忽略緩存內容的頁面	Ctrl+F五、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

區域截屏

選取頁面中的一部分，保存爲圖片
一、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)

二、選擇左上角的元素選擇按鈕，圖標顏色變爲藍色即表示選中了

三、Windows 下按住 Ctrl，Mac 就按住 Command，而後點擊鼠標左鍵在頁面選擇區域便可，鬆開鼠標後，截圖自動下載。

四、圖片自動下載好後，點擊圖片後面的箭頭，能夠在文件夾中顯示

節點截圖

選中頁面中某一元素，保存爲圖片
一、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)

二、選中任意元素節點

三、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

四、點擊Capture node screenshot，或者輸入這行中任意的關鍵字，好比輸入node，也會出來這個選項，而後點擊這個選項，圖片會自動下載。

五、圖片自動下載好後，點擊圖片後面的箭頭，能夠在文件夾中顯示

截全屏

保存完整網頁爲圖片
第一種方式
一、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)

二、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

三、點擊Capture full size screenshot，或者輸入這行中任意的關鍵字，好比輸入full，也會出來這個選項

四、圖片自動下載好後，點擊圖片後面的箭頭，能夠在文件夾中顯示

第二種方式
一、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)

二、選中 切換開發模式按鈕，圖標顏色變爲藍色即表示選中了

三、點右上方的三個 小點，點擊Capture full size screenshot，圖片會自動下載

拾色器

在Styles邊欄 點擊任意顏色的小色塊，就能夠彈出顏色選擇器

一、顏色選擇區域。
二、吸管。
三、複製到剪貼板。將顯示值複製到剪貼板。
四、顯示值。顏色的RGBA，HSLA或十六進制表示。
五、調色板。單擊其中一個方塊將顏色更改成該方塊。
六、色相。
七、透明度。
八、顯示值切換器。在當前顏色的RGBA，HSLA和Hex表示之間切換。
九、調色板切換器。

快速添加樣式規則

一、在Styles 邊欄，鼠標放在每一小塊樣式規則上，右下方都會有三個小點

二、鼠標放在這三個小點上，會出現5個小圖標，每一個小圖標都有做用

三、他們從左到右分別表明

• 添加 text-shadow
• 添加 box-shadow
• 添加 color
• 添加 background-color
• 插入樣式規則

增長移動設備

一、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)

二、點擊右上方的三個小點，而後選擇Settings

三、選擇Devices，而後在須要添加的設備前面打上勾就能夠了

總結

這些小技巧，很簡單，但願對你們有所幫助，不過對於有辦法，有時間的朋友仍是建議去官網看看吧，畢竟那裏才更加全面。
Chrome 開發者工具

點擊查看原圖