利用Chrome開發者工具功能進行網頁整頁截圖的方法

說起要截取整個網站頁面,很多朋友第一時間想到的都是用哪款chrome插件,確實,我們網站之前也有介紹過一些截圖插件比如:

1.Awesome Screenshot

2.Webpage Screenshot

3.Smartshot:支持滾屏的谷歌瀏覽器截圖插件

4.Joxi Full Page Screen Capture:全屏截圖插件

但其實現在不少瀏覽器都自帶截屏功能了。尤其是像chrome如此強大的瀏覽器,比較可惜的是 Chrome 目前並沒有很明顯地將這個功能展示出來,所以今天就讓我們給大家分享一個可以不需要任何軟件或者插件就可以直接整屏截取網頁的方法吧!

第一步:打開chrome開發者工具。

打開你想截圖的網頁,然後按下 F12(macOS 是 option + command + i)調出開發者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P)。緊接着輸入指令 capture,它會提示有三個選項,如下圖所示:

分別是截取全屏、node 模式以及當前範圍,用鼠標點擊或者用鍵盤選擇對應的就可以了。

第二步:截取手機版的網頁

如果你想擷取網頁在行動裝置例如手機的畫面截圖,可通過快速鍵 Ctrl + Shift + M(Mac 爲 ⌘Command + ⇧Shift + M)來開啟模擬工具,切換 iPhone、iPad、Nexus、Galaxy 等裝置開啓網頁的顯示情形,再搭配前面介紹的截圖功能抓取網頁在手機顯示的畫面截圖。

是不是特別的簡單呢?相比起用擴展來截圖,這個方式當然會複雜而且簡陋點,但當你緊急需要時而且不方便下載擴展的時候,也是個不錯的選擇。當然你也可以選擇網頁截圖插件


引用:http://chromecj.com/utilities/2017-12/859.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章