chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

說明這篇文章主要介紹的就是一些chrome瀏覽器的小技巧,很簡單,希望對大家有所幫助 。
這其中的一些小技巧在低版本中是沒有的,所以建議大家用最新版的,目前最新版是62,版本很重要,如果發現有些技巧不起作用,請先查看瀏覽器的版本 。
快捷鍵快捷鍵比較多,這里挑出幾個常用的說一下
最后會給出一張比較完整的快捷鍵的表
下列快捷鍵可以在所有 開發者工具 面板中可以使用

chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
在Elements 面板中使用的快捷鍵
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
在Styles 邊欄中使用的快捷鍵
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
在控制臺中使用的快捷鍵
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
區域截屏選取頁面中的一部分,保存為圖片
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
2、選擇左上角的元素選擇按鈕,圖標顏色變為藍色即表示選中了
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
3、Windows 下按住 Ctrl , Mac 就按住 Command,然后點擊鼠標左鍵在頁面選擇區域即可,松開鼠標后,截圖自動下載 。
4、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
節點截圖選中頁面中某一元素,保存為圖片
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
2、選中任意元素節點
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
3、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
4、點擊Capture node screenshot,或者輸入這行中任意的關鍵字,比如輸入node , 也會出來這個選項,然后點擊這個選項,圖片會自動下載 。
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
5、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
截全屏保存完整網頁為圖片
第一種方式
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
2、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
3、點擊Capture full size screenshot,或者輸入這行中任意的關鍵字,比如輸入full,也會出來這個選項
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
4、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
第二種方式
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選中 切換開發模式按鈕 , 圖標顏色變為藍色即表示選中了
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
3、點右上方的三個 小點,點擊Capture full size screenshot,圖片會自動下載
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
拾色器
在Styles邊欄 點擊任意顏色的小色塊,就可以彈出顏色選擇器
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖

chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
1、顏色選擇區域 。
2、吸管 。
3、復制到剪貼板 。將顯示值復制到剪貼板 。
4、顯示值 。顏色的RGBA,HSLA或十六進制表示 。
5、調色板 。單擊其中一個方塊將顏色更改為該方塊 。
6、色相 。
7、透明度 。
8、顯示值切換器 。在當前顏色的RGBA,HSLA和Hex表示之間切換 。
9、調色板切換器 。
快速添加樣式規則
1、在Styles 邊欄,鼠標放在每一小塊樣式規則上,右下方都會有三個小點
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
2、鼠標放在這三個小點上,會出現5個小圖標 , 每個小圖標都有作用
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
3、他們從左到右分別代表
  • 添加 text-shadow
  • 添加 box-shadow
  • 添加 color
  • 添加 background-color
  • 插入樣式規則
增加移動設備
1、打開開發者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、點擊右上方的三個小點 , 然后選擇Settings
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
3、選擇Devices,然后在需要添加的設備前面打上勾就可以了
chrome滾動截長圖的方法 chrome全屏截圖快捷鍵

文章插圖
總結【chrome滾動截長圖的方法 chrome全屏截圖快捷鍵】這些小技巧,很簡單 , 希望對大家有所幫助,不過對于有辦法 , 有時間的朋友還是建議去官網看看吧,畢竟那里才更加全面 。


    以上關于本文的內容,僅作參考!溫馨提示:如遇健康、疾病相關的問題,請您及時就醫或請專業人士給予相關指導!

    「愛刨根生活網」www.malaban59.cn小編還為您精選了以下內容,希望對您有所幫助: