Chrome 瀏覽器如何完美實現滾動截圖技巧

1、前言

    咱們平時在瀏覽網頁時，想把碰到好的網頁內容或者文章截屏保存，可是網頁的長度經常會超出屏幕高度，通常的截屏功能只能截取顯示在屏幕上的內容，那咱們該如何方便快捷截取所有內容？今天就分享一個如何利用Chrome瀏覽器在不安裝第三方軟件的狀況下直接截取網頁的方法。

2、如何利用Chrome瀏覽器截屏

    一、選擇Chrome瀏覽器，打開須要截圖的網頁；

    二、頁面加載完成後，按下快捷鍵組合 Ctrl+Shift+I（Windows）/F12 或者 Alt+Command+I（Mac）調出開發者工具，具體以下圖所示：

    三、開發者工具中，按下快捷鍵組合Ctrl+Shift +P(Windows) 或 Command+Shift+P(Mac)來打開命令行，具體以下圖所示：

    四、在命令行中輸入"Screen"，能夠看到三個選項，根據不一樣需求進行選擇，具體以下圖所示：

    ◆ 整個網頁：Capture full size screenshot

    ◆ 節點網頁：Capture node screenshot

    ◆ 當前屏幕：Capture screenshot

3、應用

    一、截取整個網頁的內容，進行截屏（Capture full size screenshot）

    二、選擇須要的元素節點，進行截屏（Capture node screenshot）

    三、根據當前當前屏幕的大小，進行截屏（Capture screenshot）

4、總結

    若是你想在網頁中截取手機的畫面截，可經過快速鍵 Ctrl + Shift + M（Mac爲 Command + Shift + M）來開啓模擬工具，切換 iPhone、iPad、Nexus、Galaxy 等裝置開啓網頁的顯示情形，再根據上面介紹的截圖功能抓取網頁在手機顯示的畫面截圖，具體如圖所示：

    利用Chrome瀏覽的開發者工具，完美實現網頁全屏截圖，不須要安裝任何插件，你們快來試試吧。

    ① Ctrl+Shift+I（F12）

    ② Ctrl+Shift+P

    ③ 輸入"Screen"

    ④ 選擇不用的方式截取：

        ▶ 整個網頁（Capture full size screenshot）

        ▶ 節點網頁（Capture node screenshot）

        ▶ 當前屏幕（Capture screenshot）

 

優秀是一種習慣，歡迎你們關注學習