網頁設計 網頁設計推薦 網頁設計
之前試用Firefox Quantum時,我最喜歡的功能之一就是其內建的截圖功能。它不僅可以自動檢測網頁元素邊界,還能輕鬆保存整個網頁,十分方便。
後來由於擴充及習慣等原因,我又換回了Chrome,但還是對該功能念念不忘。儘管商店裡也有許多截圖增強擴充,但在截取一些比較複雜的網頁時,往往會出現元素錯位、重複的現象。經過一番探索,我發現Chrome開發工具中其實自帶了截圖命令,效果也令人滿意,在這裡分享給大家。
要想使用截圖功能,你需要首先確保Chrome已升級至59或更高版本。在想要截圖的網頁中,首先按下
除了普通長截圖以外,你還可以利用這一功能截取手機版網頁長圖。只需要按下
如果你想準確截取網頁的某一部分,可以按下
海納川數位科技
參考資料:數位生活https://www.bnext.com.tw/article/47401/chrome-screenshot
Orignal From: 如何截取完整網頁畫面?Chrome快捷鍵讓你輕鬆取得高畫質長截圖
之前試用Firefox Quantum時,我最喜歡的功能之一就是其內建的截圖功能。它不僅可以自動檢測網頁元素邊界,還能輕鬆保存整個網頁,十分方便。
後來由於擴充及習慣等原因,我又換回了Chrome,但還是對該功能念念不忘。儘管商店裡也有許多截圖增強擴充,但在截取一些比較複雜的網頁時,往往會出現元素錯位、重複的現象。經過一番探索,我發現Chrome開發工具中其實自帶了截圖命令,效果也令人滿意,在這裡分享給大家。
要想使用截圖功能,你需要首先確保Chrome已升級至59或更高版本。在想要截圖的網頁中,首先按下
⌘Command + ⌥Option + I(Windows為F12)快捷鍵,召喚出調試界面。隨後,按下⌘Command + ⇧Shift + P(Windows為Ctrl + Shift + P),輸入命令Capture full size screenshot(只輸前幾個字母就能找到),敲下Enter, Chrome就會自動截取整個網頁內容並保存至本機。由於是渲染引擎直接輸出,其比普通擴充工具速度更快,解析度也更高。 除了普通長截圖以外,你還可以利用這一功能截取手機版網頁長圖。只需要按下
⌘Command + ⇧Shift + M (Windows為 Ctrl + Shift + M)模擬行動裝置,再按剛才的方法運行命令就可以了。在頂部的工具欄中,你可以選擇要模擬的設備和分辨率等設置。 如果你想準確截取網頁的某一部分,可以按下
⌘Command + ⇧Shift + C(Windows為 Ctrl + Shift + C)嗅探元素。選中想要的部分後,再運行Capture node screenshot命令,一張完美的選區截圖就誕生了。
海納川數位科技
參考資料:數位生活https://www.bnext.com.tw/article/47401/chrome-screenshot
Orignal From: 如何截取完整網頁畫面?Chrome快捷鍵讓你輕鬆取得高畫質長截圖
留言
張貼留言