changwu-tw / awesome-chrome-devtools

Awesome tooling and resources in the Chrome DevTools ecosystem

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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.

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 - Chrome devtools extension for debugging Vue.js applications
  • Angular Batarang - Inspect an Angular application's scope and profile its data.
  • Marionette Inspector - Inspect a Marionette application's views, events or 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 - DevTools for Redux with actions history, undo and replay.
  • Three.js - A Chrome DevTools extension to edit any three.js project.
  • Insight Insight is a WebGL debugging toolkit providing a variety of capabilities enabling more productive WebGL development and more efficient WebGL applications.

UX

About

Awesome tooling and resources in the Chrome DevTools ecosystem

License:Creative Commons Zero v1.0 Universal