Skip to content

nicholas-b-carter/awesome-chrome-devtools

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Awesome chrome-devtools Awesome

Awesome tooling and resources in the Chrome DevTools ecosystem

Learning

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

DevTools as an IDE

Node.js + DevTools

Chrome Debugging Protocol

Debugging Android & iOS w/ DevTools

  • PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools
  • Facebook Stetho - Native Android debugging with Chrome DevTools

Debugging Node.js w/ DevTools

  • devtool - Debug & profile Node.js apps with Chrome DevTools (using Electron).
  • buggerJS - Provides Chrome DevTools bindings for node.

Object formatting

Network Inspection

  • betwixt - System level network proxy, providing inspection via Network panel

CPU profile

  • JSCLegacyProfiler/json2trace - Converts Safari's JavaScriptCore profiler output into .cpuprofile
  • 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.

Chrome Debugger integration with Editors

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 Tools - 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.
  • 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.

UX

  • 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.

Performance

About

Awesome tooling and resources in the Chrome DevTools ecosystem

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published