1 line
No EOL
16 KiB
JSON
1 line
No EOL
16 KiB
JSON
{"slug": "ChromeDevTools--awesome-chrome-devtools", "title": "Chrome Devtools", "description": "Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem", "github_url": "https://github.com/ChromeDevTools/awesome-chrome-devtools", "stars": "6.9K", "tag": "Front-End Development", "entry_count": 76, "subcategory_count": 18, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "Learning", "url": "#learning", "description": ""}, {"name": "DevTools tooling and ecosystem", "url": "#devtools-tooling-and-ecosystem", "description": ""}, {"name": "Chrome DevTools Protocol", "url": "#chrome-devtools-protocol", "description": ""}, {"name": "Using DevTools frontend with other platforms", "url": "#using-devtools-frontend-with-other-platforms", "description": ""}, {"name": "Applications", "url": "#applications", "description": ""}, {"name": "DevTools Extensions", "url": "#devtools-extensions", "description": ""}, {"name": "Alumni", "url": "#alumni", "description": ""}, {"name": "Dev Tips", "url": "https://umaar.com/dev-tips/", "description": "Large collection of tips as animated gifs."}, {"name": "DevTools Tips", "url": "https://devtoolstips.org/", "description": "Collection of illustrated tips as mini tutorials."}, {"name": "Can I DevTools?", "url": "https://www.canidev.tools/", "description": "Various workflows, documented. Also a weekly tips & tricks [newsletter](https://canidevtools.substack.com/)."}, {"name": "Web cheatcodes", "url": "https://codepo8.github.io/web-cheatcodes/", "description": "Browser developer tools for non-developers."}, {"name": "Dear Console", "url": "https://codepo8.github.io/dearconsole", "description": "A collection of snippets to use in the browser console."}, {"name": "Chrome Secret Menus", "url": "https://github.com/sparkyrider/chrome-secret-menus", "description": "Comprehensive guide to internal pages and diagnostic tools in Chrome.", "stars": "63"}, {"name": "Front-end Debugging Tools Handbook", "url": "https://github.com/lala-hakobyan/front-end-debugging-handbook", "description": "Practical guide to mastering front-end debugging tools, from Chrome DevTools and framework extensions to AI-enhanced IDE debugging.", "stars": "40"}]}, {"name": "Object formatting", "parent": "DevTools tooling and ecosystem", "entries": [{"name": "immutable-devtools", "url": "https://github.com/andrewdavey/immutable-devtools", "description": "Custom formatter for Immutable-js values.", "stars": "671"}]}, {"name": "Network Inspection", "parent": "DevTools tooling and ecosystem", "entries": [{"name": "betwixt", "url": "https://github.com/kdzwinel/betwixt", "description": "System level network proxy, providing inspection via Network panel.", "stars": "4.6k"}, {"name": "Weer", "url": "https://weerdbg.com/", "description": "A HTTP protocol debugger **(closed source)**"}]}, {"name": "CPU profile", "parent": "DevTools tooling and ecosystem", "entries": [{"name": "call-trace", "url": "https://github.com/brendankenny/call-trace", "description": "Can instrument your JS with hooks, and then generate a `.cpuprofile` of the of the complete (non-sampled) execution. View either time or call counts.", "stars": "43"}, {"name": "cpuprofilify", "url": "https://github.com/thlorenz/cpuprofilify", "description": "Converts output of various profiling/sampling tools to the `.cpuprofile` format.", "stars": "169"}, {"name": "Wishbone Python framework", "url": "https://wishbone.readthedocs.io/en/latest/misc/profiling.html", "description": "Profiling data can export as `.cpuprofile`."}]}, {"name": "Multimedia", "parent": "DevTools tooling and ecosystem", "entries": [{"name": "snapline", "url": "https://github.com/pmdartus/snapline", "description": "Converts timeline screenshots to gif.", "stars": "401"}]}, {"name": "Timeline, Tracing & Profiling", "parent": "DevTools tooling and ecosystem", "entries": [{"name": "DevTools Timeline Viewer", "url": "https://chromedevtools.github.io/timeline-viewer/", "description": "Share URLs of your timeline recordings."}]}, {"name": "Chrome Debugger integration with Editors", "parent": "DevTools tooling and ecosystem", "entries": [{"name": "VS Code - Debugger for Chrome", "url": "https://github.com/Microsoft/vscode-chrome-debug/", "description": "Breakpoint debugging in VS Code.", "stars": "2.2k"}, {"name": "VS Code - Elements for Microsoft Edge", "url": "https://github.com/microsoft/vscode-edge-devtools", "description": "Elements panel inside VS Code.", "stars": "809"}, {"name": "ChromeREPL", "url": "https://github.com/acarabott/ChromeREPL", "description": "Within Sublime Text, use the Chrome console.", "stars": "356"}, {"name": "Sublime Web Inspector", "url": "http://sokolovstas.github.io/SublimeWebInspector/", "description": "JavaScript Breakpoint debugging right in Sublime Text."}, {"name": "WebStorm/JetBrains Chrome Extension", "url": "https://www.jetbrains.com/help/webstorm/2017.1/configuring-javascript-debugger-and-jetbrains-chrome-extension.html", "description": "The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live."}, {"name": "ChromeDevTools/devtools-protocol", "url": "https://github.com/chromedevtools/devtools-protocol", "description": "**Canonical location of the protocol JSON**. Issue tracker for protocol bugs. TypeScript types.", "stars": "1.5k"}, {"name": "DevTools Protocol API Docs", "url": "https://chromedevtools.github.io/devtools-protocol/", "description": "Easy browsable UI for exploring the protocol's domains, methods and events."}]}, {"name": "Developing with the protocol", "parent": "Chrome DevTools Protocol", "entries": [{"name": "chrome-remote-interface Wiki", "url": "https://github.com/cyrus-and/chrome-remote-interface/wiki", "description": "Many useful recipes.", "stars": "4.5k"}, {"name": "Chrome Protocol Proxy", "url": "https://github.com/wendigo/chrome-protocol-proxy", "description": "Tool for debugging clients using devtools protocol.", "stars": "247"}]}, {"name": "The big two automation libraries", "parent": "Chrome DevTools Protocol", "entries": [{"name": "Puppeteer", "url": "https://github.com/GoogleChrome/puppeteer/", "description": "Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also [awesome-puppeteer (\u2b502.5k)](https://github.com/transitive-bullshit/awesome-puppeteer).", "stars": "94k"}, {"name": "Playwright", "url": "https://github.com/microsoft/playwright", "description": "Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also [awesome-playwright (\u2b501.4k)](https://github.com/mxschmitt/awesome-playwright).", "stars": "85k"}]}, {"name": "Libraries for driving the protocol (or a layer above)", "parent": "Chrome DevTools Protocol", "entries": []}, {"name": "Browser Adapters", "parent": "Chrome DevTools Protocol", "entries": [{"name": "devtools-remote-debugger", "url": "https://github.com/Nice-PLQ/devtools-remote-debugger", "description": "Use devtools against a webpage; a CDP agent implemeted in client-side JS.", "stars": "411"}, {"name": "Inspect", "url": "https://inspect.dev/", "description": "Use devtools against iOS and Android, easily. Browser and Webviews. **(closed source)**"}, {"name": "Facebook Stetho", "url": "https://github.com/facebook/stetho", "description": "Native Android debugging with Chrome DevTools.", "stars": "13k"}, {"name": "j2v8-debugger", "url": "https://github.com/AlexTrotsenko/j2v8-debugger", "description": "Debugging JavaScript running in [J2V8 (\u2b502.6k)](https://github.com/eclipsesource/J2V8) with Chrome DevTools.", "stars": "94"}, {"name": "Dirac", "url": "https://github.com/binaryage/dirac", "description": "Debugging of ClojsureScript.", "stars": "772"}, {"name": "PonyDebugger", "url": "https://github.com/square/PonyDebugger", "description": "Remote network and data debugging iOS apps with Chrome DevTools.", "stars": "5.9k"}, {"name": "ndb", "url": "https://github.com/GoogleChromeLabs/ndb", "description": "An improved Node.js debugging experience with the DevTools Frontend.", "stars": "11k"}, {"name": "Debugging Node.js with Chrome DevTools", "url": "https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27", "description": "Guide on using the full debugging and profiling support in Node v6.3+."}, {"name": "thetool", "url": "https://github.com/sfninja/thetool", "description": "CPU, memory, coverage, type profiling with Node.", "stars": "223"}, {"name": "chrome-devtools-frontend", "url": "https://www.npmjs.com/package/chrome-devtools-frontend", "description": "Mirror of the frontend that ships in Chrome."}, {"name": "ruby/debug", "url": "https://github.com/ruby/debug", "description": "Debugging functionality for Ruby.", "stars": "1.3k"}]}, {"name": "Browsers", "parent": "Applications", "entries": [{"name": "BrowserBox", "url": "https://github.com/BrowserBox/BrowserBox", "description": "Embed Chrome in a web page, largely powered by DevTools and supporting multiuser browsing, remote DevTools, audio, and documents like `.docx`, `.pdf`, and more.", "stars": "3.8k"}, {"name": "Puppetromium", "url": "https://github.com/dosyago/puppetromium", "description": "A proof-of-concept web browser built with Puppeteer, written in Node.js, HTML and CSS, with 0% client-side JavaScript.", "stars": "62"}]}, {"name": "Web Archivers and Indexers", "parent": "Applications", "entries": [{"name": "dn", "url": "https://github.com/dosyago/dn", "description": "Archive and index pages you browse for offline viewing and search, implemented using the `Fetch` domain's interceptions, and works with any Chromium-based browser.", "stars": "3.9k"}]}, {"name": "Accessibility (A11y)", "parent": "DevTools Extensions", "entries": [{"name": "Chromelens", "url": "https://chromewebstore.google.com/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd", "description": "See how your web app will look to people with different types of vision and the path users will travel when tabbing through your page."}]}, {"name": "Workflow", "parent": "DevTools Extensions", "entries": [{"name": "Clockwork", "url": "https://chromewebstore.google.com/detail/clockwork/dmggabnehkmmfmdffgajcflpdjlnoemp?hl=en", "description": "View PHP application profiling data."}, {"name": "Emulated Device Lab", "url": "https://chromewebstore.google.com/detail/emulated-device-lab/oaonfodocibcdobdeelbbfggjombamff", "description": "Experiment with multiple devices being emulated at the same time."}, {"name": "RailsPanel", "url": "https://chromewebstore.google.com/detail/railspanel/gjpfobpafnhjhbajcjgccbbdofdckggg?hl=en-US", "description": "View Ruby on Rails application profiling data."}, {"name": "React Developer Tools", "url": "https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi", "description": "Inspect the React component hierarchies."}, {"name": "Ember.js Inspector", "url": "https://chromewebstore.google.com/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi", "description": "Allows you to inspect Ember.js objects in your application."}, {"name": "Vue.js Developer Tools", "url": "https://github.com/vuejs/vue-devtools", "description": "Inspect Vue.js components and manipulate their data.", "stars": "25k"}, {"name": "Angular DevTools", "url": "https://chromewebstore.google.com/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh", "description": "Debugging and Profiling for Angular applications."}, {"name": "Marionette Inspector", "url": "https://chromewebstore.google.com/detail/marionette-inspector/fbgfjlockdhidoaempmjcddibjklhpka", "description": "Inspect a Marionette application's views, events, and live data."}, {"name": "Backbone Debugger", "url": "https://chromewebstore.google.com/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd", "description": "Inspect a Backbone application's views, models, events, and routes."}, {"name": "App Inspector for Sencha", "url": "https://chromewebstore.google.com/detail/app-inspector-for-sencha/pbeapidedgdpniokbedbfbaacglkceae", "description": "Inspect a Sencha ExtJS/Touch application's component tree, data stores, events, and layouts."}, {"name": "Redux Devtools", "url": "https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd", "description": "Inspect Redux with actions history, undo and replay."}, {"name": "Three.js", "url": "https://chromewebstore.google.com/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea/", "description": "Edit any three.js project."}, {"name": "Insight", "url": "https://github.com/3Dparallax/insight/", "description": "A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.", "stars": "918"}, {"name": "BEM devtools", "url": "https://github.com/escaton/bem-chrome-devtools", "description": "Inspect BEM entities expressed in `i-bem` framework.", "stars": "47"}, {"name": "Metal.js Developer Tools", "url": "https://chromewebstore.google.com/detail/metaljs-developer-tools/fagnjmppkokolnbloalifcmcooldhiik", "description": "Inspect the Metal component hierarchies."}, {"name": "Web Component DevTools", "url": "https://chromewebstore.google.com/detail/web-component-devtools/gdniinfdlmmmjpnhgnkmfpffipenjljo", "description": "Inspect, modify and observe Web Components on page."}]}, {"name": "Themes", "parent": "DevTools Extensions", "entries": [{"name": "DevTools Author", "url": "https://chromewebstore.google.com/detail/devtools-author/egfhcfdfnajldliefpdoaojgahefjhhi", "description": "A selection of themes to modify parts of DevTools related to authoring web applications."}, {"name": "Zero Dark Matrix", "url": "https://chromewebstore.google.com/detail/devtools-theme-zero-dark/bomhdjeadceaggdgfoefmpeafkjhegbo", "description": "Dark theme for Chrome Developer Tools."}, {"name": "Material UI Theme", "url": "https://chromewebstore.google.com/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo", "description": "Provides various Material Design inspired themes."}]}, {"name": "Performance", "parent": "DevTools Extensions", "entries": [{"name": "sloth", "url": "https://github.com/denar90/sloth", "description": "Chrome extension allows to enable and save CPU and network throttling for selected tabs.", "stars": "200"}, {"name": "TracerBench", "url": "https://github.com/TracerBench/tracerbench", "description": "A controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.", "stars": "250"}]}, {"name": "Automation", "parent": "DevTools Extensions", "entries": [{"name": "Puppeteer IDE", "url": "https://github.com/gajananpp/puppeteer-ide-extension", "description": "Standalone Puppeteer playground in browser's developer tools.", "stars": "241"}, {"name": "k6 browser", "url": "https://github.com/grafana/xk6-browser", "description": "Browser automation and end-to-end web testing tool that interacts with browsers and collects frontend performance metrics.", "stars": "360"}, {"name": "Remote Debug Gateway", "url": "https://github.com/RemoteDebug/remotedebug-gateway", "description": "Allows you to connect a client to multiple browsers at once.", "stars": "96"}, {"name": "DevTools Backend", "url": "https://github.com/christian-bromann/devtools-backend", "description": "Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.", "stars": "148"}, {"name": "ios-webkit-debug-proxy", "url": "https://github.com/google/ios-webkit-debug-proxy", "description": "Exposes Mobile Safari & UIWebView instances via the CDP.", "stars": "6.2k"}, {"name": "IE Diagnostics Adapter", "url": "https://github.com/Microsoft/IEDiagnosticsAdapter", "description": "Protocol adaptor for Microsoft IE 11 to CDP.", "stars": "572"}, {"name": "go-debugger-devtools", "url": "https://github.com/allada/go-debugger-devtools", "description": "", "stars": "42"}]}], "name": ""} |