Courses & TutorialsSoftware

Awesome Chrome DevTools – Massive Collection of Resources

Awesome tooling and resources in the Chrome DevTools ecosystem

Contents


Learning

Multiuser DevTools


DevTools tooling and ecosystem

Object formatting

Network Inspection

  • betwixt – System level network proxy, providing inspection via Network panel.
  • Weer – A HTTP protocol debugger (closed source)

CPU profile

  • call-trace – 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.
  • cpuprofilify – Converts output of various profiling/sampling tools to the .cpuprofile format.
  • Wishbone python framework – Profiling data can export as .cpuprofile.

Multimedia

  • snapline – Converts timeline screenshots to gif.

Timeline, Tracing & Profiling

Chrome Debugger integration with Editors


Chrome DevTools Protocol

Developing with the protocol

  • chrome-remote-interface Wiki – Many useful recipes.
  • Chrome Protocol Proxy – Tool for debugging clients using devtools protocol.
  • Remote Debug Gateway – Allows you to connect a client to multiple browsers at once.
  • DevTools Backend – Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
  • RemoteDebug – Initiative to normalize debugging protocols across today’s browsers.
  • ChromeDriver – The official Selenium/WebDriver implementation for Chrome is implemented on top of the DevTools Protocol.
  • BrowserGap Community Edition – A remote browser product, open sourced. Makes heavy use of the raw, tip-of-tree Chrome DevTools protocol.

Automation

  • Puppeteer – Node.js offering a high-level API to control headless Chrome over the DevTools Protocol.
  • Taiko – A Node.js module to automate the Chrome/Chromium using DevTools protocol.
  • Also all Protocol Driver Libraries below

Protocol Driver Libraries

Browser Adapters

Using DevTools frontend with other platforms

Android

ClojureScript

  • Dirac – Debugging of ClojsureScript.

Lua

  • Mare – Lua debugging with Chrome DevTools.

iOS

  • PonyDebugger – Remote network and data debugging iOS apps with Chrome DevTools.

Go

Node.js


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.

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 Tools – Inspect VueJS components and manipulate their data.
  • Angular Batarang – Inspect an Angular application’s scope and profile its data.
  • Augury – Debugging and Profiling for Angular 2 applications.
  • 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.
  • Insight – A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
  • BEM devtools – Inspect BEM entities expressed in i-bem framework.
  • Metal.js Developer Tools – Inspect the Metal component hierarchies.

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.
  • Material UI Theme – Provides various Material Design inspired themes.

Performance

  • sloth – Chrome extension allows to enable and save CPU and network throttling for selected tabs.
  • TracerBench – TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button