Poppenspeler
Puppeteer is een JavaScript-bibliotheek die een API op hoog niveau biedt om zowel Chrome als Firefox te automatiseren via het Chrome DevTools Protocol en WebDriver BiDi.
Gebruik het om alles in de browser te automatiseren, van het maken van schermafbeeldingen en het genereren van PDF's tot het navigeren door en testen van complexe gebruikersinterfaces en het analyseren van de prestaties.
,Puppeteer is een JavaScript-bibliotheek die een API op hoog niveau biedt om zowel Chrome als Firefox te automatiseren via het Chrome DevTools Protocol en WebDriver BiDi.
Gebruik het om alles in de browser te automatiseren, van het maken van schermafbeeldingen en het genereren van PDF's tot het navigeren door en testen van complexe gebruikersinterfaces en het analyseren van de prestaties.
Concepten
Pagina-interacties, Pagina-interacties
Netwerkinterceptie, Netwerkinterceptie
Schermafbeeldingen maken, Schermafbeeldingen maken
Run-modi, Run-modi
Blogposts, blogposts
NRK 如何使用滚动条驱动的动画让故事生动起来
了解滚动条驱动的动画和滚动触发的动画如何增强故事性文章的效果
Spotify 如何使用 Picture-in-Picture API 构建 Spotify Miniplayer
了解 Spotify 迷你播放器如何从“画布摄影”转变为通过 Document Picture-in-Picture API 实现的精致体验。
容器查询案例研究
从 redBus 和 Tokopedia 了解容器查询的优势。
滚动条驱动动画案例研究
通过 Policybazaar、redBus 和 Tokopedia 探索滚动条驱动的动画的优势。
查看转换案例研究
redBus、Policybazaar 和 Tokopedia 都使用 View Transition API，提升了性能和流畅的界面。
:has() 案例研究
了解 Policybazaar 和 Tokopedia 如何使用 :has() 来获益。
Popover 案例研究
Tokopedia 使用 Popover API 减少其应用中的代码量。
Photoshop 如何处理大于内存大小的文件：
了解 Adobe 如何让用户能够在其标志性 Photoshop 应用的 Web 版本上编辑超大型文件。 （本文还提供视频形式。） 2021 年，Adobe 与 Chrome 工程团队合作， 将 Photoshop 引入到 Web 平台 。该软件创新地使用了 WebAssembly，并提供了 SIMD 、 源私有文件系统 中的高性能存储、适用于画布的 P3 色彩空间 ，以及带有 Lit 的 Web 组件等功能。本文将重点介绍 Adobe Photoshop
矢量图像编辑应用 Boxy SVG 如何使用 Local Font Access API 让用户选择他们喜爱的本地字体
Local Font Access API 提供了一种机制来访问用户本地安装的字体数据，包括名称、样式和字体系列等更高级别的详细信息，以及底层字体文件的原始字节。了解 SVG 编辑应用 Boxy SVG 如何使用此 API。 （本文还提供视频形式。） Boxy SVG 是一款矢量图形编辑器。其主要用例是编辑 SVG 文件格式的绘图，以创建插图、徽标、图标和其他平面设计元素。该插件由波兰开发者 Jarosław Foksa 开发，最初于 2013 年 3 月 15 日发布。Jarosław 运营着
游戏编辑器 Construct 3 如何使用 File System Access API 让用户保存游戏
File System Access API 支持读取、写入和文件管理功能。了解 Construct 3 如何使用此 API。 （本文还提供视频形式。） Construct 3 是由兄弟 Thomas 和 Ashley Gullen 开发的游戏编辑器。在游戏编辑器的第三次迭代中，这两个团队在先前针对 Windows 和 NW.js 构建游戏后，完全 “[押注] 浏览器将成为新的操作系统” 。您可以通过浏览编辑器的 展示版 或完成 导览
LEGO® Education 如何使用网络蓝牙和 Web Serial API
LEGO Education 利用网络的力量来尽可能简化将乐高模型连接到计算机的过程。
图片编辑应用 Photopea 如何使用 File Handling API 允许用户从文件资源管理器打开文件
借助 File Handling API，Web 应用可以将自己注册为应用支持的文件格式的文件处理程序。了解图片编辑应用 Photopea 如何使用此 API。 （本文还提供视频形式。） Photopea 是由 Ivan Kutskir 开发的一款免费在线图片编辑器。Ivan 从 2012 年开始开发这款应用，并维护了一个 博客 ，分享他为 Photopea 添加的主要功能。Photopea 支持 PSD (Adobe Photoshop)、XCF (GIMP)、Sketch (Sketch
案例研究：使用开发者工具更好地进行 Angular 调试
通过使用 Angular 作为测试试点，Chrome 开发者工具和 Angular 团队通力协作，为您提供更好的调试体验。其他框架也可以进行类似的更改。
How Google Search uses speculation rules
Learn about how Google Search used the Speculation Rules API to anonymously prefetch search results to improve user experience
NRK 如何使用滚动条驱动的动画让故事生动起来
了解滚动条驱动的动画和滚动触发的动画如何增强故事性文章的效果
Spotify 如何使用 Picture-in-Picture API 构建 Spotify Miniplayer
了解 Spotify 迷你播放器如何从“画布摄影”转变为通过 Document Picture-in-Picture API 实现的精致体验。
容器查询案例研究
从 redBus 和 Tokopedia 了解容器查询的优势。
滚动条驱动动画案例研究
通过 Policybazaar、redBus 和 Tokopedia 探索滚动条驱动的动画的优势。
查看转换案例研究
redBus、Policybazaar 和 Tokopedia 都使用 View Transition API，提升了性能和流畅的界面。
:has() 案例研究
了解 Policybazaar 和 Tokopedia 如何使用 :has() 来获益。
Popover 案例研究
Tokopedia 使用 Popover API 减少其应用中的代码量。
Photoshop 如何处理大于内存大小的文件：
了解 Adobe 如何让用户能够在其标志性 Photoshop 应用的 Web 版本上编辑超大型文件。 （本文还提供视频形式。） 2021 年，Adobe 与 Chrome 工程团队合作， 将 Photoshop 引入到 Web 平台 。该软件创新地使用了 WebAssembly，并提供了 SIMD 、 源私有文件系统 中的高性能存储、适用于画布的 P3 色彩空间 ，以及带有 Lit 的 Web 组件等功能。本文将重点介绍 Adobe Photoshop
矢量图像编辑应用 Boxy SVG 如何使用 Local Font Access API 让用户选择他们喜爱的本地字体
Local Font Access API 提供了一种机制来访问用户本地安装的字体数据，包括名称、样式和字体系列等更高级别的详细信息，以及底层字体文件的原始字节。了解 SVG 编辑应用 Boxy SVG 如何使用此 API。 （本文还提供视频形式。） Boxy SVG 是一款矢量图形编辑器。其主要用例是编辑 SVG 文件格式的绘图，以创建插图、徽标、图标和其他平面设计元素。该插件由波兰开发者 Jarosław Foksa 开发，最初于 2013 年 3 月 15 日发布。Jarosław 运营着
游戏编辑器 Construct 3 如何使用 File System Access API 让用户保存游戏
File System Access API 支持读取、写入和文件管理功能。了解 Construct 3 如何使用此 API。 （本文还提供视频形式。） Construct 3 是由兄弟 Thomas 和 Ashley Gullen 开发的游戏编辑器。在游戏编辑器的第三次迭代中，这两个团队在先前针对 Windows 和 NW.js 构建游戏后，完全 “[押注] 浏览器将成为新的操作系统” 。您可以通过浏览编辑器的 展示版 或完成 导览
LEGO® Education 如何使用网络蓝牙和 Web Serial API
LEGO Education 利用网络的力量来尽可能简化将乐高模型连接到计算机的过程。
图片编辑应用 Photopea 如何使用 File Handling API 允许用户从文件资源管理器打开文件
借助 File Handling API，Web 应用可以将自己注册为应用支持的文件格式的文件处理程序。了解图片编辑应用 Photopea 如何使用此 API。 （本文还提供视频形式。） Photopea 是由 Ivan Kutskir 开发的一款免费在线图片编辑器。Ivan 从 2012 年开始开发这款应用，并维护了一个 博客 ，分享他为 Photopea 添加的主要功能。Photopea 支持 PSD (Adobe Photoshop)、XCF (GIMP)、Sketch (Sketch
案例研究：使用开发者工具更好地进行 Angular 调试
通过使用 Angular 作为测试试点，Chrome 开发者工具和 Angular 团队通力协作，为您提供更好的调试体验。其他框架也可以进行类似的更改。
How Google Search uses speculation rules
Learn about how Google Search used the Speculation Rules API to anonymously prefetch search results to improve user experience