• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

免費資源網路社群

免費資源指南,每日網路資訊與科技新知

  • 免費軟體
    • APP
      • iOS
      • Android
    • Mac
    • 瀏覽器外掛
      • Chrome
      • Firefox
    • 防毒軟體
    • 系統工具
    • 圖片處理
    • 文字編輯
  • 線上工具
    • 雲端掃毒
    • 線上翻譯
    • 線上轉檔
    • 配色工具
    • 縮網址
    • 產生器
  • 免費空間
    • 網路硬碟
    • 圖片空間
    • 影片空間
    • 網站空間
  • 熱門主題
    • Facebook
    • VPN
    • YouTube
    • 編輯精選
    • 字型下載
    • 免費圖庫
  • 網路科技
    • 個人服務
    • 電子信箱
    • 實用教學
    • 資料查詢
    • 音樂音效
  • 架站教學
    • DNS
    • WordPress
    • 搜尋引擎最佳化
    • 素材模版
    • 免費圖示
    • 網站監測

使用 Chrome 內建工具製作網頁長截圖,擷取網站畫面免安裝下載外掛

Last updated 3 years ago by Pseric

使用 Chrome 內建工具製作網頁長截圖教學,擷取網站畫面免安裝下載外掛

幾個月前介紹過「Firefox Screenshots」免費網頁擷圖工具,也是火狐瀏覽器 Firefox 內建的快速拍照、分享螢幕功能,在全新 Firefox Quantum 推出後成為內建功能之一,可見不單單只有工作上會用到,對於一般使用者來說網頁擷圖也是相當必要。現在 Google Chrome 也內建網頁擷取工具以及將完整頁面保存下來的「網頁長截圖」製作功能,不用額外下載、安裝外掛或擴充功能,只要輸入指令就能做到。

而我平時的使用經驗是透過擷圖工具來抓取我需要的範圍,我在「如何寫出一篇文章?每日必用的寫作相關軟體彙整」就曾提及 WinSnap,後來換成以 Mac 做為主要工作環境後就改為使用 Jing,或許是因為我必須要擷取一些網路服務、應用程式或軟體畫面,我還是習慣以工具來抓取我需要的範圍,而且在尺寸大小上也比較容易控制。

但我相信網頁截圖是許多人必定會用到的工具,之前也推薦過幾個擴充功能:

  • Smartshot 最簡單免費網頁截圖外掛推薦
  • Standardized Screenshot 擷取網頁自動加入 Mac 外框及陰影效果,讓擷圖更有質感
  • Full Page Screen Capture 將網頁完整擷取備份,輸出另存為圖片格式
  • qSnap 瀏覽器抓圖工具,一鍵快速把網頁轉為圖片、產生分享鏈結

回到本篇主題,要如何使用 Google Chrome 內建的功能進行網頁畫面擷取、備份呢?接下來我會以圖文簡單教學,其實只要記住快速鍵組合,就能以輸入指令方式來製作截圖,當然還包括很多工具可能都無法做的網頁「長截圖」,也就是把網頁從頭到尾完整擷取為圖片,都可利用內建功能辦到,非常實用。

使用教學

STEP 1

首先,將你的 Google Chrome 瀏覽器更新、升級到 59 或更高版本,在我寫這篇文章時的版本為 63,接著以快捷鍵 F12 (Mac 為 ⌘Command + ⌥Option + I)開啟開發人員工具功能,如下圖會出現許多網頁開發者需要的相關工具。

使用 Chrome 內建工具製作網頁長截圖

STEP 2

開啟「開發人員工具」後隨即按下 Ctrl + Shift + P(Mac 為 ⌘Command + ⇧Shift + P),會出現可輸入指令列的工具,輸入「Capture full size screenshot」(只要前幾個字應該就會自動搜尋並跳出該指令),按下 Enter 後 Google Chrome 就會自動擷取整個網頁從頭到尾的內容,直接輸出為圖片並下載保存。

使用 Chrome 內建工具製作網頁長截圖

STEP 3

下圖就是我以 Chrome 內建擷取完整尺寸截圖所製作的圖片範例,因為是以瀏覽器內建渲染引擎直接輸出,速度很快,效果也很好!尤其是解析度和精緻程度都很高。

