/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

  • deCSS3 - A lil' bookmarklet that will strip out your CSS3 rules and show you how gracefully you're degrading.
  • Viewport Resizer - A browser-based tool to test any website's responsiveness.
  • Rulers Guides - A JavaScript library which enables Photoshop-like rulers and guides interface on a web page.
  • DOM Monster - A cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on.
  • CSS Stress Test - JavaScript to test each CSS class on a page and report which are hindering performance.
  • artoo.js - Client-side scraping utility for the currently loaded uri.
  • Ramda - Add Ramda to any page!

Tools

React

  • OverReact - Wireframe React components and download starter files with one click.

Regex

  • Regexr - JavaScript regex matching.
  • Debuggex - PCRE/Python/JavaScript regex matching.
  • reFiddle - Ruby/.NET/JavaScript regex matching.
  • RegExplained - JavaScript regex matching.

Deobfuscation/Transformation

  • JSNice - Statistical renaming, type inference and deobfuscation.
  • FESS - Simply expands short-hand CSS property values.
  • fixmyjs - Automatically fix your JS, driven by JSHint.
  • Babel - Transpile and optionally evaluate ES2015 to ES5
  • AST Explorer - Parse JS to an explorable AST tree via acorn, babel, babylon, espree, esprima, recast, shift, and typescript.
  • Lebab - Lebab transpiles your ES5 code to ES2015+

Debugging

  • SlowmoJS - Execute JavaScript in slow motion.
  • Loupe - Similar in goal to SlowmoJS, a JavaScript call stack visualizer.
  • DebugJS - Debug your JavaScript in the browser (lol?)
  • Request Bin - Debug HTTP requests.
  • httpbin - HTTP Request & Response service.
  • Mockbin - Generate custom endpoints to test, mock, and track HTTP requests.
  • Beeceptor - Rule based API mocking service. When rules are matched, a request is mocked, else target endpoint is hit as usual. Create custom endpoints to test and debug rest APIs.
  • Hook.io - Instantly deploy microservices in over 11+ languages (OSS!)

Playgrounds / REPL

  • JSFiddle - JS/ES3/Coffee/HTML/CSS/Sass
  • Sassmeister - Sass/Scss <-> CSS
  • RequireBin - Run/debug your node.js in a sandboxed environment
  • ES.nextBin - Like RequireBin but ES2015
  • WebpackBin - Sandboxed Webpack environment
  • codepen - JS/Coffee/Babel/Live/HTML/Slim/Pug/Markdown/HAML/CSS/Sass/LESS/Stylus
  • JSBin - JS/Coffee/Babel/Babel/Live/JSX/HTML/Markdown/Pug/CSS/Stylus/LESS/Sass
  • VCLFiddle - Sandboxed Varnish Cache
  • Repl.it - Python/Ruby/Scheme/Lua/Java/QBasic/Forth/APL/PHP/Go/Emoticon/BrainFuck/LOLCODE/Unlambda/Bloop/JavaScript/ES6/Move/Kaffeine/CoffeeScript/Roy
  • playcode.io - JS/Typescript/Coffee/LiveScript/Babel/CSS/Sass/LESS/Stylus/HTML/Pug
  • Ellie - The Elm Live Editor

Image

  • SVGOMG - Try SVGO (SVG Optimizer) in the browser!
  • Favic-o-matic - Literally generates every favicon neccessary + markup.

Generators

File Sharing

  • file.io - Ephemeral file sharing. Convenient, anonymous and secure.
  • cURL.io - Share your files from your Terminal
  • transfer.sh - Easy file sharing from the command line

Resources

Browser Information

Open JSON

CSS Inliners

CSS Post Processors

Glyphs & Icons

Compatability

Responsiveness

Easings & Animations

Proxy as a Service

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

Documentation

  • DevDocs - Basically Dash but a web application and FREE.

Security/SSL

The Outside World

Swag

License

CC0