Top 50 Awesome List

ChromeDevTools/awesome-chrome-devtools

Front-End Development  10 days ago  5.2k
Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
View byDAY/WEEK/README
View on Github

Sep 11th

DevTools Extensions

Accessibility (A11y)

  • Chromelens - 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.
  • Aug 15th

    Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • C#/.NET: Puppeteer Sharpstars2.4k - puppeteer port
  • Aug 3rd

    Learning

  • DevTools Tips - Collection of illustrated tips as mini tutorials.
  • Jul 21st

    Learning

  • Can I DevTools? - Various workflows, documented.
  • Chrome DevTools Protocol

    The big two automation libraries

  • Puppeteerstars80k - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also awesome-puppeteerstars1.9k.
  • Playwrightstars42.5k - Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also awesome-playwrightstars265.
  • Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • JavaScript/Node.js: chrome-remote-interfacestars3.8k
  • TypeScript/Node.js: chrome-debugging-clientstars115
  • Typescript/Node.js: Taikostars3.2k
  • Rust: Rust Headless Chromestars1.2k
  • Python: pyppeteerstars2.6k - puppeteer port
  • Ruby: Ferrumstars1.3k - high-level API to control Chrome in Ruby
  • Clojure: cuicstars25 - Providing a high-level API for UI test automation over the DevTools Protocol.
  • PHP: PuPHPeteerstars1.3k - php bridge to node puppeteer
  • Chrome DevTools Protocol

    Browser Adapters

  • Inspect - Use devtools against iOS and Android, easily. Browser and Webviews. (closed source)
  • Using DevTools frontend with other platforms

    Ruby

  • ruby/debugstars762 - Debugging functionality for Ruby.
  • DevTools Extensions

    Workflow

  • Web Component DevTools - Inspect, modify and observe Web Components on page.
  • Alumni

  • Remote Debug Gatewaystars87 - Allows you to connect a client to multiple browsers at once.
  • DevTools Backendstars134 - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
  • Python CDP driver: pychromestars510 - low level CDP transport handler
  • ios-webkit-debug-proxystars5.6k - Exposes Mobile Safari & UIWebView instances via the CDP.
  • IE Diagnostics Adapterstars578 - Protocol adaptor for Microsoft IE 11 to CDP.
  • go-debugger-devtoolsstars40
  • Jul 20th

    Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • Typescript/Node.js: noice-json-rpc - A proxy-based implementation to expose the CDP as its API.
  • Jan 13th

    DevTools Extensions

    Automation

  • Puppeteer IDEstars99 - Standalone Puppeteer playground in browser's developer tools.
  • Mar 9th, 2021

    Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • Kotlin: chrome-devtools-kotlinstars26 - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
  • Jan 20th, 2021

    Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • Go: Rodstars2.8k
  • Java: jvppeteerstars455 - Headless Chrome For Java
  • Nov 15th, 2019

    DevTools Extensions

    Themes

  • Material UI Theme - Provides various Material Design inspired themes.
  • Nov 13th, 2019

    DevTools Extensions

    Performance

  • TracerBenchstars219 - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.
  • Sep 3rd, 2019

    Chrome DevTools Protocol

    Developing with the protocol

  • chrome-remote-interface Wiki - Many useful recipes.
  • Chrome Protocol Proxystars137 - Tool for debugging clients using devtools protocol.
  • Using DevTools frontend with other platforms

    Node.js

  • chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.
  • ndbstars10.8k - An improved Node.js debugging experience with the DevTools Frontend.
  • thetoolstars197 - CPU, memory, coverage, type profiling with Node.
  • Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • Java: chrome-devtools-java-clientstars166
  • Python: PyCDPstars46 - Pure-Python, sans-IO wrappers. See also the Trio CDP driverstars42
  • Python: chromewhipstars105 - drop-in replacement for the splash service
  • Python: ChromeControllerstars167 - high-level browser mgmt
  • Go: chromedpstars8.2k - High-level actions and tasks for driving browsers
  • Go: cdpstars634
  • Go: gcdstars177
  • Go: godetstars345
  • Ruby: Cupritestars978 - Capybara driver
  • Clojure: clj-chrome-devtoolsstars123 - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
  • DevTools Extensions

    Performance

  • slothstars196 - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
  • Chrome DevTools Protocol

  • ChromeDevTools/devtools-protocolstars825 - Canonical location of the protocol JSON. Issue tracker for protocol bugs. TypeScript types.
  • DevTools tooling and ecosystem

    Chrome Debugger integration with Editors

  • VS Code - Debugger for Chromestars2.2k - Breakpoint debugging in VS Code.
  • VS Code - Elements for Microsoft Edgestars572 - Elements panel inside VS Code.
  • ChromeREPLstars355 - Within Sublime Text, use the Chrome console.
  • Sublime Web Inspector - JavaScript Breakpoint debugging right in Sublime Text.
  • WebStorm/JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.
  • Using DevTools frontend with other platforms

    Android

  • j2v8-debuggerstars72 - Debugging JavaScript running in J2V8stars2.3k with Chrome DevTools.
  • DevTools tooling and ecosystem

    Network Inspection

  • Weer - A HTTP protocol debugger (closed source)
  • Nov 1st, 2018

    DevTools tooling and ecosystem

    Network Inspection

  • betwixtstars4.3k - System level network proxy, providing inspection via Network panel.
  • Chrome DevTools Protocol

  • DevTools Protocol API Docs - Easy browsable UI for exploring the protocol's domains, methods and events.
  • Using DevTools frontend with other platforms

    Android

  • Facebook Stethostars12.6k - Native Android debugging with Chrome DevTools.
  • Using DevTools frontend with other platforms

    ClojureScript

  • Diracstars761 - Debugging of ClojsureScript.
  • Using DevTools frontend with other platforms

    iOS

  • PonyDebuggerstars5.9k - Remote network and data debugging iOS apps with Chrome DevTools.
  • Using DevTools frontend with other platforms

    Node.js

  • Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+.
  • DevTools Extensions

    Workflow

  • Augury - Debugging and Profiling for Angular 2 applications.
  • Oct 31st, 2018

    DevTools tooling and ecosystem

    CPU profile

  • Wishbone python framework - Profiling data can export as .cpuprofile.
  • Mar 9th, 2018

    Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • PHP: chrome-devtools-protocolstars142 - A PHP client library for the protocol.
  • Aug 31st, 2017

    Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • Kotlin: chrome-reactive-kotlinstars69 - reactive (rxjava 2.x), low-level client library in Kotlin
  • Aug 28th, 2017

    DevTools Extensions

    Workflow

  • Metal.js Developer Tools - Inspect the Metal component hierarchies.
  • Jul 6th, 2017

    Chrome DevTools Protocol

    Libraries for driving the protocol (or a layer above)

  • C#/dotnet: chrome-dev-toolsstars71 - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
  • Jun 4th, 2017

    DevTools tooling and ecosystem

    Object formatting

  • immutable-devtoolsstars646 - Custom formatter for Immutable-js values.
  • DevTools tooling and ecosystem

    CPU profile

  • call-tracestars30 - 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.
  • cpuprofilifystars165 - Converts output of various profiling/sampling tools to the .cpuprofile format.
  • DevTools tooling and ecosystem

    Multimedia

  • snaplinestars391 - Converts timeline screenshots to gif.
  • DevTools tooling and ecosystem

    Timeline, Tracing & Profiling

  • DevTools Timeline Viewer - Share URLs of your timeline recordings.
  • Aug 2nd, 2016

    Learning

  • Dev Tips - Large collection of tips as animated gifs.
  • DevTools Extensions

    Workflow

  • Clockwork - View PHP application profiling data.
  • Emulated Device Lab - Experiment with multiple devices being emulated at the same time.
  • RailsPanel - View Ruby on Rails application profiling data.
  • React Developer Tools - Inspect the React component hierarchies.
  • EmberJS Inspector - Allows you to inspect EmberJS objects in your application.
  • VueJS Developer Toolsstars22.9k - Inspect VueJS components and manipulate their data.
  • Angular Batarang - Inspect an Angular application's scope and profile its data.
  • Marionette Inspector - Inspect a Marionette application's views, events, and live data.
  • Backbone Debugger - Inspect a Backbone application's views, models, events, and routes.
  • App Inspector for Sencha - Inspect a Sencha ExtJS/Touch application's component tree, data stores, events, and layouts.
  • Redux Devtools - Inspect Redux with actions history, undo and replay.
  • Three.js - Edit any three.js project.
  • Insightstars900 - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
  • BEM devtoolsstars44 - Inspect BEM entities expressed in i-bem framework.
  • DevTools Extensions

    Themes

  • DevTools Author - A selection of themes to modify parts of DevTools related to authoring web applications.
  • Zero Dark Matrix - Dark theme for Chrome Developer Tools.
  • Last Checked At: 2022-09-21T13:32:19.186Z
    Previous
    candelibas/awesome-ionic
    Next
    jdrgomes/awesome-postcss

    About

    Track your favorite github awesome repo, not just star it. trackawesomelist.com provides website, newsletter, RSS for tracking the popular awesome list by daily and weekly.
    Contact us: [email protected]
    Track Awesome List - Track your favorite Github awesome repos, not just star them | Product Hunt

    Subscribe

    Subscribe to our weekly newsletter to receive the awesome updates! We never send spam and you can unsubscribe instantly with one click. Here's past issues.

    Links

    Follow us on TwitterSubscribe us on TelegramSubmit awesome list repoNewsletterDonateSitemap