使用 Chrome 內建工具製作網頁長截圖

STEP 4

如果你想擷取網頁在行動裝置例如手機的畫面截圖,可透過快速鍵 Ctrl + Shift + M(Mac 為 ⌘Command + ⇧Shift + M)來開啟模擬工具,切換 iPhone、iPad、Nexus、Galaxy 等裝置開啟網頁的顯示情形,再搭配前面介紹的擷圖功能抓取網頁在手機顯示的畫面截圖。

使用 Chrome 內建工具製作網頁長截圖

下圖就是我抓取的網頁截圖,也是免費資源網路社群在 iPhone 8 Plus 開啟的情形,因為使用響應式網頁設計(Responsive web design,RWD),當裝置寬度不夠時會自動隱藏側邊欄,同時將整體版型縮小到可容得下畫面,避免因為螢幕太小而在瀏覽時出現版型跑掉或必須滑動才能瀏覽內容等不便情形。有些網站會另外提供行動板網頁,這都是比較常見的解決方案。

使用 Chrome 內建工具製作網頁長截圖

STEP 5

最後,再介紹一個小功能,可以擷取網頁中你選擇的元件,如果有使用過 Google Chrome 內建的開發人員工具就知道,有個功能可以選取網頁內容,然後顯示出該段落程式碼、CSS 及相關資訊,只要按下 Ctrl + Shift + C(Mac 為 ⌘Command + ⇧Shift + C)就能開啟。

選擇你要抓取的網頁部分,輸入「Capture node screenshot」指令就能擷取轉為圖片。

使用 Chrome 內建工具製作網頁長截圖

值得一試的三個理由:

  1. 直接以 Google Chrome 內建工具進行網頁擷圖
  2. 不用額外下載、安裝外掛,擷取效果好,速度快
  3. 可製作網頁長截圖,也能擷取行動裝置畫面

分享文章

  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 分享到 LinkedIn(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)

分類: 實用教學, 雜七雜八標籤: Chrome, Google Chrome, Google瀏覽器, Mac, Responsive Web Design, RWD, Windows, 實用教學, 截圖, 截圖軟體, 截屏, 抓圖程式, 教學, 教學相關, 數位工作, 瀏覽器, 瀏覽器相關, 畫面擷取, 網站截圖, 網頁截圖, 網頁擷取, 網頁轉圖片, 網頁長截圖, 自適應設計, 螢幕截圖, 螢幕擷取, 開發工具, 頁面擷取

關於 Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

Primary Sidebar

使用電子郵件訂閱網站

輸入你的電子郵件地址訂閱網站新文章,使用電子郵件接收通知。

站內搜尋

追蹤更新

最新文章

  • Signal 更重視隱私即時通訊應用,不含廣告追蹤器不過度收集用戶資訊
  • you-tldr 貼上網址快速產生 YouTube 影片摘要,下載匯出字幕 .csv 格式
  • Insta-stories.ru 匿名瀏覽 IG 限時動態和精選貼文,一鍵下載相片影片
  • OVRVU 專注於精簡和免費個人頁面產生器,支援 Markdown 無流量限制
  • 怕吃到萊豬?臺灣豬證明標章地圖可查詢使用國產豬肉店家
  • Brizy Cloud 免費架站工具輕鬆打造高轉換率網站,支援自訂網域名稱
  • WhatsApp 強制與 Facebook 共享資料,刪除帳號、備份匯出對話記錄教學
  • InstaDLD 貼上 Instagram 貼文網址就能下載相片或影片檔

