常常需要網頁截圖，但卻苦惱不知如何做嗎？那你找對文章了！因為這篇文章將告訴你一個好方法，適用所有 Chromium 核心的瀏覽器，也就是說這方法支援 Chrome、Edge、Opera 等瀏覽器，不管是局部區域截圖、長截圖（完整頁面）、指定節點截圖或螢幕範圍截圖，通通可以做到！首先你需要在要截圖的網頁頁面上開啟 F12 開發者工具。

▲ 右鍵清單「檢查」或點鍵盤「F12」都可以進入到開發者工具，接著右側「...」，選「Run command」（也可以直接鍵盤「Ctrl」+「Shift」+「P」）。

▲ 輸入指令「screenshot」，會列出四種截圖方式，由上至下分別是：局部區域截圖、長截圖（完整頁面）、指定節點截圖、螢幕範圍截圖。節點（Node）指的是網頁的 HTML 節點，這種截圖方式網頁開發者應該會覺得很好用～

▲ 局部區域截圖可以自訂要截圖的範圍喔！

題外話，Chrome 內建只有這方式能截圖，而 Edge 跟 Opera 內建可以用圖形化介面直接截圖，更簡易便利喔！

XAMPP：Apache 服務路徑錯誤之解決方式
📆 2022-09-04
📁 軟體應用, 網站技術, 伺服器

Java Debug（Visual Studio Code 擴充功能）：編譯、執行 JAVA 程式
📆 2019-02-22
📁 軟體應用, 程式設計, JAVA

After Effects 簡易計時器、顯示影片分秒、音樂播放時間
📆 2017-03-05
📁 軟體應用, 多媒體, 動畫特效

nvm-windows：Windows 平台的 Node.js 版本管理工具，可安裝、切換和管理多個 Node.js 版本
📆 2024-06-26
📁 軟體介紹, 軟體應用, 網站技術, Node.js

Git 版本控制：建立與初始化本地倉庫、暫存與認可變更（使用 VS Code）
📆 2019-09-18
📁 軟體應用, 網站技術, 程式設計

Native Lazyload：原生延遲載入功能登場！純 HTML 就能做到！
📆 2019-09-14
📁 軟體應用, 瀏覽器, 網站技術, HTML, 架站程式, WordPress, Google Chrome

SD web UI x ControlNet：全新預處理器 inpaint_only+lama 非常適合做圖像外擴
📆 2023-06-13
📁 軟體應用, 人工智慧, AI繪圖

Mozilla Firefox:適應性設計模式
📆 2014-11-06
📁 軟體應用, 瀏覽器, Firefox

《上一篇》PlurkBot「鈍 | 自律型AI」自動分析噗文並讚好或回覆誇獎文字 《下一篇》台灣無人機、空拍機民眾版飛行區、限航區、禁航區 GIS 查詢