awesome-devtools
Dev Tool Collection
A curated collection of in-browser tools and resources for modern software development
🤖 A curated list of in-browser bookmarklets, tools, and resources for modern full-stack software engineers.
446 stars
25 watching
38 forks
last commit: 9 days ago
Linked from 4 awesome lists
awesomeawesome-listbookmarkletsbookmarksbrowser-bookmarkletsdev-resourcesdevdocslistregextools
Awesome Developer Tools / 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 | ||
Awesome Developer Tools / 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 | ||
Awesome Developer Tools / Web-based Tools / 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 | ||
Awesome Developer Tools / Web-based Tools / 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 | ||
Awesome Developer Tools / Web-based Tools / 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 | ||
Awesome Developer Tools / Web-based Tools / Document & Editors | |||
README.so | A simple editor to quickly add and customize all the sections you need for your project's readme | ||
Awesome Developer Tools / Web-based Tools / 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 | ||
Mockium | Create test data | ||
Awesome Developer Tools / Web-based Tools / 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 tags, 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 (SVG Optimizer) in the browser! | ||
Awesome Developer Tools / Web-based Services / Copy/Paste Scripts & Styles | |||
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 | ||
transition.css | Drop-in CSS transitions | ||
Awesome Developer Tools / Web-based Services / 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) | ||
Awesome Developer Tools / Web-based Services / Performance | |||
Perflink | JS benchmarks | ||
Awesome Developer Tools / Web-based Services / 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 | ||
Awesome Developer Tools / Web-based Services / 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 | ||
Awesome Developer Tools / Web-based Services / 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 | ||
Awesome Developer Tools / Web-based Services / Presentation | |||
Ray.so | Create beautiful images of code snippets | ||
snapify | Snappify enables you to create stunning presentations, with first-class support for code snippets | ||
Awesome Developer Tools / Resources / APIs | |||
FillText | Generate JSON datasets for testing or demonstration purposes | ||
JSONPlaceholder | Free fake API for testing and prototyping | ||
Zippopotamus | Zipcode to Geo | ||
Awesome Developer Tools / Resources / Browser Information | |||
What's My Browser? | |||
Awesome Developer Tools / Resources / 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 | ||
Awesome Developer Tools / Resources / Cheat Sheets | |||
OWASP Cheat Sheet Series | A concise collection of high value information on specific application security topics | ||
Awesome Developer Tools / Resources / CSS Inliners | |||
Campaign Monitor | |||
MailChimp | |||
Awesome Developer Tools / Resources / Documentation | |||
DevDocs | Basically but a web application and FREE | ||
ECMAScript Proposal Stages | |||
ExplainShell | A better way to read MAN pages | ||
Awesome Developer Tools / Resources / Easings & Animations | |||
Ceaser | |||
Awesome Developer Tools / Resources / 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 | ||
Awesome Developer Tools / Resources / Proxy as a Service | |||
CORS Anywhere | Proxies any HTTP request through a CORS enabled environment | ||
Awesome Developer Tools / Resources / Responsiveness | |||
Responsive Patterns | |||
Awesome Developer Tools / Resources / 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 | ||
Pythonium | Validate Python code | ||
Awesome Developer Tools / Security / SSL | |||
Self-Signed Certificate Generator | A self-signed certificate generator | ||
Mozilla SSL Configuration Generator | SSL configuration generator for various server software and platforms | ||
Awesome Developer Tools / Security / 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 | ||
Awesome Developer Tools / Notable Mentions | |||
ASCII Silhouettify | Convert images into ANSI-escaped color ASCII art | ||
Octopus | Lightning-fast visual sitemap builder & website planner | ||
Type Fluidity | Fluid typography value generator | ||
TypeScriptToLua | TypeScript to Lua | ||
Awesome Developer Tools / The Outside World / Swag | |||
DevSwag | |||
DevSwag | |||
StickerMule |