精選主題

  • 思源黑體:Adobe 與 Google 合作開發開放原始碼中文字型
  • 思源宋體 Noto Serif CJK 字型免費下載!Google、Adobe 再次攜手推出開放原始碼字體
  • Apple Music 登陸台灣!免費三個月試用音樂串流服務,不聽音樂要幹嘛?
  • [下載] WinRAR 解壓縮軟體正式推出中文免費版,別再用盜版破解版了!
  • Mipony 白馬下載器:網路下載必裝!支援數百免空可突破下載限制
  • Outline 來自 Google 全自動自架 VPN 安裝工具,突破中國網路封鎖限制
  • Spotify 免費聆聽 4000 萬首歌,音樂串流應用 iOS、Android 版下載
  • Peggo 終止服務!5 個 YouTube 轉檔下載替代方案推薦
  • 日本亞馬遜 AmazonGlobal 線上購物直送台灣,免消費稅免找代購
  • 中華郵政 i郵箱初體驗,24 小時自助郵局寄件取件超方便
  • YouTube Music 免費音樂串流服務正式登場,升級 Premium 零廣告體驗
  • Microsoft Edge 正式版免費下載!以 Chromium 重新打造微軟瀏覽器
  • 使用 eMask 線上預購口罩,健保卡或自然人憑證驗證可信用卡繳費
  • 口罩實名制 2.0 健保卡身分認證教學,以健保快易通 APP 線上預約口罩
  • Photopea 免費圖片編輯器,堪稱 Photoshop 線上版支援 PSD 等常見格式
  • 財政部統一發票兌獎 APP 掃描發票存手機,自動記帳主動對獎超方便
  • 使用健保卡+戶號線上查詢勞保勞退年資、應繳欠繳保費和退休金核發試算
  • 跨平台 Brave 瀏覽器免費下載!兼具速度與隱私相容 Chrome 擴充功能
  • YouTube Kids 兒童專用影音頻道,手機平板應用程式免費下載

贊助商連結

實用教學

  • 46個免費圖庫網站總彙整
  • 15個免費下載高解析度圖片最佳圖庫
  • 下載高畫質相片素材的13個免費圖庫資源精選
  • 12個你應該知道的中英文假字、文章產生器
  • 20個免費下載創用 CC 授權音樂的網站彙整
  • 40個設計師必備免費資源超推懶人包
  • Google 商家被留負評該檢舉刪除?或許業主更該做的是回應疑慮
  • Facebook 全新下載資料副本功能,一次備份所有臉書記錄匯出
  • Instagram 資料下載讓使用者完整備份相片影片、留言、訊息等個人記錄
  • 7 個線上接收手機簡訊驗證碼的免費網路服務整理
  • 如何重灌 Mac 電腦?重新安裝 macOS 自動更新為最新版本教學
  • PayPal 兩步驟驗證設定教學,以手機簡訊或應用程式降低被盜用風險
  • 以 YubiKey 實體安全金鑰設定 Google 兩步驟驗證教學

WordPress 架站資源

  • 搬家自架 WordPress 推薦的五個虛擬主機服務
  • 架站更上一層樓,我推薦的五個虛擬專屬主機(VPS)服務
  • WordPress Hosting 架站空間精選,最多人推薦的五個國外虛擬主機方案
  • 如何挑選一個適合你的虛擬主機服務?我參考的七個比較項目
  • 自架 WordPress 虛擬主機租用教學,將網誌備份匯出、匯入到新家
  • 在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學
  • 殺手級 WordPress 體檢項目:101 個建立新網站的超簡易捷徑!
  • Cloudflare 架站者必備免費 CDN、DNS 託管服務設定教學
  • 台灣用戶也能在 Google Domains 註冊購買網域名稱,詳細申請設定教學
  • 16 個免費網站速度測試工具推薦!網頁效能評比,搜尋引擎最佳化必備
  • 亞馬遜 VPS 服務 Amazon Lightsail 搭配 ServerPilot 快速架設 WordPress 教學
  • 165 個 WordPress 官方開發佈景主題設計 Jetpack 使用者免費下載
  • 使用 Google Cloud Platform 雲端主機免費版架設 WordPress 教學
  • 使用 Cloudways 架設 WordPress 網站教學,快速部屬最佳化環境
  • RunCloud 佈署最佳化主機環境,整合 DigitalOcean 架設 WordPress 教學
  • 使用 SiteGround 虛擬主機一鍵快速安裝 WordPress 教學
  • Cloudflare 變身域名註冊商,以最低價續費含免費 SSL、WHOIS 隱藏功能
  • FastComet 評價極高的虛擬主機推薦,一鍵安裝 WordPress 教學
  • VaultPress 完整備份你的 WordPress 網站,無痛搬家或回復特定時間點

贊助商連結

Managed WordPress Hosting
We Love Jetpack!
Stock Photos, Vectors and Royalty Free Images from 123RF

使用 WordPress 建置,最高級的語意化個人出版平台・關於本站・文章彙整・隱私權政策