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

相关推荐
胡萝卜术3 小时前
从API调用到手写LRU:力扣146「LRU缓存」的哈希表+双向链表终极进化之路
前端·javascript·面试
科技道人3 小时前
记录 默认置灰/禁用 app ‘Search Engine Selector‘ 的disable按钮
开发语言·前端·javascript
天疆说3 小时前
Zotero Connector 在 Edge 里找不到桌面 Zotero(Linux / Zotero 9.0.6 / Edge 150)
linux·前端·edge
李伟_Li慢慢5 小时前
02-从硬件说起WebGL
前端·three.js
kyriewen6 小时前
看了微软几万人用AI编程的数据——效率涨24%的代价没人提
前端·ai编程·claude
2601_963771376 小时前
How to Scale Your WordPress Store Traffic in 2026
前端·php·plugin
亿元程序员6 小时前
老板说我的3D箭头游戏用来做试玩太普通了,没人想玩,让我变点花样...
前端
李伟_Li慢慢6 小时前
01-threejs架构原理-课程简介
前端·three.js
_瑞8 小时前
深入理解 iOS 渲染原理
前端·ios
IT_陈寒8 小时前
SpringBoot自动配置失灵?你可能忘了这个关键注解
前端·人工智能·后端