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