{"slug": "moimikey--awesome-devtools", "title": "Devtools", "description": "\ud83e\udd16 A curated list of in-browser bookmarklets, tools, and resources for modern full-stack software engineers.", "github_url": "https://github.com/moimikey/awesome-devtools", "stars": "366", "tag": "Development Environment", "entry_count": 111, "subcategory_count": 29, "subcategories": [{"name": "Bookmarklets", "parent": "", "entries": [{"name": "artoo.js", "url": "https://medialab.github.io/artoo/", "description": "Client-side scraping utility for the currently loaded uri."}, {"name": "CSS Stress Test", "url": "https://github.com/andyedinborough/stress-css", "description": "JavaScript to test each CSS class on a page and report which are hindering performance.", "stars": "872"}, {"name": "deCSS3", "url": "https://github.com/davatron5000/deCSS3/", "description": "A lil' bookmarklet that will strip out your CSS3 rules and show you how gracefully you're degrading.", "stars": "312"}, {"name": "DOM Monster", "url": "http://mir.aculo.us/dom-monster/", "description": "A cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on."}, {"name": "Make Bookmarklets", "url": "https://make-bookmarklets.com", "description": "Online tool to turn JavaScript into a bookmarklet."}, {"name": "Ramda", "url": "https://github.com/ramda/ramda/blob/master/BOOKMARKLET.md", "description": "Add Ramda to any page!", "stars": "23k"}, {"name": "Rulers Guides", "url": "http://mark-rolich.github.io/RulersGuides.js/", "description": "A JavaScript library which enables Photoshop-like rulers and guides interface on a web page."}, {"name": "Viewport Resizer", "url": "http://lab.maltewassermann.com/viewport-resizer/", "description": "A browser-based tool to test any website's responsiveness."}]}, {"name": "Debugging & Development", "parent": "Tools", "entries": [{"name": "Babel Time Travel", "url": "https://babel-time-travel.boopathi.in/", "description": "Travel in time as babel transpiles."}, {"name": "Beeceptor", "url": "http://beeceptor.com/", "description": "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."}, {"name": "DebugJS", "url": "http://debugjs.com/", "description": "Debug your JavaScript in the browser (lol?)"}, {"name": "endpoints.dev", "url": "https://www.endpoints.dev", "description": "View realtime HTTP requests using a endpoints.dev generated URL."}, {"name": "Hook.io", "url": "https://hook.io/", "description": "Instantly deploy microservices in over 11+ languages (OSS!)"}, {"name": "Hoppscotch", "url": "https://hoppscotch.io", "description": "A lightweight, web-based API development suite."}, {"name": "httpbin", "url": "http://httpbin.org/", "description": "HTTP Request & Response service."}, {"name": "JavaScript Visualizer 9000", "url": "https://www.jsv9000.app", "description": "Loupe-inspired JavaScript execution visualizer"}, {"name": "jsonbin", "url": "https://jsonbin.io/", "description": "Custom, mock JSON API"}, {"name": "JSONPlaceholder", "url": "https://jsonplaceholder.typicode.com", "description": "Free fake API for testing and prototyping."}, {"name": "Loupe", "url": "http://latentflip.com/loupe/", "description": "Similar in goal to SlowmoJS, a JavaScript call stack visualizer."}, {"name": "Mockbin", "url": "http://mockbin.com/", "description": "Generate custom endpoints to test, mock, and track HTTP requests."}, {"name": "RecipeUI", "url": "https://recipeui.com/editor", "description": "Open source Postman alternative with type safety built in."}, {"name": "Reqbin", "url": "https://reqbin.com/", "description": "REST & SOAP API Online Testing Tool"}, {"name": "SlowmoJS", "url": "http://toolness.github.io/slowmo-js/", "description": "Execute JavaScript in slow motion."}]}, {"name": "Deobfuscation & Transformation", "parent": "Tools", "entries": [{"name": "AST Explorer", "url": "http://astexplorer.net/", "description": "Parse JS to an explorable AST tree via acorn, babel, babylon, espree, esprima, recast, shift, and typescript."}, {"name": "Compiler Explorer", "url": "https://godbolt.org", "description": "Run compilers interactively from your web browser and interact with the assembly"}, {"name": "fixmyjs", "url": "http://goatslacker.github.io/fixmyjs.com/", "description": "Automatically fix your JS, driven by JSHint."}, {"name": "JSNice", "url": "http://www.jsnice.org/", "description": "Statistical renaming, type inference and deobfuscation."}, {"name": "JSON ABC", "url": "https://novicelab.org/jsonabc/", "description": "Sorts JSON alphabetically"}, {"name": "Markdown to HTML", "url": "https://markdowntohtml.com", "description": "Paste or type your markdown and see it rendered as HTML. Download or copy the resulting HTML."}, {"name": "Markdown Tools", "url": "https://markdowntools.com", "description": "Tools to convert Markdown to/from a number of formats. E.g. Html to Markdown, or a CSV to a Markdown table."}, {"name": "SWC", "url": "https://swc.rs/playground", "description": "compile JS/TS files using modern JS features and outputs valid code that is supported by all major browsers."}]}, {"name": "Diagramming & Scratch", "parent": "Tools", "entries": [{"name": "asciiflow", "url": "https://asciiflow.com", "description": "ASCIIFlow is a client-side only web based application for drawing ASCII diagrams."}, {"name": "dbdiagram", "url": "https://dbdiagram.io/d", "description": "Draw Entity-Relationship Diagrams, Painlessly."}, {"name": "dot-to-ascii", "url": "https://dot-to-ascii.ggerganov.com", "description": "Graphviz to ASCII converter using Graph::Easy."}, {"name": "Excalidraw", "url": "https://excalidraw.com", "description": "Virtual whiteboard."}, {"name": "JSON-to-Chart", "url": "https://jsontochart.com", "description": "Create beautiful charts from JSON data in your browser."}, {"name": "nomnoml", "url": "https://nomnoml.com", "description": "A tool for drawing UML diagrams based on a simple syntax."}, {"name": "Sequence Diagram", "url": "https://sequencediagram.org", "description": "An online tool / software for creating UML sequence diagrams."}]}, {"name": "Diffing", "parent": "Tools", "entries": [{"name": "JSONDiffPatch", "url": "https://benjamine.github.io/jsondiffpatch/demo/index.html", "description": "Run a visual or non-visual diff on two JSON blobs."}]}, {"name": "File Sharing", "parent": "Tools", "entries": [{"name": "file.io", "url": "https://www.file.io/", "description": "Ephemeral file sharing. Convenient, anonymous and secure."}, {"name": "instant.io", "url": "https://instant.io/", "description": "Instant file transfer/sharing over WebTorrent"}]}, {"name": "Generators", "parent": "Tools", "entries": [{"name": "JSONGenerator", "url": "https://www.jsongenerator.io", "description": "Create random JSON data"}, {"name": "Pure CSS Apple", "url": "http://purecssapple.com/", "description": "Pure CSS Apple devices with scrollable media"}, {"name": "Readme", "url": "https://nxt-readme.vercel.app", "description": "All in one tool to quickly generate a readme for your project or github profile."}]}, {"name": "Image", "parent": "Tools", "entries": [{"name": "Favic-o-matic", "url": "http://www.favicomatic.com/", "description": "Literally generates every favicon neccessary + markup."}, {"name": "JPEG.rocks", "url": "https://jpeg.rocks", "description": "Privacy-aware JPEG optimizer"}, {"name": "PicPerf", "url": "https://www.picperf.dev/analyze", "description": "Boost web performance with image optimization. Analyze and improve `<img>` tags, `<style>` tags, and inline CSS."}, {"name": "PNG-to-SVG", "url": "https://png-to-svg.com", "description": "Free conversion from JPG or PNG images To vectorized SVG."}, {"name": "Squoosh", "url": "https://squoosh.app/", "description": "Compress and optimize images in browser"}, {"name": "SVG-to-backgroundImage", "url": "https://csspro.com/svg-to-background-image-css", "description": "Convert your SVG files into CSS url (data URIs) by encoding it."}, {"name": "SVGOMG", "url": "https://jakearchibald.github.io/svgomg/", "description": "Try [SVGO (\u2b5020k)](https://github.com/svg/svgo) (SVG Optimizer) in the browser!"}]}, {"name": "Performance", "parent": "Tools", "entries": [{"name": "Perflink", "url": "https://perf.link", "description": "JS benchmarks"}]}, {"name": "Playgrounds", "parent": "Tools", "entries": [{"name": "codepen", "url": "http://codepen.io/", "description": "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."}, {"name": "CodeSandbox", "url": "https://codesandbox.io/s/new", "description": "Online code editor and sandbox"}, {"name": "Ellie", "url": "https://ellie-app.com/", "description": "The Elm Live Editor"}, {"name": "ES.nextBin", "url": "http://esnextb.in/", "description": "Like RequireBin but ES2015"}, {"name": "JSBin", "url": "http://jsbin.com/", "description": "JS/Coffee/Babel/Babel/Live/JSX/HTML/Markdown/Pug/CSS/Stylus/LESS/Sass"}, {"name": "JSFiddle", "url": "http://jsfiddle.net/", "description": "JS/ES3/Coffee/HTML/CSS/Sass"}, {"name": "JSONCrack", "url": "https://jsoncrack.com/editor", "description": "Visualize CSV/JSON/TOML/XML/YAML instantly into graphs."}, {"name": "Markmap", "url": "https://markmap.js.org/repl", "description": "Visualize markdown as a feature-rich mindmaps."}, {"name": "playcode.io", "url": "https://playcode.io/", "description": "JS/Typescript/Coffee/LiveScript/Babel/CSS/Sass/LESS/Stylus/HTML/Pug"}]}, {"name": "Regex", "parent": "Tools", "entries": [{"name": "Debuggex", "url": "https://www.debuggex.com/", "description": "PCRE/Python/JavaScript regex matching."}, {"name": "ExtendsClass", "url": "https://extendsclass.com/regex-tester.html", "description": "PHP/Python/Ruby/JavaScript regex matching."}, {"name": "reFiddle", "url": "http://refiddle.com/", "description": "Ruby/.NET/JavaScript regex matching."}, {"name": "RegExplained", "url": "http://leaverou.github.io/regexplained/", "description": "JavaScript regex matching."}, {"name": "Regexr", "url": "http://www.regexr.com/", "description": "JavaScript regex matching."}, {"name": "Regulex", "url": "https://jex.im/regulex", "description": "JavaScript Regular Expression Visualizer."}, {"name": "Softwium", "url": "https://softwium.com/regex-explainer/", "description": "Regular Expression Visualizer."}]}, {"name": "Scripting & Copy/Paste", "parent": "Tools", "entries": [{"name": "crontab guru", "url": "https://crontab.guru/", "description": "The quick and simple editor for cron schedule expressions by Cronitor"}, {"name": "CSS Scan - Box Shadows", "url": "https://getcssscan.com/css-box-shadow-examples", "description": "CSS, Ready to use, click to copy"}, {"name": "CSS Scan - Buttons", "url": "https://getcssscan.com/css-buttons-examples", "description": "CSS, Ready to use, click to copy"}, {"name": "CSS Scan - Checkboxes", "url": "https://getcssscan.com/css-checkboxes-examples", "description": "CSS, Ready to use, click to copy"}, {"name": "CSS Scan - Shapes", "url": "https://getcssscan.com/css-shapes", "description": "CSS, Ready to use, click to copy"}, {"name": "Devtools Tips", "url": "https://devtoolstips.org", "description": "Copy-and-paste'able collection of useful cross-browser DevTools snippets."}]}, {"name": "Transformation", "parent": "Tools", "entries": [{"name": "Babel REPL", "url": "https://babeljs.io/en/repl", "description": "The compiler for next generation JavaScript"}, {"name": "Sassmeister", "url": "http://sassmeister.com/", "description": "Sass/Scss <-> CSS"}, {"name": "Terser", "url": "https://try.terser.org/", "description": "JavaScript parser, mangler and compressor toolkit for ES6+"}, {"name": "WebAssembly Explorer", "url": "https://mbebenita.github.io/WasmExplorer/", "description": "translate C/C++ to WebAssembly, and then see the machine code generated by the browser."}]}, {"name": "Presentation", "parent": "Tools", "entries": [{"name": "snapify", "url": "https://snappify.com/editor", "description": "Snappify enables you to create stunning presentations, with first-class support for code snippets."}]}, {"name": "Browser Information", "parent": "Resources", "entries": [{"name": "What's My Browser?", "url": "http://www.whatsmybrowser.org/", "description": ""}]}, {"name": "Cheat Sheets", "parent": "Resources", "entries": [{"name": "OWASP Cheat Sheet Series", "url": "https://cheatsheetseries.owasp.org", "description": "A concise collection of high value information on specific application security topics."}]}, {"name": "Compatability", "parent": "Resources", "entries": [{"name": "HTML5", "url": "http://html5please.com/", "description": ""}]}, {"name": "CSS Inliners", "parent": "Resources", "entries": [{"name": "Campaign Monitor", "url": "http://inliner.cm/", "description": ""}, {"name": "MailChimp", "url": "http://templates.mailchimp.com/resources/inline-css/", "description": ""}]}, {"name": "CSS Post Processors", "parent": "Resources", "entries": [{"name": "Pleeease", "url": "http://pleeease.io/play/", "description": ""}]}, {"name": "Documentation", "parent": "Resources", "entries": [{"name": "DevDocs", "url": "http://devdocs.io/", "description": "Basically [Dash](https://kapeli.com/dash) but a web application and FREE."}, {"name": "ECMAScript Proposal Stages", "url": "https://www.proposals.es/stages", "description": ""}, {"name": "ExplainShell", "url": "https://explainshell.com/explain?cmd=ls+-lisah", "description": "A better way to read MAN pages."}]}, {"name": "Easings & Animations", "parent": "Resources", "entries": [{"name": "Ceaser", "url": "http://matthewlein.com/ceaser/", "description": ""}]}, {"name": "Glyphs & Icons", "parent": "Resources", "entries": [{"name": "Copy/Paste Character", "url": "http://copypastecharacter.com/", "description": ""}, {"name": "Entity Lookup", "url": "http://entity-lookup.leftlogic.com/", "description": ""}, {"name": "Ic\u00f4nes", "url": "https://icones.js.org/collection/all", "description": "Over 150,000 open source vector icons."}, {"name": "Icon Finder", "url": "https://www.iconfinder.com/", "description": ""}, {"name": "Icon Monstr", "url": "http://iconmonstr.com/", "description": ""}, {"name": "Tabler Icons", "url": "https://tablericons.com/", "description": ""}]}, {"name": "Open JSON & Feeds", "parent": "Resources", "entries": [{"name": "FillText", "url": "http://filltext.com/", "description": "Generate JSON datasets for testing or demonstration purposes"}, {"name": "Zippopotamus", "url": "http://zippopotam.us/", "description": "Zipcode to Geo"}]}, {"name": "Proxy as a Service", "parent": "Resources", "entries": [{"name": "CORS Anywhere", "url": "https://cors-anywhere.herokuapp.com/", "description": "Proxies any HTTP request through a CORS enabled environment."}]}, {"name": "Responsiveness", "parent": "Resources", "entries": [{"name": "Responsive Patterns", "url": "http://bradfrost.github.io/this-is-responsive/patterns.html", "description": ""}]}, {"name": "Validation & Parsers", "parent": "Resources", "entries": [{"name": "numverify", "url": "https://numverify.com/", "description": "Validate phone numbers from over 200 countries."}, {"name": "CSP Evaluator", "url": "https://csp-evaluator.withgoogle.com", "description": "Evaluate CSP rules"}, {"name": "Ada URL Parser", "url": "https://playground.ada-url.com/?url=torrent://blog/post/1?source|rest=rss", "description": "WHATWG-compliant and fast URL parser written in modern C++, online."}]}, {"name": "SSL", "parent": "Security", "entries": [{"name": "GetHTTPSForFree!", "url": "https://gethttpsforfree.com/", "description": "Genuinely FREE SSL certificates (courtesy of [Let's Encrypt](https://letsencrypt.org/))"}, {"name": "Self-Signed Certificate Generator", "url": "http://selfsignedcertificate.com/", "description": "A self-signed certificate generator."}]}, {"name": "Test", "parent": "Security", "entries": [{"name": "HSTS Preload", "url": "https://hstspreload.org", "description": "Check HSTS preload status and elibility."}, {"name": "Mozilla Observatory", "url": "https://observatory.mozilla.org", "description": "A set of tools to analyze your website and inform you if you are utilizing the many available methods to secure it."}, {"name": "Security Headers by Probely", "url": "https://securityheaders.com/?q=https%3A%2F%2Fsecurityheaders.com", "description": "An easy to use tool designed to help you better deploy and understand modern security features that are available for your website."}, {"name": "Web Check", "url": "https://web-check.xyz", "description": "All-in-one OSINT tool for analysing any website."}]}, {"name": "Swag", "parent": "The Outside World", "entries": [{"name": "DevStickers", "url": "http://devstickers.com/", "description": ""}, {"name": "DevSwag", "url": "http://devswag.com/", "description": ""}, {"name": "StickerMule", "url": "https://www.stickermule.com/marketplace/collections/open-source-stickers/", "description": ""}]}], "name": ""}