Chrome 浏览器如何“网页长截图”和“网站打包成应用”

Chrome 浏览器其实隐藏着很多极其好用的原生功能,不需要安装任何第三方插件就能轻松搞定"网页长截图"和"网站打包成应用"。

下面奉上最新版(2024年及以后)的实操指南,包教包会:

一、 谷歌网页长截图(原生免插件版)

忘掉那些臃肿的截图插件吧,Chrome 自带的命令行工具能帮你一键截取完整的网页长图,干净又清晰。

🌟 核心方法:开发者工具命令法(最推荐)

这招绝对是装杯利器,而且百分之百能截出高清完整的长图。

  1. 打开目标网页:先让页面完全加载完毕,滚动到底部确保内容都加载出来了。

  2. 唤出开发者工具 :在网页任意空白处点击鼠标右键,选择 "检查" (或者直接按下键盘上的 F12键)。

  3. 打开命令菜单 :按下快捷键 Ctrl + Shift + P ​ (Mac 系统是 Cmd + Shift + P)。

  4. 输入截图咒语 :在弹出的输入框里输入 screenshot

  5. 选择截图模式 :你会看到几个选项,用鼠标点击或者键盘上下键选择 Capture full size screenshot(捕获完整尺寸的截图)。

**🎉 完成!**​ 浏览器会稍微卡顿一下(时间取决于网页长度),随后整个网页的长图就会自动下载到你的电脑默认下载文件夹里了。

💡 附赠其他截图指令:

如果你在步骤 4 输入 screenshot后不想截全屏,还可以选择:

  • Capture screenshot:只截当前你在屏幕上看到的区域(相当于微信截图)。

  • Capture area screenshot:让你用鼠标拖拽框选任意矩形区域截图。


二、 将网站安装为应用(PWA 技术)

如果你每天都需要打开某个网站(比如 ChatGPT、Notion、或者你的工作后台),把它变成一个独立的桌面应用,不仅启动快,还能跟浏览器标签页彻底分开,体验极佳。

🌟 核心方法:通过 Chrome 菜单安装

  1. 打开你想"改造"的网站 (比如 web.telegram.orgchat.openai.com)。

  2. 打开 Chrome 右上角的"三个点"菜单

  3. 鼠标悬停在 "保存和分享"(Cast, save, and share)选项上。

  4. 在展开的子菜单中,点击 "将页面安装为应用"(Install page as app...)。

  5. 确认安装 :浏览器会弹出一个提示框,你可以给这个应用改个名字,然后点击 "安装"

**🎉 完成!**​

此时,你的电脑桌面上会生成一个该网站的独立快捷方式,并且它也会出现在你的开始菜单/应用程序文件夹里。以后双击打开,它就是一个独立的窗口,再也没有浏览器那些乱七八糟的标签页干扰你了!

💡 极速版安装通道:

现在很多现代化的网站(如 YouTube Music、WhatsApp Web 等),当你打开它们时,Chrome 地址栏的最右侧会直接显示一个 "安装"图标(长得像一个电脑屏幕加一个向下的箭头)。直接点这个图标,也能达到一模一样的效果。

相关推荐
华科大胡子1 小时前
Chrome与Web标准演进关系
chrome
说点AI1 小时前
我的 Vibe Coding 工具箱:一个人如何从零做出一个产品
前端·后端
SuperEugene2 小时前
Vue3 前端配置驱动避坑:配置冗余、渲染性能、扩展性问题解决|配置驱动开发实战篇
前端·javascript·vue.js·驱动开发·前端框架
JianZhen✓2 小时前
从零到一:基于声网Agora的医疗视频问诊前端实战指南
前端·音视频
GISer_Jing2 小时前
LangChain浏览器Agent开发全攻略
前端·ai·langchain
小李子呢02112 小时前
前端八股---脚手架工具Vue CLI(Webpack) vs Vite
前端·vue.js·webpack
2401_885885042 小时前
群发彩信接口怎么开发?企业级彩信发送说明
前端·python
PILIPALAPENG2 小时前
第2周 Day 5:前端转型AI开发,朋友问我,你到底在折腾啥?
前端·人工智能·python
Mintopia2 小时前
前端卡顿的真相:不是你代码慢,是你阻塞了
前端