tft每日頭條

 > 科技

 > chrome浏覽器截圖教程

chrome浏覽器截圖教程

科技 更新时间:2024-09-01 03:24:22

chrome浏覽器截圖教程(無需安裝插件用)1

Chrome 浏覽器強大的地方之一在于支持相當豐富的擴展,碰到網頁截圖的情況,Awesome Screenshot、Nimbus Screenshot等已經是大家熟知的截圖擴展應用,而 Chrome 更吸引人的地方在于,産品本身保持簡潔,同時也内置了實用的功能,同樣用戶無需安裝任何擴展的前提下,利用 Chrome 原生工具也可以實現網頁截圖效果。

chrome浏覽器截圖教程(無需安裝插件用)2

Chrome 原生的截圖功能隐藏在開發者工具中,Windows 平台按下 F12快速調出開發者調試工具界面(macOS 系統快捷鍵為⌘Command ⌥Option I

chrome浏覽器截圖教程(無需安裝插件用)3

接着按下 Ctrl Shift P(macOS 版為⌘Command ⇧Shift P)轉至搜索命令工具條,或者光标移動至工具條按鈕 ┊,選擇Run command,下面隻需要在命令工具的輸入框中輸入對應的命令即可實現不同的截圖效果。

命令功能
Capture full size screenshot網頁長截圖
Capture screenshot截取網頁可視區域
Capture area screenshot截取選擇部分區域
Capture node screenshot截取手機版網頁長圖

chrome浏覽器截圖教程(無需安裝插件用)4

網頁長截圖。輸入命令Capture full size screenshot實現整張網頁長截圖,Chrome 會自動将整個網頁内容截取并保存至本地電腦,整個截取速度和效果上都有着不錯的表現。

chrome浏覽器截圖教程(無需安裝插件用)5

截取網頁可視區域。輸入命令Capture screenshot将當前網頁顯示的區域自動截圖并保存到本地。

chrome浏覽器截圖教程(無需安裝插件用)6

截取選擇部分區域。輸入命令Capture area screenshot将截取由用戶選擇的部分區域。

chrome浏覽器截圖教程(無需安裝插件用)7

截取選擇元素的内容。輸入命令Capture node screenshot将截取網頁中選定元素的内容。這一截圖命令特别之處在于,幫助用戶準确地截取網頁中特定元素的内容,首先用戶選擇網頁中某個截取元素,比如某張圖片、某個邊欄内容等,接着再運行Capture node screenshot,這樣可以減少手動選擇截圖時的錯誤率。

chrome浏覽器截圖教程(無需安裝插件用)8

chrome浏覽器截圖教程(無需安裝插件用)9

最後,通過 Chrome 模拟移動設備的功能,結合前面整張網頁長截圖的命令,即可生成一張不錯的手機版網頁長圖。首先選擇開發者工具條移動設備的按鈕(Windows 系統快捷鍵 Ctrl Shift M)打開模拟設備功能,Chrome 内置了多個設備和分辨率設置選項,接着輸入Capture screenshot命令自動輸出一張手機版網頁的長截圖,下一步使用套殼工具就可以輸出一張美觀的展示圖。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved