|
之前試用 Firefox Quantum 時(shí)，我最喜歡的特性之一就是其自帶的截圖功能。它不僅可以自動(dòng)檢測(cè)網(wǎng)頁(yè)元素邊界，還能輕松保存整個(gè)網(wǎng)頁(yè)，十分方便。 后來(lái)由于擴(kuò)展及習(xí)慣等原因，我又換回了 Chrome，但還是對(duì)該功能念念不忘。盡管商店里也有許多截圖增強(qiáng)擴(kuò)展，但在截取一些比較復(fù)雜的網(wǎng)頁(yè)時(shí)，往往會(huì)出現(xiàn)元素錯(cuò)位、重復(fù)的現(xiàn)象。經(jīng)過(guò)一番探索，我發(fā)現(xiàn) Chrome 開(kāi)發(fā)者工具中其實(shí)自帶了截圖命令，效果也令人滿意，在這里分享給大家。 要想使用截圖功能，你需要首先確保 Chrome 已升級(jí)至 59 或更高版本。在想要截圖的網(wǎng)頁(yè)中，首先按下  隨后，按下 ?Command + ?Shift + P（Windows 為 Ctrl + Shift + P），輸入命令 Capture full size screenshot（只輸前幾個(gè)字母就能找到），敲下回車，Chrome 就會(huì)自動(dòng)截取整個(gè)網(wǎng)頁(yè)內(nèi)容并保存至本地。由于是渲染引擎直接輸出，其比普通擴(kuò)展速度更快，分辨率也更高。  除了普通長(zhǎng)截圖以外，你還可以利用這一功能截取手機(jī)版網(wǎng)頁(yè)長(zhǎng)圖。只需要按下 ?Command + ?Shift + M （Windows 為 Ctrl + Shift + M）模擬移動(dòng)設(shè)備，再按剛才的方法運(yùn)行命令就可以了。在頂部的工具欄中，你可以選擇要模擬的設(shè)備和分辨率等設(shè)置。  如果你想準(zhǔn)確截取網(wǎng)頁(yè)的某一部分，可以按下 ?Command + ?Shift + C（Windows 為 Ctrl + Shift + C）嗅探元素。選中想要的部分后，再運(yùn)行 Capture node screenshot 命令，一張完美的選區(qū)截圖就誕生了。  此外， Capture screenshot 命令可以讓你截取當(dāng)前網(wǎng)頁(yè)的可視部分。我也會(huì)繼續(xù)發(fā)掘 Chrome 開(kāi)發(fā)者工具的其它好玩用法，到時(shí)推薦給大家。
|
|
|
來(lái)自： 凡葉s > 《技術(shù)資料》
