Skip to main content

Web frontend devtools

Published on in 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 #