专栏名称: 前端早读课
我们关注前端,产品体验设计,更关注前端同行的成长。 每天清晨五点早读,四万+同行相伴成长。
目录
相关文章推荐
龙视新闻联播  ·  龙江最美飘雪时|早春升温日 赏冰乐雪时 ·  6 小时前  
宝山消防支队  ·  以案为例 |《油锅起火怎么办?》 ·  10 小时前  
前端早读课  ·  【第3459期】两款 AI 编程助手 ... ·  19 小时前  
前端大全  ·  解锁 Vue Hooks:让 Vue 开发效率起飞 ·  昨天  
51好读  ›  专栏  ›  前端早读课

【早阅】shot-scraper 1.6:支持 HTTP Archive 的网页快照工具

前端早读课  · 公众号  · 前端  · 2025-02-17 08:00

正文

作者:@Simon Willison
原文:https://simonwillison.net/2025/Feb/13/shot-scraper/#atom-everything

背景

@Simon Willison 宣布了 shot-scraper 1.6 版本的发布,该版本新增了对 HTTP Archive(HAR)的支持。shot-scraper 是一个命令行工具,用于截取网页截图和抓取网页内容。此次更新使得用户能够生成包含页面及其所有依赖项的 HAR 文件,进一步增强了工具的实用性和灵活性。

shot-scraper:https://github.com/simonw/shot-scraper

The HAR viewer shows a line for each of the loaded resources, with options to view timing information

要点

1、HAR 支持

shot-scraper 现在可以生成 HAR 文件,记录网页加载过程中的所有请求和响应。

使用新的 shot-scraper har 命令创建 HAR 文件。例如:

shot-scraper har https://datasette.io/

  • 这将生成一个 datasette-io.har 文件。

  • HAR 文件是 JSON 格式,包含完整的响应副本,二进制文件(如图像)以 Base64 编码。

  • 可以使用 --zip 标志将 HAR 文件压缩成 ZIP 文件,其中 JSON 数据保存在 har.har 中,而响应主体则保存为 ZIP 文件中的单独文件。

2、多 URL 处理

shot-scraper multi 命令与 HAR 集成:

shot-scraper multi 命令允许针对 YAML 文件中指定的多个 URL 依序执行 shot-scraper。

现在,此命令采用 --har (或 --har-zip --har-file )选项,可在截图的同时生成 HAR 档案。

3、无截图模式

用户可以选择仅生成 HAR 文件,而不进行截图操作。

4、基于 Playwright

shot-scraper 基于 Playwright 构建,新功能利用了 Playwright 的 browser.new_context(record_har_path=...) 参数。

分析

HAR 文件是一种 JSON 格式的文件,记录了浏览器加载网页时的所有网络请求和响应。通过 shot-scraper 生成 HAR 文件,用户可以详细分析网页的加载过程,包括请求的顺序、响应时间、资源大小等信息。这对于网页性能优化、调试和监控具有重要意义。

新版本的多 URL 处理功能使得用户可以批量处理多个网页,并通过 YAML 文件进行配置,极大地提高了工作效率。此外,无截图模式的引入为用户提供了更大的灵活性,特别是在只需要分析网络请求而不需要截图的情况下。

shot-scraper 基于 Playwright 构建,Playwright 是一个强大的浏览器自动化工具,支持多种浏览器和平台。通过利用 Playwright 的功能,shot-scraper 能够提供稳定且高效的网页抓取和截图功能。

影响

此次更新对网页开发者和性能优化工程师具有重要意义。HAR 文件的生成和分析可以帮助开发者更好地理解网页的加载过程,识别性能瓶颈,并进行针对性的优化。多 URL 处理功能和无截图模式进一步提升了工具的实用性,使得用户可以更高效地完成批量任务。

未来,随着网页复杂度的增加和性能优化需求的提升,类似 shot-scraper 的工具将会变得更加重要。预计未来会有更多类似工具出现,提供更丰富的功能和更高的性能。







请到「今天看啥」查看全文