Skip to main content

Web frontend devtools

Tools

A collection of frontend web development tools and resources.

General

  • createapp.dev: A project scaffolding configurator for Webpack/Parcel. You can select the features you need (React, TS, Babel, ESLint, etc.) and it will generate a starter config or project structure without manual setup.
  • astexplorer.net: You can paste JavaScript (or other languages) and inspect the resulting Abstract Syntax Tree in real time. Useful when writing Babel plugins, ESLint rules, or codemods.
  • httpstatuses.com: A quick reference for HTTP status codes with easy to understand explanations of what each code means and when it applies.
  • keycode.info: You can press any key and see the corresponding keyCode, key, code, and which values. Comes in handy when working with keyboard event handlers.
  • bundlephobia.com: You can look up the minified and gzipped size of any npm package and see how it will affect your install time. It also surfaces lighter alternatives if they exist.
  • bundle-buddy.com: You can analyse Webpack/Parcel bundle stats to identify duplicated code across chunks and decide what to split or deduplicate.
  • diffchecker.com: You can compare two blocks of text, code, images, or PDFs side by side and see the differences highlighted.
  • jsonformatter.curiousconcept.com: You can format, validate, and prettify raw JSON to make an unreadable blob easier to read.
  • icomoon.io: An icon library generator, you can pick multiple icons and export a custom icon font or SVG sprite.
  • browserhacks.com: A catalogue of browser specific CSS/JS hacks for targeting rules at particular browsers without relying on feature detection.
  • loremipsum.io: To generate placeholder text for use in prototypes.
  • tiny.photos: An image optimisation service.

Web APIs and browser compatibility

  • caniuse.com: The standard reference for checking browser support across CSS features, JavaScript APIs, and HTML elements, broken down by browser and version.
  • node.green: You can check ECMAScript feature support across Node.js versions, covering the same ground as caniuse but specifically for the server side Node runtime.

CSS

  • specificity.keegan.st: A specificity calculator for CSS selectors. You can paste a selector and get its score broken down by component (IDs, classes, and elements).
  • brumm.af/shadows: An interactive box-shadow editor that lets you layer and adjust multiple shadows and copy the resulting CSS.
  • csstriggers.com: Look up which CSS properties trigger layout, paint, or composite operations in the browser rendering pipeline (useful for writing more performant animations/transitions).
  • webfx.com hex to RGB: Convert colours across notations/formats.

Regex

  • regexr.com: A regex editor with match highlighting. It also offers a syntax reference which comes in handy.
  • regexly.js.org: A regex tester with a visual breakdown of matches.
  • regexper.com: You can convert a regex pattern into a railroad diagram, making the logic of complex expressions easier to follow visually.
  • regex101.com: A regex tester supporting multiple flavours (PCRE, JavaScript, Python, etc.). It has a built in debugger.
  • ihateregex.io: A library of common patterns (emails, URLs, phone numbers, etc.) with visual diagrams.
  • regexpal.com: Another JavaScript regex tester with live match highlighting.

Accessibility

Here are some links to a handful of tools you might find useful when working on and testing web accessibility.

Screen readers

Screen reader plugins

If you are working with NVDA, the Focus Highlight Plugin might come in handy as it provides a way to get a visual indication of the focused item when NVDA is on.

VSCode extensions

Chrome extensions

Bookmarklets

Apps

Useful webapps/websites

Browser-based devtools