免裝截圖軟體與外掛, 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,除了第一個功能以外其他都沒有出現呢?!

    回覆刪除

張貼留言

相關文章:

這個網誌中的熱門文章

台灣故宮開放 7萬張書畫器物圖片免費下載!教學與商業皆可用

Pngimg 免費下載28000張去背圖檔,做簡報免花時間自己去背

OpenShot 免費中文版影片剪輯軟體,何必用精簡版的威力導演

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

Google 備份與同步處理全新軟體下載!同步備份整台電腦教學

Steam 夏日特賣遊戲怎麼選?25款我私房推薦的特價遊戲評論

免費簡單架設報名徵選傳檔網頁, Google 表單上傳檔案開放了

Noteflight 中文免費樂譜製作軟體線上版,寫譜列印與輸出MP3

[時間技客-16] 為何排暑假時間表無效?方法在掌握空檔和習慣

出國旅行記帳分帳不混亂教學:免裝 App 的記帳表格範本下載