Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

Log Timeline Viewer

A single-file HTML/JS app that visualizes log files with timestamps, making it easy to spot slow steps at a glance.

Usage

  1. Open index.html in a browser.
  2. Either:
    • Paste a URL to a log file (e.g. Azure Blob, GitHub Actions logs) and click Load.
    • Click File to load a local log file from disk.

Features

Visual timeline

Lines are separated by spacers whose height is proportional to the time gap between consecutive log entries. Large gaps (slow steps) are immediately visible as tall spaces.

Heat coloring

A colored left border indicates the severity of each gap:

  • Green — under 1 second
  • Yellow — 1-5 seconds
  • Orange — 5-15 seconds
  • Red — over 15 seconds

Click-to-reference

Click any line to set it as a reference point. A new column appears showing the time delta from every line to your reference:

  • Blue = before the reference
  • Purple = after the reference
  • Press Esc or click Clear to remove the reference.

Controls

Control Description
Scale slider Adjusts spacer height (pixels per second)
Max gap Caps spacer height so huge gaps don't dominate the view
Min delta Ignore gaps smaller than this threshold
Collapse fast lines Keeps rapid sequential lines compact
Filter Highlights lines matching the search text

Supported timestamp formats

  • ISO 8601: 2024-01-15T09:30:45.123Z
  • GitHub Actions: 2024-01-15T09:30:45.1234567Z
  • Datetime: 2024-01-15 09:30:45.123
  • Time-only: 09:30:45.123

CORS notes

For remote URLs, the app tries a direct fetch first, then falls back to a CORS proxy. If neither works, download the file and use the File button.

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages