Chrome原生工具實(shí)現(xiàn)長(zhǎng)截圖

文章目錄

• Chrome原生工具實(shí)現(xiàn)長(zhǎng)截圖
• • 前言
  • 操作步驟
  • 參考文章

前言

我們?cè)诰W(wǎng)上沖浪時(shí)，經(jīng)常遇到一些搞笑的或者是寫(xiě)的比較好的文章，想長(zhǎng)截圖給別人分享。可是 Windows自帶的截屏功能（Win + PrintScreen）也只能截當(dāng)前界面的圖，不能實(shí)現(xiàn)長(zhǎng)截圖的效果，所以我們一般都會(huì)在瀏覽器中裝插件，利用插件進(jìn)行長(zhǎng)截圖。

偶然間在網(wǎng)上看到說(shuō)，Chrome瀏覽器不用安裝插件，利用原生工具即可進(jìn)行長(zhǎng)截圖。趕緊下載了 Chrome瀏覽器進(jìn)行一番試驗(yàn)，原生工具真的可以進(jìn)行長(zhǎng)截圖，真是皆大歡喜。

操作步驟

首先，我們先去網(wǎng)上下載并安裝一個(gè) Chrome瀏覽器，百度搜索一下即可找到下載界面，安裝也很簡(jiǎn)單，這里不再進(jìn)行贅述。

接著，我們打開(kāi) Chrome瀏覽器，選擇一個(gè)想要長(zhǎng)截圖的網(wǎng)頁(yè)。比如這個(gè)頁(yè)面，我們可以看到，這篇文章內(nèi)容并不算少，必須進(jìn)行長(zhǎng)截圖才行。

Chrome 原生的截圖功能隱藏在開(kāi)發(fā)者工具中，所以我們要調(diào)出開(kāi)發(fā)者工具界面。Windows系統(tǒng)可以通過(guò)以下兩種方式調(diào)出開(kāi)發(fā)者工具界面

• 按下 F12鍵
• 在任意空白區(qū)域點(diǎn)擊鼠標(biāo)右鍵，點(diǎn)擊“檢查”

開(kāi)發(fā)者工具界面打開(kāi)如下

接著我們要打開(kāi)搜索命令工具條，也有兩種方式

• 按下“Ctrl + Shift + P”鍵
• 鼠標(biāo)移至右上角更多按鈕，點(diǎn)擊 Run Command

最后，我們只需要在命令工具的輸入框中輸入對(duì)應(yīng)的命令即可實(shí)現(xiàn)不同的截圖效果。

• Capture full size screenshot 網(wǎng)頁(yè)長(zhǎng)截圖
  • 實(shí)現(xiàn)整張網(wǎng)頁(yè)長(zhǎng)截圖，Chrome 會(huì)自動(dòng)將整個(gè)網(wǎng)頁(yè)內(nèi)容截取并保存至本地電腦，整個(gè)截取速度和效果上都有著不錯(cuò)的表現(xiàn)
• Capture screenshot截取網(wǎng)頁(yè)可視區(qū)域
  • 將當(dāng)前網(wǎng)頁(yè)顯示的區(qū)域自動(dòng)截圖并保存到本地
• Capture area screenshot截取選擇部分區(qū)域
  • 將截取由用戶(hù)選擇的部分區(qū)域
• Capture node screenshot截取手機(jī)版網(wǎng)頁(yè)長(zhǎng)圖
  • 將截取網(wǎng)頁(yè)中選定元素的內(nèi)容。這一截圖命令特別之處在于，幫助用戶(hù)準(zhǔn)確地截取網(wǎng)頁(yè)中特定元素的內(nèi)容，首先用戶(hù)選擇網(wǎng)頁(yè)中某個(gè)截取元素，比如某張圖片、某個(gè)邊欄內(nèi)容等，接著再運(yùn)行 Capture node screenshot，這樣可以減少手動(dòng)選擇截圖時(shí)的錯(cuò)誤率

比如我們現(xiàn)在進(jìn)行 Capture full size screenshot長(zhǎng)截圖

可以看到，截圖之后，開(kāi)發(fā)者工具會(huì)在左下角提示用戶(hù)截圖成功，圖片保存在 Chrome瀏覽器設(shè)置的下載路徑里面。

我們點(diǎn)擊查看文件，看到確實(shí)是剛才網(wǎng)頁(yè)的完整長(zhǎng)截圖，大功告成。

參考文章

無(wú)需安裝插件，用 Chrome 原生工具就能實(shí)現(xiàn)長(zhǎng)截圖

總結(jié)

以上是生活随笔為你收集整理的Chrome原生工具实现长截图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。