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 地址栏的最右侧会直接显示一个 "安装"图标(长得像一个电脑屏幕加一个向下的箭头)。直接点这个图标,也能达到一模一样的效果。

相关推荐
镜宇秋霖丶2 小时前
2026.5.6@霖宇博客制作中遇见的问题
前端·javascript·vue.js
小李子呢02113 小时前
前端八股Vue---Vue-router路由管理器
前端·javascript·vue.js
洛_尘5 小时前
Python 5:使用库
java·前端·python
Bigger5 小时前
Bun 能上生产吗?我的实战结论
前端·node.js·bun
kyriewen7 小时前
你的前端滤镜慢得像PPT?用Rust+WebAssembly,一秒处理4K图
前端·rust·webassembly
kyriewen117 小时前
你等的Babel编译,够喝三杯咖啡了——用Rust重写的SWC,只需眨个眼
开发语言·前端·javascript·后端·性能优化·rust·前端框架
IT_陈寒7 小时前
SpringBoot自动配置坑了我,原来要这样绕过去
前端·人工智能·后端
东方小月7 小时前
Claude Code 完整上手指南:MCP、Skills、第三方模型配置一次搞定
前端·人工智能·后端
XZ探长8 小时前
基于 Trae Solo 移动办公修复 Vue3 前端服务问题
前端
蝎子莱莱爱打怪8 小时前
Claude Code 省 Token 小妙招:RTK + Caveman 组合拳
前端·人工智能·后端