Page Assets Navigator
Open an HTML page and see every stylesheet and script it references, one click away — like Dreamweaver's Related Files bar.
Features
- Page Assets view (Explorer): the CSS and JS files referenced by the active HTML page, in page order, grouped into CSS / JS / External.
- One-click open: click opens a preview tab, double-click or
Enter pins it. Right-click for Open to the Side, Reveal in Explorer View and Copy Path.
- Missing files are marked with a warning icon; the tooltip shows the full path that was checked.
- External URLs (CDNs,
//host/…) are listed separately and open in the browser.
- QuickPick:
Ctrl+Alt+R (Cmd+Alt+R on macOS) or the editor title button.
- Back to Source Page:
Ctrl+Alt+B (Cmd+Alt+B) jumps from a related file back to the HTML page.
- CodeLens on line 1 (off by default,
pageAssets.showCodeLens).
The list stays on the last HTML page while you edit its CSS or JS, and refreshes when you save the page or switch to another one.
Requirements
References are located through VS Code's built-in HTML Language Features extension. If it is disabled, the view shows a notice instead of the list.
PHP pages are not supported yet.
Extension Settings
| Setting |
Default |
Description |
pageAssets.enable |
true |
Turn the extension on or off (per folder). |
pageAssets.languages |
["html"] |
Language ids to parse. |
pageAssets.fileTypes |
["css", "js"] |
Reference types to list. |
pageAssets.showExternal |
false |
List CDN and other external URLs. |
pageAssets.showMissing |
true |
List references whose file does not exist. |
pageAssets.showCodeLens |
false |
Show the list as CodeLens on line 1. |
pageAssets.openMode |
"pinned" |
Single-click behavior: preview, pinned, side or single (all assets share one tab beside the page). Double-click always pins. |
pageAssets.groupBy |
"type" |
type (CSS / JS / External) or none (page order). |
pageAssets.rootPaths |
[] |
Folders, relative to the workspace folder, that /-prefixed paths map to, tried in order. |
pageAssets.exclude |
[] |
Glob patterns to hide, matched against the workspace-relative path or full URL. |
pageAssets.maxFileSize |
2048 |
Pages larger than this (KB) only list references inside <head>. |
Example for a site served from htdocs, hiding analytics scripts and the jQuery CDN:
{
"pageAssets.rootPaths": ["htdocs"],
"pageAssets.exclude": ["**/analytics*.js", "https://code.jquery.com/**"],
"pageAssets.openMode": "side"
}
Known Issues
- Template paths such as
{{ asset('a.css') }} cannot be resolved statically and are shown as unresolved, if the HTML link provider reports them at all.
- CSS
@import, server-side includes and PHP pages are planned for later versions.
| |
