🦆 ware (Duckware)

Browser Extension

TL;DR: Duckware is a QA and developers dream. It records events happening on a webpage, ranging from clicks to websocket data and network requests and allows packaging it up with timestamped screen recordings to send over to developers to help hunt bugs.

Duckware is a new and evolving project for me, so this page should be considered “Under Construction” as new features get built out and the extension gets more polish.

Currently Duckware:

Logs network (including websocket frames) requests
- It’ll capture JSON request/response bodies
Logs user interactions with the recording webpage
- Clicks, keyboard events, navigations
Logs console messages from the webpage
Allows you to record multiple screen captures per session
Saves the log and all screen captures into a zip that can be passed to another Duckware user

In Progress Features:

Logging Worker and window.postMessage/onMessage events
Better control over the screen capture, including audio muting
Arbitrary file upload
Loading/viewing reports generated by another Duckware user
- Including play back of recorded user interactions

Screenshots

Starting a screen capture enables additional controls in the log UI

Technology

Svelte, Typescript, Daisy UI/Tailwind CSS all bundled together with Vite.js

Neat Details

Like Broom did before it, Duckware pushed the boundaries for my RPC framework and was even responsible for some bugfixes and better support in Broom!
Duckware is my first foray into the media APIs in the browser