/awesome-devtools

🤖 A curated list of in-browser bookmarklets, tools, and resources for modern full-stack software engineers.

Awesome Developer Tools

A curated list of in-browser bookmarklets, tools, and resources for modern full-stack software engineers.

Inspired by the awesome list thing.

Bookmarklets

  • artoo.js - Client-side scraping utility for the currently loaded uri.
  • DOM Monster - A cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on.
  • Make Bookmarklets - Online tool to turn JavaScript into a bookmarklet.
  • Rulers Guides - A JavaScript library which enables Photoshop-like rulers and guides interface on a web page.
  • Viewport Resizer - A browser-based tool to test any website's responsiveness.

Web-based Tools

Debug JavaScript

  • Babel Time Travel - Travel in time as babel transpiles.
  • DebugJS - Debug your JavaScript in the browser (lol?)
  • endpoints.dev - View realtime HTTP requests using a endpoints.dev generated URL.
  • httpbin - HTTP Request & Response service.
  • JavaScript Visualizer 9000 - Loupe-inspired JavaScript execution visualizer
  • JSONBIN.io - Custom, mock JSON API
  • Loupe - Similar in goal to SlowmoJS, a JavaScript call stack visualizer.
  • SlowmoJS - Execute JavaScript in slow motion.

Postman Alternatives

  • Hoppscotch - A lightweight, web-based API development suite.
  • RecipeUI - Open source Postman alternative with type safety built in.
  • Reqbin - REST & SOAP API Online Testing Tool

Diagramming & Scratch

  • asciiflow - ASCIIFlow is a client-side only web based application for drawing ASCII diagrams.
  • dbdiagram - Draw Entity-Relationship Diagrams, Painlessly.
  • dot-to-ascii - Graphviz to ASCII converter using Graph::Easy.
  • Excalidraw - Virtual whiteboard.
  • JSON-to-Chart - Create beautiful charts from JSON data in your browser.
  • JSONCrack - Visualize CSV/JSON/TOML/XML/YAML instantly into graphs.
  • Knotend - A flowchart editor designed for speed through keyboard shortcuts and autolayout.
  • Markmap - Visualize markdown as a feature-rich mindmaps.
  • nomnoml - A tool for drawing UML diagrams based on a simple syntax.
  • Sequence Diagram - An online tool / software for creating UML sequence diagrams.

Diffing

  • Diff Text - Quickly highlight differences in plain text, code, or JSON files.
  • JSONDiffPatch - Run a visual or non-visual diff on two JSON blobs.

Document & Editors

  • README.so - A simple editor to quickly add and customize all the sections you need for your project's readme.

Generators

  • JSONGenerator - Create random JSON data
  • NGINXConfig - The easiest way to configure a performant, secure, and stable NGINX server.
  • Readme - All in one tool to quickly generate a readme for your project or github profile.

Image

  • Clippy - CSS clip-path maker and editor.
  • Favic-o-matic - Literally generates every favicon neccessary + markup.
  • JPEG.rocks - Privacy-aware JPEG optimizer
  • PicPerf - Boost web performance with image optimization. Analyze and improve <img> tags, <style> tags, and inline CSS.
  • PNG-to-SVG - Free conversion from JPG or PNG images To vectorized SVG.
  • Squoosh - Compress and optimize images in browser
  • SVG-to-backgroundImage - Convert your SVG files into CSS url (data URIs) by encoding it.
  • SVGOMG - Try SVGO (SVG Optimizer) in the browser!

Web-based Services

Copy/Paste Scripts & Styles

File Sharing

  • file.io - Ephemeral file sharing. Convenient, anonymous and secure.
  • instant.io - Instant file transfer/sharing over WebTorrent
  • pairdrop - Instant file transfer over your local network (P2P)

Performance

