新聞資訊  快訊  焦點  財經  政策  社會
互 聯 網   電商  金融  數據  計算  技巧
生活百科  科技  職場  健康  法律  汽車
手機百科  知識  軟件  修理  測評  微信
軟件技術  應用  系統  圖像  視頻  經驗
硬件技術  知識  技術  測評  選購  維修
網絡技術  硬件  軟件  設置  安全  技術
程序開發  語言  移動  數據  開源  百科
安全防護  資訊  黑客  木馬  病毒  移動
站長技術  搜索  SEO  推廣  媒體  移動
財經百科  股票  知識  理財  財務  金融
教育考試  育兒  小學  高考  考研  留學
您當前的位置:首頁 > 互聯網 > 互聯網百科

Chrome瀏覽器實用小技巧

時間:2019-06-06 13:59:49  來源:  作者:

說明

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

這其中的一些小技巧在低版本中是沒有的,所以建議大家用最新版的,目前最新版是62,版本很重要,如果發現有些技巧不起作用,請先查看瀏覽器的版本。

快捷鍵

快捷鍵比較多,這里挑出幾個常用的說一下

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

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

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

在Elements 面板中使用的快捷鍵

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

在Styles 邊欄中使用的快捷鍵

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

在控制臺中使用的快捷鍵

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

區域截屏

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

1、打開開發者工具

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

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

2、選擇左上角的元素選擇按鈕,圖標顏色變為藍色即表示選中了

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

3、Windows 下按住 Ctrl,Mac 就按住 Command,然后點擊鼠標左鍵在頁面選擇區域即可,松開鼠標后,截圖自動下載。

4、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

節點截圖

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

1、打開開發者工具

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

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

2、選中任意元素節點

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

3、打開命令工具

使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

4、點擊Capture node screenshot,或者輸入這行中任意的關鍵字,比如輸入node,也會出來這個選項,然后點擊這個選項,圖片會自動下載。

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

5、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

截全屏

保存完整網頁為圖片

第一種方式

1、打開開發者工具

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

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

2、打開命令工具

使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

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

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

4、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

第二種方式

1、打開開發者工具

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

2、選中 切換開發模式按鈕,圖標顏色變為藍色即表示選中了

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

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

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

拾色器

在Styles邊欄 點擊任意顏色的小色塊,就可以彈出顏色選擇器

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

1、顏色選擇區域。

2、吸管。

3、復制到剪貼板。將顯示值復制到剪貼板。

4、顯示值。顏色的RGBA,HSLA或十六進制表示。

5、調色板。單擊其中一個方塊將顏色更改為該方塊。

6、色相。

7、透明度。

8、顯示值切換器。在當前顏色的RGBA,HSLA和Hex表示之間切換。

9、調色板切換器。

快速添加樣式規則

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

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

2、鼠標放在這三個小點上,會出現5個小圖標,每個小圖標都有作用

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

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

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

 

增加移動設備

1、打開開發者工具

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

2、點擊右上方的三個小點,然后選擇Settings

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

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

Chrome瀏覽器這么多實用的小技巧,你用過幾個?

 

 

總結

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

來源:FEWY
 



Tags:Chrome   點擊:()  評論:()
聲明:本站部分內容來自互聯網,如有任何版權侵犯或其他問題請與我們聯系,我們將立即刪除或處理。
▌相關評論
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
▌相關推薦
說明這篇文章主要介紹的就是一些chrome瀏覽器的小技巧,很簡單,希望對大家有所幫助。這其中的一些小技巧在低版本中是沒有的,所以建議大家用最新版的,目前最新版是62,版本很重要,如...【詳細內容】
2019-06-06   Chrome  點擊:(12)  評論:(0)  加入收藏
推薦資訊
相關文章
    無相關信息
欄目更新
欄目熱門
31选7开奖11185