免裝截圖軟體與外掛, Chrome 直接完成各尺寸網頁截圖教學


有些截圖軟體確實很好用,而且還免費,例如很適合管理與編輯大量截圖的:「 Screenshot Captor 免費截圖軟體完美抓圖windows 7視窗 」。或者我前一陣子所推薦,目前我也一直使用,除了截圖功能外還有強化多工效率的:「 不只是優秀截圖軟體! Snipaste 用貼圖創造多工神器 」。

不過今天要推薦一個不需要安裝截圖軟體或外掛,也能用「快速」、「好看」的方式進行「各種尺寸網頁截圖」的技巧。

例如我今天想要截圖「電腦玩物」部落格畫面,而且想要擷取不同特定尺寸的網頁畫面,可能是他在 1024*768 螢幕上的顯示畫面,或是他在平板上、手機上的顯示畫面,這時候都可以利用這個免軟體也免外掛的技巧,直接截圖。




這個技巧很簡單,只要使用 Google Chrome 瀏覽器就可以直接實現。

首先,進入你想截圖的網頁畫面,打開 Chrome 的「開發者工具」,在 Windows 系統中按下「 F12 」可以開啟,在 Mac 系統中按下「 Command + Alt + I 」可以開啟。




接著在開發者工具的上方工具列,點擊「 Toggle device toolbar 」按鈕,這時候網頁畫面就可以任意調整成各種尺寸、各種裝置上的顯示模式,在電腦中也能查看網頁在行動裝置的顯示效果。




然後在顯示畫面上方,可以自行輸入尺寸調整畫面,或是在裝置清單中,切換想查看哪種裝置上的預覽圖。




還能選擇是縱向或橫向的瀏覽方式。




更進一步的,如果截圖時想要更有行動裝置的顯示效果,還能在右上方「...」更多功能選單中,開啟「 device frame 」,這時候顯示畫面會加上手機或平板的外框,這樣就能抓下更好看的圖。




最後,真的準備抓圖時,也不需要幾截圖,只要打開「...」選單,選擇「 Capture screenshot 」,就能把左方設定好的顯示畫面,完整截圖成 PNG 檔案了!

下次需要網頁截圖的朋友,可以試試看這個不用截圖軟體、免裝截圖外掛,直接就能完成各種尺寸、各種行動裝置畫面截圖的技巧。

延伸閱讀相關文章:
  1. Google Chrome 2016 你還需要知道的 10 條隱藏技巧
  2. Cent Browser 取代 Google Chrome: 效能、介面、功能最佳化
  3. [年度精選]比軟體更強悍 33 種文書繪圖免費線上工具 
轉貼本文時禁止修改,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:免裝截圖軟體與外掛, Chrome 直接完成各尺寸網頁截圖教學


留言

  1. 奇怪,在我的Mac上,Show Device Frame是不能選的?

    回覆刪除
  2. 奇怪,在我的Mac上,Show Device Frame是不能選的?

    (自己回答,因為我沒有選Device啊~ 耍笨)

    回覆刪除
    回覆
    1. 感謝補充,看來是要在中間先選特定的裝置,然後才能選外框

      刪除
  3. 作者已經移除這則留言。

    回覆刪除
  4. 感謝感謝 「也不需要幾截圖」此句似有語病,反饋先生,以為泉報。 南無阿彌陀佛

    回覆刪除
  5. 請問為什麼我現在用最新版的Chrome,除了第一個功能以外其他都沒有出現呢?!

    回覆刪除
  6. 謝謝好文!

    PS: 上面好像有遺漏/錯字?
    「也不需要幾截圖」

    幾 => 自己?

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Google Maps 我的地圖完全教學!規劃自助旅行攻略

3個 ChatGPT 輸入到輸出實驗,第二大腦筆記用 AI 生成文章報告

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

Google 表單的 10 個專業問卷調查設計秘密教學

如何為筆記命名,建立搜尋規則?我的標題、分類、標籤命名法

Draw.io 中文線上製作流程圖首選!專業水準完全免費

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

Google 表單自動關閉回覆教學:時間人數到達就過期