Asset Reference Checker

Find relative asset and link references in HTML and CSS and check them against a file list.

  • Runs locally in your browser
  • No upload required

Try it

References found
3
Missing
1
External
0
File list
provided
Line 1 · src
found — images/logo.png
Line 2 · src
found — /css/app.css
Line 3 · src
missing — images/missing.png

Supported formats

Input
text
Output
number, text

Privacy

Runs entirely in your browser. Your input is never uploaded, stored, or sent to a third party.

Processing
In your browser
Privacy level
Browser only

2 reference(s): 0 missing, 0 external.

How it works

  • Extracted every src/href attribute and every CSS url() reference.
  • Classified each reference as external (scheme, protocol-relative or fragment) or local.
  • Normalised the local path (stripped query/fragment and a leading ./ or /) and matched it against the file list.
  • The file list is a newline/comma separated set of repository paths; with no list the references are reported but marked unchecked.
  • SPA routes, server rewrites and trailing-slash rules are not modelled; a `missing` result means the literal path is absent from your list.

Methodology

  1. Extract src/href attributes and CSS url() references with a global match.
  2. Classify each as external (absolute, protocol-relative, scheme or fragment) or local.
  3. Normalise local paths and compare them to the supplied file set.
  4. Report totals plus the missing and external references with line numbers.

Usage

  1. Paste the HTML or CSS to scan.
  2. Optionally paste the list of files that exist, one per line or comma separated.
  3. Read the missing and external references with their line numbers.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

One broken asset

jsonSelect to copy
{
  "html": "<img src=\"images/logo.png\"><link href=\"styles/app.css\" rel=\"stylesheet\">",
  "files": "images/logo.png\nstyles/app.css"
}

Missing stylesheet

jsonSelect to copy
{
  "html": "<link href=\"../css/main.css\" rel=\"stylesheet\"><img src=\"/img/hero.jpg\">",
  "files": "img/hero.jpg"
}

CSS url() reference

jsonSelect to copy
{
  "html": ".hero { background: url('./bg/hero.webp'); }",
  "files": "bg/hero.webp"
}

Limitations

What counts as a local reference

A reference is local when it has no scheme (`https:`, `data:`, `mailto:`), is not protocol-relative (`//host`) and is not a bare fragment (`#id`). Those are reported as external and never fetched.

Local paths are normalised: a leading `./` or `/` is removed and any `?query` or `#fragment` is stripped, so `app.js?v=3` matches a listed `app.js`.

Frequently asked questions

Why is a reference marked unchecked?
When the file list is empty there is nothing to compare against, so every local reference is listed without a found/missing verdict.
Does it check srcset?
No. It checks the common `src`, `href` and CSS `url()` forms; `srcset` candidates are documented as out of scope.

Sources

  1. HTML Standard: URLs and attributes — WHATWG
  2. MDN Web Docs: url() — MDN