JavaScript Viewer

A vendor drops a minified bundle on your desk. You need the shape of the file before you run anything. Paste the source here, read the highlighted syntax, skim the outline, and jump to a function by line.

Source

Paste or type JavaScript. Updates run on every pause in typing.

Lines
0
Characters
0
Functions
0
Variables
0
Comments
0
Classes
0

Outline

Click a row to jump the cursor. Names come from line scans, not an AST.

Paste source to build the outline.

A minified bundle still has a shape

JavaScript Viewer is for reading source before you execute anything. Syntax highlighting from Ace separates keywords, strings, and calls so your eyes find structure in a wall of text. The outline lists function declarations, arrow bindings, class blocks, and top-level variables with a line number beside each name.

You are not debugging runtime behavior here. You are orienting yourself inside a file someone else wrote, or a build artifact you did not author.

Limitation

The outline uses regular expressions on each line, not a full ECMAScript parser. Minified one-line files produce one crowded row. Nested arrow functions without a name on the same line stay hidden. Dynamic import(), eval, and string-built code never appear in the tree. For syntax errors, switch to the JavaScript Validator. For execution, use the JavaScript Playground.

Where this sits beside run, lint, and format

Four browser tools on Toolexe cover different moments in a review. Pick the tool for your current task.

ToolBest forDoes not do
JavaScript ViewerSkim structure, jump by line, read countsRun code, report syntax errors, reformat
PlaygroundExecute snippets, read console outputOutline a thousand-line module
ValidatorSyntax errors with line numbersBeautify or rename minified symbols
BeautifierExpand minified code into readable blocksProve the code runs

Typical order on a suspicious script: beautify first if the file is one line, view the outline here, validate syntax, then run a trimmed snippet in the playground.

What the line scanner catches on each line

Each pass walks the source line by line and applies patterns you would write in a quick code review.

Shapes outside those patterns fall through. Examples include immediately invoked function expressions with no assignment, object methods written as shorthand without a class wrapper, exported symbols split across lines, plus generator functions whose name sits on the previous line.

Walk-through on the sample file

Load the built-in sample to see the tree in action. You should see one class row, three method rows indented under the class context, two arrow function rows, one classic function row, and a handful of variable rows at the bottom.

class Calculator {add(a, b) { ... }
multiply(a, b) { ... }}
const fetchData = async (url) => { ... };function processUser(userData) { ... }

Click Calculator in the outline. The editor cursor moves to the class line. Click add to land on the method. The counts below the editor update as you edit, so deleting a function drops the function total within a few hundred milliseconds.

Counts below the editor are estimates

Function totals add three separate regex passes: classic declarations, arrow patterns, and a broad method-shaped regex. A line like if (foo()) { might inflate the function count because the scanner sees parentheses followed by an opening brace.

Character totals include every byte in the editor, including spaces inside strings. Comment totals count // lines and block comments as whole matches, so a ten-line block comment adds one to the comment count, not ten.

None of these numbers replace a linter. They tell you whether a pasted file looks like a handful of helpers or a sprawling module before you commit time to a deeper read.

Nothing leaves your tab

Ace loads from a public CDN for syntax modes. Your source stays in the browser memory only. No upload step exists, so client scripts from a closed project stay on your machine. Clear the editor when you finish if the machine is shared.

For output you want to share, copy the source with the toolbar button, or run the same text through the JavaScript Pretty Print page when you need expanded indentation without leaving the category.

Questions while skimming unfamiliar JS

Practical answers about outline accuracy, file size, and what to open next.

Does the viewer run my JavaScript?

No. Execution belongs on the JavaScript Playground. This page only highlights syntax, lists symbols from line scans, and reports rough counts.

Why does my minified file show almost nothing?

Minifiers collapse declarations onto single lines while renaming symbols to short tokens. The outline still lists what regex sees on each line, though names like a or b carry no meaning. Beautify the file first, then return here for a clearer tree.

How accurate is the function count?

Treat the number as a hint. The scanner counts pattern matches, not semantic functions. Conditionals, object literals, plus method calls sometimes match the same regex as real declarations.

Does the outline understand ES modules?

Only when export or import syntax matches the line patterns. A default export split across lines, or a dynamic import inside a string, will not appear as a named row.

Is my code sent to a server?

No. Parsing, highlighting, and counting run in your browser. Ace loads from a CDN, but your pasted source never uploads.

What file size works well?

Files under a few thousand lines respond instantly on most laptops. Large bundles slow the editor while flooding the outline with variable rows. Split the file or beautify a section instead of pasting the whole artifact.

How do I fix syntax errors I spot while reading?

Copy the snippet into the JavaScript Validator. JSHint reports line-specific messages there. Return to the viewer after fixes if you still need the outline.

Does this page show TypeScript or JSX?

Ace still highlights many tokens, but the outline targets plain JavaScript shapes. Type annotations, JSX tags, and decorator syntax will not classify correctly. Use a TypeScript-aware editor for those dialects.