相信很多同學(xué)都有截圖的需求头遭,有時(shí)候一個(gè)網(wǎng)頁(yè)的內(nèi)容很多,根本沒(méi)法把所有內(nèi)容都截取在同一張圖片上癣诱,有同學(xué)可能會(huì)把每頁(yè)截圖再重新拼接起來(lái)计维。
其實(shí),我們可以使用工具和瀏覽器開發(fā)者工具來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)長(zhǎng)圖的截取撕予。
以前我分享過(guò)一些工具鲫惶,來(lái)實(shí)現(xiàn)抓取整個(gè)網(wǎng)頁(yè)的信息內(nèi)容。
但是這些工具截取出來(lái)的圖片質(zhì)量沒(méi)有很高嗅蔬,在清晰度方面始終有些不足剑按。
并且有些截圖工具使用起來(lái)會(huì)比較麻煩疾就。
所以澜术,今天教大家怎么使用Chrome瀏覽器的開發(fā)者工具命令來(lái)截取網(wǎng)頁(yè)的長(zhǎng)圖艺蝴。
比如我現(xiàn)在想截取quora網(wǎng)站上的這個(gè)首頁(yè)長(zhǎng)圖,從動(dòng)圖可以看到鸟废,這個(gè)首頁(yè)的信息還是比較多的猜敢。
現(xiàn)在我們使用快捷鍵F12調(diào)出開發(fā)者工具,你也可以右擊鼠標(biāo)盒延,然后找到檢查元素缩擂,進(jìn)入開發(fā)者工具
然后使用快捷組合鍵Ctrl+shift+P,打開一個(gè)可以輸入命令查找文件的窗口
然后輸入:Capture full size screenshot添寺,意思是抓取全網(wǎng)頁(yè)面的截圖
然后Chrome瀏覽器就會(huì)自動(dòng)抓取網(wǎng)頁(yè)的截圖胯盯,然后把這個(gè)網(wǎng)頁(yè)截圖保存到本地了
如果你只想截圖當(dāng)頁(yè)面的內(nèi)容,那么你可以直接輸入:Capture screenshot计露,就可以截取屏幕當(dāng)頁(yè)的內(nèi)容信息
如果你想再電腦端模擬手機(jī)版的截圖博脑,那么你可以在開發(fā)者工具的左上角,點(diǎn)擊那個(gè)圖標(biāo)切換設(shè)備票罐,你也可以使用快捷鍵Ctrl + Shift + M
當(dāng)你點(diǎn)擊之后叉趣,頁(yè)面顯示就會(huì)從網(wǎng)頁(yè)版就會(huì)切換為手機(jī)版
如下動(dòng)圖
并且我們可以設(shè)置為不同手機(jī)的大小,模仿不同手機(jī)來(lái)截取長(zhǎng)圖该押,然后截取手機(jī)版的長(zhǎng)圖跟上面的方法一樣
輸入Capture full size screenshot疗杉,就可以了