資訊專欄INFORMATION COLUMN
摘要：給節點截圖比如說我們剛才手動截取的區域其實是一個節點，如果想完整截取這一部分，我們就需要使用節點截圖功能。那么我們真的不需要網頁截圖插件了，如果想截圖整個網頁，我們直接在根節點選取就可以了。
昨天 Chrome62 穩定版釋出，除了常規修復各種安全問題外，還增加很多功能上的支持，比如說今天要介紹的強大的截圖功能。
直接截圖打開開發者工具頁面，選擇左上角的元素選擇按鈕（Inspect）
Windows 下按住 Ctrl，Mac 就按住 Command，然后在頁面拖動選擇區域即可。
Chrome會自動使用下載方式進行存儲，如下效果圖，感覺還不錯。
給節點截圖比如說我們剛才手動截取的區域其實是一個Node節點，如果想完整截取這一部分，我們就需要使用節點截圖功能。
首先在開發者工具里面選擇節點，這個如上圖所示直接點選HTML即可。
然后按下快捷鍵 Ctrl + Shift + p 打開命令工具，Mac下就是 Cmd + Shift + p，輸入 node 選擇 Capture node screenshot 即可。圖片會自動下載。
那么我們真的不需要網頁截圖插件了，如果想截圖整個網頁，我們直接在根節點選取就可以了。
是不是很方便？
原文首發在我的 GitHub 博客
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89159.html
摘要：目前已經在運行的線上前端監控系統代碼和講解都放在這篇文章里監控系統介紹及代碼用戶對前端程序員來說，就是一個黑匣子。 摘要： 通過錄屏或者截圖，快速復現BUG場景。 作者：一步一個腳印一個坑 原文：搭建前端監控系統（備選）Js截圖上報篇 Fundebug經授權轉載，版權歸原作者所有。 PS：本文關于Fundebug錄屏功能的內容有些不準確的地方，比如錄屏并非通過截圖實現的，錄屏插件...
摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...
摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...
摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...
閱讀 3572·2023-04-26 02:10
閱讀 1321·2021-11-22 15:25
閱讀 1675·2021-09-22 10:02
閱讀 913·2021-09-06 15:02
閱讀 3475·2019-08-30 15:55
閱讀 608·2019-08-30 13:58
閱讀 2782·2019-08-30 12:53
閱讀 3060·2019-08-29 12:38
