Awesome Devtools Overview
🤖 A curated list of in-browser bookmarklets, tools, and resources for modern full-stack software engineers.
🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 moimikey/awesome-devtools · ⭐ 366 · 🏷️ Development Environment
Awesome Developer Tools
A curated list of in-browser bookmarklets, tools, and resources for modern full-stack software engineers.
Inspired by the awesome (⭐283k) list thing.
Bookmarklets
- artoo.js - Client-side scraping utility for the currently loaded uri.
- CSS Stress Test (⭐872) - JavaScript to test each CSS class on a page and report which are hindering performance.
- deCSS3 (⭐312) - A lil' bookmarklet that will strip out your CSS3 rules and show you how gracefully you're degrading.
- 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.
- Ramda (⭐23k) - Add Ramda to any page!
- 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.
Tools
Debugging & Development
- Babel Time Travel - Travel in time as babel transpiles.
- 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.
- DebugJS - Debug your JavaScript in the browser (lol?)
- endpoints.dev - View realtime HTTP requests using a endpoints.dev generated URL.
- Hook.io - Instantly deploy microservices in over 11+ languages (OSS!)
- Hoppscotch - A lightweight, web-based API development suite.
- httpbin - HTTP Request & Response service.
- JavaScript Visualizer 9000 - Loupe-inspired JavaScript execution visualizer
- jsonbin - Custom, mock JSON API
- JSONPlaceholder - Free fake API for testing and prototyping.
- Loupe - Similar in goal to SlowmoJS, a JavaScript call stack visualizer.
- Mockbin - Generate custom endpoints to test, mock, and track HTTP requests.
- RecipeUI - Open source Postman alternative with type safety built in.
- Reqbin - REST & SOAP API Online Testing Tool
- SlowmoJS - Execute JavaScript in slow motion.
Deobfuscation & Transformation
- AST Explorer - Parse JS to an explorable AST tree via acorn, babel, babylon, espree, esprima, recast, shift, and typescript.
- Compiler Explorer - Run compilers interactively from your web browser and interact with the assembly
- fixmyjs - Automatically fix your JS, driven by JSHint.
- 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.
- SWC - compile JS/TS files using modern JS features and outputs valid code that is supported by all major browsers.
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.
- nomnoml - A tool for drawing UML diagrams based on a simple syntax.
- Sequence Diagram - An online tool / software for creating UML sequence diagrams.
Diffing
- JSONDiffPatch - Run a visual or non-visual diff on two JSON blobs.
File Sharing
- file.io - Ephemeral file sharing. Convenient, anonymous and secure.
- instant.io - Instant file transfer/sharing over WebTorrent
Generators
- JSONGenerator - Create random JSON data
- Pure CSS Apple - Pure CSS Apple devices with scrollable media
- Readme - All in one tool to quickly generate a readme for your project or github profile.
Image
- 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 (⭐20k) (SVG Optimizer) in the browser!
Performance
- Perflink - JS benchmarks
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
- JSBin - JS/Coffee/Babel/Babel/Live/JSX/HTML/Markdown/Pug/CSS/Stylus/LESS/Sass
- JSFiddle - JS/ES3/Coffee/HTML/CSS/Sass
- JSONCrack - Visualize CSV/JSON/TOML/XML/YAML instantly into graphs.
- Markmap - Visualize markdown as a feature-rich mindmaps.
- 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.
- reFiddle - Ruby/.NET/JavaScript regex matching.
- RegExplained - JavaScript regex matching.
- Regexr - JavaScript regex matching.
- Regulex - JavaScript Regular Expression Visualizer.
- Softwium - Regular Expression Visualizer.
Scripting & Copy/Paste
- crontab guru - The quick and simple editor for cron schedule expressions by Cronitor
- CSS Scan - Box Shadows - CSS, Ready to use, click to copy
- CSS Scan - Buttons - CSS, Ready to use, click to copy
- CSS Scan - Checkboxes - CSS, Ready to use, click to copy
- CSS Scan - Shapes - CSS, Ready to use, click to copy
- Devtools Tips - Copy-and-paste'able collection of useful cross-browser DevTools snippets.
Transformation
- Babel REPL - The compiler for next generation JavaScript
- Sassmeister - Sass/Scss <-> CSS
- Terser - JavaScript parser, mangler and compressor toolkit for ES6+
- WebAssembly Explorer - translate C/C++ to WebAssembly, and then see the machine code generated by the browser.
Presentation
- snapify - Snappify enables you to create stunning presentations, with first-class support for code snippets.
Resources
Browser Information
Cheat Sheets
- OWASP Cheat Sheet Series - A concise collection of high value information on specific application security topics.
Compatability
CSS Inliners
CSS Post Processors
Documentation
- DevDocs - Basically Dash but a web application and FREE.
- ECMAScript Proposal Stages
- ExplainShell - A better way to read MAN pages.
Easings & Animations
Glyphs & Icons
- Copy/Paste Character
- Entity Lookup
- Icônes - Over 150,000 open source vector icons.
- Icon Finder
- Icon Monstr
- Tabler Icons
Open JSON & Feeds
- FillText - Generate JSON datasets for testing or demonstration purposes
- Zippopotamus - Zipcode to Geo
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
- GetHTTPSForFree! - Genuinely FREE SSL certificates (courtesy of Let's Encrypt)
- Self-Signed Certificate Generator - A self-signed certificate generator.
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.
The Outside World
Swag
License
