awesome-awesomeness/html/devtools.html

<h1 id="awesome-developer-tools">Awesome Developer Tools</h1>
<blockquote>
<p>A curated list of in-browser <a
href="#bookmarklets">bookmarklets</a>, <a href="#tools">tools</a>, and
<a href="#resources">resources</a> for modern full-stack software
engineers.</p>
</blockquote>
<p>Inspired by the <a
href="https://github.com/sindresorhus/awesome">awesome</a> list
thing.</p>
<h2 id="bookmarklets">Bookmarklets</h2>
<ul>
<li><a href="https://medialab.github.io/artoo/">artoo.js</a> -
Client-side scraping utility for the currently loaded uri.</li>
<li><a href="http://mir.aculo.us/dom-monster/">DOM Monster</a> - A
cross-platform, cross-browser bookmarklet that will analyze the DOM
&amp; other features of the page you’re on.</li>
<li><a href="https://make-bookmarklets.com">Make Bookmarklets</a> -
Online tool to turn JavaScript into a bookmarklet.</li>
<li><a href="http://mark-rolich.github.io/RulersGuides.js/">Rulers
Guides</a> - A JavaScript library which enables Photoshop-like rulers
and guides interface on a web page.</li>
<li><a href="http://lab.maltewassermann.com/viewport-resizer/">Viewport
Resizer</a> - A browser-based tool to test any website’s
responsiveness.</li>
</ul>
<h2 id="web-based-tools">Web-based Tools</h2>
<h3 id="debug-javascript">Debug JavaScript</h3>
<ul>
<li><a href="https://babel-time-travel.boopathi.in/">Babel Time
Travel</a> - Travel in time as babel transpiles.</li>
<li><a href="http://debugjs.com/">DebugJS</a> - Debug your JavaScript in
the browser (lol?)</li>
<li><a href="https://www.endpoints.dev">endpoints.dev</a> - View
realtime HTTP requests using a endpoints.dev generated URL.</li>
<li><a href="http://httpbin.org/">httpbin</a> - HTTP Request &amp;
Response service.</li>
<li><a href="https://www.jsv9000.app">JavaScript Visualizer 9000</a> -
Loupe-inspired JavaScript execution visualizer</li>
<li><a href="https://jsonbin.io/quick-store">JSONBIN.io</a> - Custom,
mock JSON API</li>
<li><a href="http://latentflip.com/loupe/">Loupe</a> - Similar in goal
to SlowmoJS, a JavaScript call stack visualizer.</li>
<li><a href="http://toolness.github.io/slowmo-js/">SlowmoJS</a> -
Execute JavaScript in slow motion.</li>
</ul>
<h3 id="postman-alternatives">Postman Alternatives</h3>
<ul>
<li><a href="https://hoppscotch.io">Hoppscotch</a> - A lightweight,
web-based API development suite.</li>
<li><a href="https://recipeui.com/editor">RecipeUI</a> - Open source
Postman alternative with type safety built in.</li>
<li><a href="https://reqbin.com">Reqbin</a> - REST &amp; SOAP API Online
Testing Tool</li>
</ul>
<h3 id="diagramming-scratch">Diagramming &amp; Scratch</h3>
<ul>
<li><a href="https://asciiflow.com">asciiflow</a> - ASCIIFlow is a
client-side only web based application for drawing ASCII diagrams.</li>
<li><a href="https://dbdiagram.io/d">dbdiagram</a> - Draw
Entity-Relationship Diagrams, Painlessly.</li>
<li><a href="https://dot-to-ascii.ggerganov.com">dot-to-ascii</a> -
Graphviz to ASCII converter using Graph::Easy.</li>
<li><a href="https://excalidraw.com">Excalidraw</a> - Virtual
whiteboard.</li>
<li><a href="https://jsontochart.com">JSON-to-Chart</a> - Create
beautiful charts from JSON data in your browser.</li>
<li><a href="https://jsoncrack.com/editor">JSONCrack</a> - Visualize
CSV/JSON/TOML/XML/YAML instantly into graphs.</li>
<li><a href="https://markmap.js.org/repl">Markmap</a> - Visualize
markdown as a feature-rich mindmaps.</li>
<li><a href="https://nomnoml.com">nomnoml</a> - A tool for drawing UML
diagrams based on a simple syntax.</li>
<li><a href="https://sequencediagram.org">Sequence Diagram</a> - An
online tool / software for creating UML sequence diagrams.</li>
</ul>
<h3 id="diffing">Diffing</h3>
<ul>
<li><a
href="https://benjamine.github.io/jsondiffpatch">JSONDiffPatch</a> - Run
a visual or non-visual diff on two JSON blobs.</li>
</ul>
<h3 id="document-editors">Document &amp; Editors</h3>
<ul>
<li><a href="https://readme.so/editor">README.so</a> - A simple editor
to quickly add and customize all the sections you need for your
project’s readme.</li>
</ul>
<h3 id="generators">Generators</h3>
<ul>
<li><a href="https://www.jsongenerator.io">JSONGenerator</a> - Create
random JSON data</li>
<li><a
href="https://www.digitalocean.com/community/tools/nginx">NGINXConfig</a>
- The easiest way to configure a performant, secure, and stable NGINX
server.</li>
<li><a href="https://nxt-readme.vercel.app">Readme</a> - All in one tool
to quickly generate a readme for your project or github profile.</li>
</ul>
<h3 id="image">Image</h3>
<ul>
<li><a href="https://bennettfeely.com/clippy">Clippy</a> - CSS clip-path
maker and editor.</li>
<li><a href="http://www.favicomatic.com/">Favic-o-matic</a> - Literally
generates every favicon neccessary + markup.</li>
<li><a href="https://jpeg.rocks">JPEG.rocks</a> - Privacy-aware JPEG
optimizer</li>
<li><a href="https://www.picperf.dev/analyze">PicPerf</a> - Boost web
performance with image optimization. Analyze and improve
<code>&lt;img&gt;</code> tags, <code>&lt;style&gt;</code> tags, and
inline CSS.</li>
<li><a href="https://png-to-svg.com">PNG-to-SVG</a> - Free conversion
from JPG or PNG images To vectorized SVG.</li>
<li><a href="https://squoosh.app/">Squoosh</a> - Compress and optimize
images in browser</li>
<li><a
href="https://csspro.com/svg-to-background-image-css">SVG-to-backgroundImage</a>
- Convert your SVG files into CSS url (data URIs) by encoding it.</li>
<li><a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> - Try
<a href="https://github.com/svg/svgo">SVGO</a> (SVG Optimizer) in the
browser!</li>
</ul>
<h2 id="web-based-services">Web-based Services</h2>
<h3 id="copypaste-scripts-styles">Copy/Paste Scripts &amp; Styles</h3>
<ul>
<li><a href="https://crontab.guru/">crontab guru</a> - The quick and
simple editor for cron schedule expressions by Cronitor</li>
<li><a href="https://getcssscan.com/css-box-shadow-examples">CSS Scan -
Box Shadows</a> - CSS, Ready to use, click to copy</li>
<li><a href="https://getcssscan.com/css-buttons-examples">CSS Scan -
Buttons</a> - CSS, Ready to use, click to copy</li>
<li><a href="https://getcssscan.com/css-checkboxes-examples">CSS Scan -
Checkboxes</a> - CSS, Ready to use, click to copy</li>
<li><a href="https://getcssscan.com/css-shapes">CSS Scan - Shapes</a> -
CSS, Ready to use, click to copy</li>
<li><a href="https://devtoolstips.org">Devtools Tips</a> -
Copy-and-paste’able collection of useful cross-browser DevTools
snippets.</li>
<li><a href="https://www.transition.style">transition.css</a> - Drop-in
CSS transitions</li>
</ul>
<h3 id="file-sharing">File Sharing</h3>
<ul>
<li><a href="https://www.file.io">file.io</a> - Ephemeral file sharing.
Convenient, anonymous and secure.</li>
<li><a href="https://instant.io">instant.io</a> - Instant file
transfer/sharing over WebTorrent</li>
<li><a href="https://pairdrop.net">pairdrop</a> - Instant file transfer
over your local network (P2P)</li>
</ul>
<h3 id="performance">Performance</h3>
<ul>
<li><a href="https://perf.link">Perflink</a> - JS benchmarks</li>
</ul>
<h3 id="playgrounds">Playgrounds</h3>
<ul>
<li><a href="http://codepen.io/pen">codepen</a> - 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.</li>
<li><a href="https://codesandbox.io/s/new">CodeSandbox</a> - Online code
editor and sandbox</li>
<li><a href="https://ellie-app.com/">Ellie</a> - The Elm Live
Editor</li>
<li><a href="http://esnextb.in/">ES.nextBin</a> - Like RequireBin but
ES2015</li>
<li><a href="https://code.esm.sh">ESM</a> - A fast, smart, &amp; global
CDN for modern(es2015+) web development.</li>
<li><a href="http://jsbin.com/">JSBin</a> -
JS/Coffee/Babel/Babel/Live/JSX/HTML/Markdown/Pug/CSS/Stylus/LESS/Sass</li>
<li><a href="http://jsfiddle.net/">JSFiddle</a> -
JS/ES3/Coffee/HTML/CSS/Sass</li>
<li><a href="https://playcode.io/new">playcode.io</a> -
JS/Typescript/Coffee/LiveScript/Babel/CSS/Sass/LESS/Stylus/HTML/Pug</li>
</ul>
<h3 id="regex">Regex</h3>
<ul>
<li><a href="https://www.debuggex.com/">Debuggex</a> -
PCRE/Python/JavaScript regex matching.</li>
<li><a
href="https://extendsclass.com/regex-tester.html">ExtendsClass</a> -
PHP/Python/Ruby/JavaScript regex matching.</li>
<li><a href="http://leaverou.github.io/regexplained/">RegExplained</a> -
JavaScript regex matching.</li>
<li><a href="http://www.regexr.com/">Regexr</a> - JavaScript regex
matching.</li>
<li><a href="https://jex.im/regulex">Regulex</a> - JavaScript Regular
Expression Visualizer.</li>
</ul>
<h3 id="transformation">Transformation</h3>
<ul>
<li><a href="http://astexplorer.net/">AST Explorer</a> - Parse JS to an
explorable AST tree via acorn, babel, babylon, espree, esprima, recast,
shift, and typescript.</li>
<li><a href="https://babeljs.io/en/repl">Babel REPL</a> - The compiler
for next generation JavaScript</li>
<li><a href="https://godbolt.org">Compiler Explorer</a> - Run compilers
interactively from your web browser and interact with the assembly</li>
<li><a href="http://goatslacker.github.io/fixmyjs.com/">fixmyjs</a> -
Automatically fix your JS, driven by JSHint.</li>
<li><a href="https://deobfuscate.io">JavaScript Deobfuscator</a> - A
simple but powerful deobfuscator to remove common JavaScript obfuscation
techniques.</li>
<li><a href="http://www.jsnice.org/">JSNice</a> - Statistical renaming,
type inference and deobfuscation.</li>
<li><a href="https://novicelab.org/jsonabc/">JSON ABC</a> - Sorts JSON
alphabetically</li>
<li><a href="https://markdowntohtml.com">Markdown to HTML</a> - Paste or
type your markdown and see it rendered as HTML. Download or copy the
resulting HTML.</li>
<li><a href="https://markdowntools.com">Markdown Tools</a> - Tools to
convert Markdown to/from a number of formats. E.g. Html to Markdown, or
a CSV to a Markdown table.</li>
<li><a href="http://sassmeister.com/">Sassmeister</a> - Sass/Scss
&lt;-&gt; CSS</li>
<li><a href="https://sucrase.io">Sucrase</a> - Super-fast Babel
alternative</li>
<li><a href="https://swc.rs/playground">SWC</a> - compile JS/TS files
using modern JS features and outputs valid code that is supported by all
major browsers.</li>
<li><a href="https://try.terser.org/">Terser</a> - JavaScript parser,
mangler and compressor toolkit for ES6+</li>
<li><a href="https://etherdream.com/web2img">Web2Img</a> - A tool to
bundle your web files into a single image, and extract them via Service
Worker at runtime.</li>
<li><a href="https://mbebenita.github.io/WasmExplorer/">WebAssembly
Explorer</a> - translate C/C++ to WebAssembly, and then see the machine
code generated by the browser.</li>
</ul>
<h3 id="presentation">Presentation</h3>
<ul>
<li><a href="https://ray.so">Ray.so</a> - Create beautiful images of
code snippets.</li>
<li><a href="https://snappify.com/editor">snapify</a> - Snappify enables
you to create stunning presentations, with first-class support for code
snippets.</li>
</ul>
<h2 id="resources">Resources</h2>
<h3 id="apis">APIs</h3>
<ul>
<li><a href="http://filltext.com/">FillText</a> - Generate JSON datasets
for testing or demonstration purposes</li>
<li><a href="https://jsonplaceholder.typicode.com">JSONPlaceholder</a> -
Free fake API for testing and prototyping.</li>
<li><a href="http://zippopotam.us/">Zippopotamus</a> - Zipcode to
Geo</li>
</ul>
<h3 id="browser-information">Browser Information</h3>
<ul>
<li><a href="http://www.whatsmybrowser.org/">What’s My Browser?</a></li>
</ul>
<h3 id="cdn">CDN</h3>
<ul>
<li><a href="https://www.jsdelivr.com">JSDelivr</a> - A free CDN for
open source projects.</li>
<li><a href="https://www.skypack.dev">Skypack</a> - Load optimized npm
packages with no install and no build tools.</li>
<li><a href="https://www.unpkg.com">unpkg</a> - Fast, global content
delivery network for everything on npm.</li>
</ul>
<h3 id="cheat-sheets">Cheat Sheets</h3>
<ul>
<li><a href="https://cheatsheetseries.owasp.org">OWASP Cheat Sheet
Series</a> - A concise collection of high value information on specific
application security topics.</li>
</ul>
<h3 id="css-inliners">CSS Inliners</h3>
<ul>
<li><a
href="https://www.campaignmonitor.com/resources/tools/css-inliner">Campaign
Monitor</a></li>
<li><a
href="http://templates.mailchimp.com/resources/inline-css">MailChimp</a></li>
</ul>
<h3 id="documentation">Documentation</h3>
<ul>
<li><a href="http://devdocs.io/">DevDocs</a> - Basically <a
href="https://kapeli.com/dash">Dash</a> but a web application and
FREE.</li>
<li><a href="https://www.proposals.es/stages">ECMAScript Proposal
Stages</a></li>
<li><a
href="https://explainshell.com/explain?cmd=ls+-lisah">ExplainShell</a> -
A better way to read MAN pages.</li>
</ul>
<h3 id="easings-animations">Easings &amp; Animations</h3>
<ul>
<li><a href="http://matthewlein.com/ceaser/">Ceaser</a></li>
</ul>
<h3 id="glyphs-icons">Glyphs &amp; Icons</h3>
<ul>
<li><a href="http://copypastecharacter.com">Copy/Paste Character</a> -
Copy &amp; Paste emojis and unicode symbols</li>
<li><a href="https://cssicon.space">CSS Icons</a> - Copy &amp; Paste
icons in CSS + transition animations!</li>
<li><a href="http://entity-lookup.leftlogic.com">Entity Lookup</a> -
Enter any character(s) and find its corresponding HTML entity code.</li>
<li><a href="https://heroicons.com">heroicons</a> - Beautiful
hand-crafted SVG icons, by the makers of Tailwind CSS.</li>
<li><a href="https://www.iconfinder.com">Icon Finder</a> - Millions of
graphics for your design projects. Created by independent
designers.</li>
<li><a href="http://iconmonstr.com">Icon Monstr</a> - Discover 4000+
free icons in 300+ collections.</li>
<li><a href="https://icones.js.org/collection/all">Icônes</a> - Over
150,000 open source vector icons.</li>
<li><a href="https://tablericons.com">Tabler Icons</a> - 4000+ Open
source free SVG icons. Highly customizable. No attribution required. For
commercial use.</li>
</ul>
<h3 id="proxy-as-a-service">Proxy as a Service</h3>
<ul>
<li><a href="https://cors-anywhere.herokuapp.com/">CORS Anywhere</a> -
Proxies any HTTP request through a CORS enabled environment.</li>
</ul>
<h3 id="responsiveness">Responsiveness</h3>
<ul>
<li><a
href="http://bradfrost.github.io/this-is-responsive/patterns.html">Responsive
Patterns</a></li>
</ul>
<h3 id="validation-parsers">Validation &amp; Parsers</h3>
<ul>
<li><a href="https://numverify.com/">numverify</a> - Validate phone
numbers from over 200 countries.</li>
<li><a href="https://csp-evaluator.withgoogle.com">CSP Evaluator</a> -
Evaluate CSP rules</li>
<li><a
href="https://playground.ada-url.com/?url=torrent://blog/post/1?source%7Crest=rss">Ada
URL Parser</a> - WHATWG-compliant and fast URL parser written in modern
C++, online.</li>
</ul>
<h2 id="security">Security</h2>
<h3 id="ssl">SSL</h3>
<ul>
<li><a href="https://gethttpsforfree.com/">GetHTTPSForFree!</a> -
Genuinely FREE SSL certificates (courtesy of <a
href="https://letsencrypt.org/">Let’s Encrypt</a>)</li>
<li><a href="http://selfsignedcertificate.com/">Self-Signed Certificate
Generator</a> - A self-signed certificate generator.</li>
<li><a href="https://ssl-config.mozilla.org">Mozilla SSL Configuration
Generator</a> - SSL configuration generator for various server software
and platforms.</li>
</ul>
<h3 id="test">Test</h3>
<ul>
<li><a href="https://hstspreload.org">HSTS Preload</a> - Check HSTS
preload status and elibility.</li>
<li><a href="https://observatory.mozilla.org">Mozilla Observatory</a> -
A set of tools to analyze your website and inform you if you are
utilizing the many available methods to secure it.</li>
<li><a
href="https://securityheaders.com/?q=https%3A%2F%2Fsecurityheaders.com">Security
Headers by Probely</a> - An easy to use tool designed to help you better
deploy and understand modern security features that are available for
your website.</li>
<li><a href="https://web-check.xyz">Web Check</a> - All-in-one OSINT
tool for analysing any website.</li>
</ul>
<h2 id="the-outside-world">The Outside World</h2>
<h3 id="swag">Swag</h3>
<ul>
<li><a href="http://devswag.com/">DevSwag</a></li>
<li><a href="http://devswag.com/">DevSwag</a></li>
<li><a
href="https://www.stickermule.com/marketplace/collections/open-source-stickers/">StickerMule</a></li>
</ul>
<h2 id="license">License</h2>
<p><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img
src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
alt="CC0" /></a></p>