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.org或 chat.openai.com)。

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

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

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

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

**🎉 完成!**​

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

💡 极速版安装通道:

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

相关推荐
gqc584 分钟前
Markdown 写完怎么验证?我现在的 4 步本地检查流程
前端
计算机魔术师31 分钟前
我重算了新云的账,发现亏的不是算力,是时间
前端
wiseyao12191 小时前
uniapp scroll-view滚动到最后
前端·javascript·uni-app
陈随易1 小时前
从今天起,你只需要一个浏览器之Ego lite
前端·后端·程序员
怕浪猫1 小时前
Step 5 Preview 模型写 3D 象棋,两个小时上线
前端·javascript·面试
Highcharts.js2 小时前
Highcharts甘特图开发带导航功能的项目管理图示例
开发语言·前端·javascript·甘特图·highcharts·项目管理图
Hilaku2 小时前
前端不懂业务有多可怕?
前端·javascript·程序员
涛涛ing2 小时前
模型吐出半截JSON,前端如何边收边渲染?2026年AI应用必须闯过的工程关
前端
aixingpan2 小时前
aixingpan.cnAPI开发文档:api_docs_trichart_natal_solar_return_transit2接口指南
前端·php
FRing032 小时前
JavaScript入门到精通二十八(forEach遍历、创建对象的三种方式、构造函数、new实例化执行过程、实例成员和静态成员)
开发语言·前端·javascript