Trailframe

BROWSER WORKFLOW RECORDER

Show how the
work gets done.

Document a procedure, explain a bug or hand over a task. Record the steps, visible context and network evidence together, then export one clearly named package.

↓ Download Trailframe 2.1.2Installation guide

Chrome 125+ · local only · no account · preview release

Dispatch booking WORKFLOW
  1. 01
    Choose the orderAction · field values · visible page state
  2. 02
    Complete the bookingRequest + response · screenshot checkpoint
  3. 03
    Verify the resultFinal page · observed outcome · coverage
One workflow. One handover.Trailframe__Dispatch-booking__…workflow.zipTimeline · numbered parts · payloads · images

Illustrative example, not an installed capture.

You control the evidence. Workflow mode includes business data. Recognised secrets and private fields are excluded, and screenshot masks are best effort. Review the package before sharing it with an AI or another person.

ONE RECORDING. MANY PRACTICAL USES.

Make browser work easier to explain.

DOCUMENTATION

SOPs & procedures

Record a real task and use its action timeline, notes and Markdown exports to document the process.

TRAINING

Onboarding

Preserve the steps of a browser-based process for employees, customers and new team members.

TROUBLESHOOTING

Clearer bug reports

Keep reproduction steps, screenshots, console errors and relevant requests in one support handover.

QUALITY

Manual QA

Record what you tested, the expected result and the observed outcome for later review.

DEVELOPMENT

API investigations

Inspect failed or slow calls, readable request/response bodies, redirects and stream messages.

COLLABORATION

Team & client handovers

Share the task's goal, sequence, decisions and result as a portable evidence package.

OPERATIONS

Process reviews

Review repeated steps and interruptions before changing the way a task is performed.

AI ASSISTANCE

Documentation & planning

Give an AI recorded reference evidence to help describe a workflow or draft a reviewed automation plan.

INSIDE TRAILFRAME

Review the steps and the evidence.

Actual application interface with fictional demonstration data.

Trailframe workflow timeline with recorded actions, requests and notes
Follow a chronological workflow timeline.
Trailframe network evidence showing a failed booking request and retry
Give troubleshooting and bug reports useful context.

CAPTURE THE PROCEDURE

Enough context to understand each step.

01 / ACTIONS

What the person did

Clicks, field changes, selections, checkboxes, navigation keys, scrolling, submissions and file/clipboard action metadata. Add notes to explain decisions.

02 / CONTEXT

What the page showed

Visible DOM states before and after recorder events, plus changed-page screenshot checkpoints. Capture labels, values, validation and the final visible result.

03 / NETWORK

What the browser exchanged

Requests, redacted readable payloads, responses, errors, timings, redirects, WebSocket text and server-sent events. Unavailable or oversized bodies are labelled.

04 / HANDOVER

Everything recorded, together

One ZIP contains all parts, a chronological timeline, screenshots, HAR files, workflow documents and a coverage report for colleagues, support teams or a receiving AI.

START IN A FEW STEPS

Install in your Chrome profile.

This preview is distributed as an unpacked extension. It is available to download now. Chrome Web Store publication and updates are subject to Google’s review.

Package SHA-256 · Release metadata · Privacy & limits

Updating AK Trace? Export a backup, replace files in the same permanent installation folder, then Reload. This preserves the extension ID and local recordings.

  1. Download and extract the ZIPKeep the extracted folder in a permanent location.
  2. Open chrome://extensionsIn your intended Chrome profile, enable Developer mode.
  3. Choose Load unpackedSelect the extracted folder containing manifest.json. Review Chrome's debugger permission.
  4. Pin Trailframe to the toolbarOpen the task's starting page, name the workflow and its goal, then Start.

RECORD → REVIEW → HAND OVER

Keep the result useful.

1. Do the work

Stay in the chosen tab. Add notes explaining why you made a choice. Pause for excluded intervals; gaps are documented. Chrome shows a debugging banner.

2. Check the evidence

Stop & save, enter the observed outcome, review each part and its images, and inspect Coverage. Remove unsafe screenshots before export.

3. Download full workflow

The name includes task, website, UTC time and a unique ID. Use the archive for documentation, support and handover. An AI can read START-HERE.md to help describe observed steps and missing evidence.

The archive is reference material. Uploading it does not automatically fine-tune a model or give an AI permanent memory. The receiving system determines its training and retention.

HONEST COVERAGE

A browser recording has boundaries.

Included within the selected tab

Attached frames and dedicated workers are observed where Chrome permits. Long recordings rotate into storage parts; the full download includes every part.

Up to twelve hours or approximately 256 MiB of stored evidence per workflow; 500 screenshot checkpoints; 512 KiB per readable body. Browser/library quotas may stop capture sooner. Use a continuation recording for longer work.

Excluded or limited

Other tabs, popup windows, passwords, cookies/tokens, private fields, file contents, video/audio and hidden server state. XML, HTML, scripts and binary bodies are omitted.

Page states cover up to 700 visible elements with text limits. Screenshots show viewports, not video. Before/after phases and request links do not prove application completion or causation.

Validation status: automated recorder, storage, archive and interface checks pass. Installed Chrome recording, real cross-origin frames and DevTools Recorder import still need manual validation. This is a preview for that validation.