Playgrounds

  • codepen - Social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.
  • CodeSandbox - Online code editor and sandbox
  • Ellie - The Elm Live Editor
  • ES.nextBin - Like RequireBin but ES2015
  • ESM - A fast, smart, & global CDN for modern(es2015+) web development.
  • JSBin - JS/Coffee/Babel/Babel/Live/JSX/HTML/Markdown/Pug/CSS/Stylus/LESS/Sass
  • JSFiddle - JS/ES3/Coffee/HTML/CSS/Sass
  • playcode.io - JS/Typescript/Coffee/LiveScript/Babel/CSS/Sass/LESS/Stylus/HTML/Pug

Regex

  • Debuggex - PCRE/Python/JavaScript regex matching.
  • ExtendsClass - PHP/Python/Ruby/JavaScript regex matching.
  • RegExplained - JavaScript regex matching.
  • Regexr - JavaScript regex matching.
  • Regulex - JavaScript Regular Expression Visualizer.

Transformation

  • AST Explorer - Parse JS to an explorable AST tree via acorn, babel, babylon, espree, esprima, recast, shift, and typescript.
  • Babel REPL - The compiler for next generation JavaScript
  • Compiler Explorer - Run compilers interactively from your web browser and interact with the assembly
  • fixmyjs - Automatically fix your JS, driven by JSHint.
  • JavaScript Deobfuscator - A simple but powerful deobfuscator to remove common JavaScript obfuscation techniques.
  • JSNice - Statistical renaming, type inference and deobfuscation.
  • JSON ABC - Sorts JSON alphabetically
  • Markdown to HTML - Paste or type your markdown and see it rendered as HTML. Download or copy the resulting HTML.
  • Markdown Tools - Tools to convert Markdown to/from a number of formats. E.g. Html to Markdown, or a CSV to a Markdown table.
  • Sucrase - Super-fast Babel alternative
  • SWC - compile JS/TS files using modern JS features and outputs valid code that is supported by all major browsers.
  • Terser - JavaScript parser, mangler and compressor toolkit for ES6+
  • Web2Img - A tool to bundle your web files into a single image, and extract them via Service Worker at runtime.
  • WebAssembly Explorer - translate C/C++ to WebAssembly, and then see the machine code generated by the browser.

Presentation

  • Ray.so - Create beautiful images of code snippets.
  • snapify - Snappify enables you to create stunning presentations, with first-class support for code snippets.

Resources

APIs

Browser Information

CDN

  • JSDelivr - A free CDN for open source projects.
  • Skypack - Load optimized npm packages with no install and no build tools.
  • unpkg - Fast, global content delivery network for everything on npm.

Cheat Sheets

CSS Inliners

Documentation

Easings & Animations

Glyphs & Icons

  • Copy/Paste Character - Copy & Paste emojis and unicode symbols
  • CSS Icons - Copy & Paste icons in CSS + transition animations!
  • Entity Lookup - Enter any character(s) and find its corresponding HTML entity code.
  • heroicons - Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
  • Icon Finder - Millions of graphics for your design projects. Created by independent designers.
  • Icon Monstr - Discover 4000+ free icons in 300+ collections.
  • Icônes - Over 150,000 open source vector icons.
  • Tabler Icons - 4000+ Open source free SVG icons. Highly customizable. No attribution required. For commercial use.

Proxy as a Service

  • CORS Anywhere - Proxies any HTTP request through a CORS enabled environment.

Responsiveness

Validation & Parsers

  • numverify - Validate phone numbers from over 200 countries.
  • CSP Evaluator - Evaluate CSP rules
  • Ada URL Parser - WHATWG-compliant and fast URL parser written in modern C++, online.

Security

SSL

Test

  • HSTS Preload - Check HSTS preload status and elibility.
  • Mozilla Observatory - A set of tools to analyze your website and inform you if you are utilizing the many available methods to secure it.
  • Security Headers by Probely - An easy to use tool designed to help you better deploy and understand modern security features that are available for your website.
  • Web Check - All-in-one OSINT tool for analysing any website.

Notable Mentions

The Outside World

Swag

License

CC0