Web Tools

Loading…

Thirty-three tools for the parts of a page nobody sees

Every tool here writes a block that goes into a page's head, a server's configuration or a link somebody is about to send, and every one of them is checked against the standard rather than against a fashion. They run as WebAssembly in this browser tab and make no request at all — which is worth saying twice for this group, because half the tools with these names elsewhere work by fetching the address you typed. Nothing here fetches anything: what is described is what you gave it, and each tool says so on its own result.

What a page says about itself comes first: the head from the three facts that matter, both families of link-preview tag at once — including the one whose absence turns a shared card into grey text — structured data nested the way a search engine expects rather than flattened the way a hand-written block usually is, a sitemap with the repeats dropped and the relative addresses named, and two previews that show the same title at the width each engine and each network actually shows. None of those widths is a limit, and the tools say so: the cut is by pixels, and there is no maximum length.

Then addresses. One taken apart and put back together with parameters set or dropped, a query string that survives a key written twice, campaign links lower-cased so that one campaign is one row in a report, a tidier that names which of its seven rules did something, and the mail, telephone and chat links — each with the country code kept, because a number without one works only where it is local. The address obfuscator says plainly that it is a speed bump and not a lock. The redirect map names the loops and the chains before a browser finds them.

Then what the server is told: robots rules with one path tested against them by the longest match, the security contact file with the expiry the standard insists on, a content security policy built or read back with the directive that undoes it named, the CORS pair every browser refuses, a cache header with every directive explained in a line, and Apache and Nginx blocks with a comment above each part. Then blocks of markup — a manifest with the two icon sizes that carry an installation, a responsive image with the attribute pair it usually ships without, an embed with only the permissions the frame needs, a table whose header cells a screen reader can follow, a form with the keyboard each field wants, and every link in a page with the ones that say “click here” pointed out. Last, four things to look up: character references, status codes, media types and a browser's own description of itself.

What a page says about itself

Meta tags
The head of a page, from the three facts it needs, with the missing ones named.

Link preview tags
Both families of tag at once, and the one whose absence turns a card into grey text.

Structured data
A block for a business, an article, a product, an event or a recipe, nested where it should be.

Sitemap builder
A list of addresses as a sitemap, with the repeats dropped and the relative ones named.

How it will be cut
A title and a description at the width each engine and network shows — none of which is a limit.

Share preview
The same card on each network, and the image size each one crops to.

Addresses and links

Address parts
An address taken apart and put back together, with the parameters set or dropped.

Query string
Parameters as a table and back, with a key written twice kept twice.

Campaign links
Tracking parameters on any number of links, lower-cased so that one campaign is one row.

Tidy an address
The tracking parameters, the default port and the dots taken off — and it says which rules did something.

Mail link
A link that opens a mail window with the subject and body already written.

Chat link
A link that opens a conversation without the number being saved first.

Hide an address
An address written so a simple scraper misses it — which it says is a speed bump, not a lock.

Redirect rules
A table of old and new addresses as rules, with the loops and the chains named.

What the server is told

Robots rules
Rules for crawlers, and a test of one path against them by the longest match.

Security contact file
The file that says where to report a vulnerability, with the expiry the standard insists on.

Cross-origin headers
The headers that let another site's page call yours, and the pair every browser refuses.

Cache header
A header for each kind of thing served, with every directive explained in a line.

Apache rules
A block of rules with a comment above each, and the two settings that would loop.

Blocks of markup

Web app manifest
The file that makes a page installable, with the two icon sizes it actually needs.

Responsive image
An image element with a source for every width and format, and the attribute pair it is usually shipped without.

Embed code
A frame with a ratio, a title and only the permissions the embedded page needs.

HTML table
A table from a grid of text, with the header cells marked so a reader can follow them.

HTML form
A form from a list of fields, each with its label, its keyboard and its rules.

Links in a page
Every link in markup or Markdown, with the ones that say "click here" and the ones that go nowhere.

Breakpoint checker
Your breakpoints checked over the whole width range: the widths two rules both cover, the widths none covers, and where real devices land.

Things to look up

Character references
A character found by itself, by name or by number, written for markup, style sheets and code.

Status codes
What a code means and what to do about it, including the pairs that differ in one sentence.

Media types
An extension and a type each find the other, with the header to serve it under.

User agent
A browser's description of itself, read as itself — every one of them claims to be three others.

Questions

Why does nothing here fetch the address?
Because a tool that fetched would need a server of its own, and everything you typed would pass through it — including the addresses of pages that are not published yet, and the credentials some of them carry. These tools are worth less than a fetching one in exactly one way: they cannot tell you whether a link is broken. They are worth more in every other, and they say which they are.
Which tools from the group are missing?
The ones that are a crawler wearing a different hat: a broken-link checker, a page speed test, a mobile-friendliness check, an SSL certificate inspector. Each of those is a fetch, and a fetch is a server. What is here instead is the half of each job that is really a document being read — the links in a page, the headers a policy would set, the certificate paths a configuration needs.
Is the character reference table complete?
No, and it says so. The named references here are the common ones; the full HTML list is over two thousand names, most of which nothing has written since 1999. A numeric reference covers every character there is, works everywhere a name does and in places a name does not, and is what the tool gives you beside the name whenever there is one.
Why does the user agent tool call everything a claim?
Because it is one. A user agent string is a line the browser chooses to send, anything can send any string, and every browser deliberately claims to be three others — which is why the tool reads them in a fixed order and reports the first match that is not borrowed. Treat the answer as what the visitor said, never as what the visitor is.