Dev Tips

Large collection of tips as animated gifs.

DevTools Tips

Collection of illustrated tips as mini tutorials.

Can I DevTools?

Various workflows, documented. Also a weekly tips & tricks newsletter.

Web cheatcodes

Browser developer tools for non-developers.

Dear Console

A collection of snippets to use in the browser console.

Chrome Secret Menus

Comprehensive guide to internal pages and diagnostic tools in Chrome.

Front-end Debugging Tools Handbook

Practical guide to mastering front-end debugging tools, from Chrome DevTools and framework extensions to AI-enhanced IDE debugging.

immutable-devtools

Custom formatter for Immutable-js values.

betwixt

System level network proxy, providing inspection via Network panel.

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.

snapline

Converts timeline screenshots to gif.

DevTools Timeline Viewer

Share URLs of your timeline recordings.

VS Code - Debugger for Chrome

Breakpoint debugging in VS Code.

VS Code - Elements for Microsoft Edge

Elements panel inside VS Code.

ChromeREPL

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.

ChromeDevTools/devtools-protocol

Canonical location of the protocol JSON. Issue tracker for protocol bugs. TypeScript types.

DevTools Protocol API Docs

Easy browsable UI for exploring the protocol's domains, methods and events.

chrome-remote-interface Wiki

Many useful recipes.

Chrome Protocol Proxy

Tool for debugging clients using devtools protocol.

Puppeteer

Node.js offering a high-level API to control headless Chrome over the DevTools Protocol. See also awesome-puppeteer.

Playwright

Library to automate Chromium, Firefox and WebKit with a single API. Available for Node.js, Python, .Net, Java. See also awesome-playwright.

devtools-remote-debugger

Use devtools against a webpage; a CDP agent implemeted in client-side JS.

Inspect

Use devtools against iOS and Android, easily. Browser and Webviews. (closed source)

Facebook Stetho

Native Android debugging with Chrome DevTools.

j2v8-debugger

Debugging JavaScript running in J2V8 with Chrome DevTools.

Dirac

Debugging of ClojsureScript.

PonyDebugger

Remote network and data debugging iOS apps with Chrome DevTools.

ndb

An improved Node.js debugging experience with the DevTools Frontend.

Debugging Node.js with Chrome DevTools

Guide on using the full debugging and profiling support in Node v6.3+.

thetool

CPU, memory, coverage, type profiling with Node.

chrome-devtools-frontend

Mirror of the frontend that ships in Chrome.

ruby/debug

Debugging functionality for Ruby.

BrowserBox

Embed Chrome in a web page, largely powered by DevTools and supporting multiuser browsing, remote DevTools, audio, and documents like .docx, .pdf, and more.

Puppetromium

A proof-of-concept web browser built with Puppeteer, written in Node.js, HTML and CSS, with 0% client-side JavaScript.

dn

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.

Clockwork

View PHP application profiling data.

RailsPanel

View Ruby on Rails application profiling data.

React Developer Tools

Inspect the React component hierarchies.

Ember.js Inspector

Allows you to inspect Ember.js objects in your application.

Vue.js Developer Tools

Inspect Vue.js components and manipulate their data.

Angular DevTools

Debugging and Profiling for Angular applications.

Backbone Debugger

Inspect a Backbone application's views, models, events, and routes.

Redux Devtools

Inspect Redux with actions history, undo and replay.

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.

Web Component DevTools

Inspect, modify and observe Web Components on page.

Material UI Theme

Provides various Material Design inspired themes.

sloth

Chrome extension allows to enable and save CPU and network throttling for selected tabs.

TracerBench

A controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.

Puppeteer IDE

Standalone Puppeteer playground in browser's developer tools.

k6 browser

Browser automation and end-to-end web testing tool that interacts with browsers and collects frontend performance metrics.

Remote Debug Gateway

Allows you to connect a client to multiple browsers at once.; Multiuser DevTools: DevTools Remote - Remotely debug someone else's browser.

DevTools Backend

Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.

ios-webkit-debug-proxy

Exposes Mobile Safari & UIWebView instances via the CDP.

Remote Debug iOS WebKit adapter

Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.

IE Diagnostics Adapter

Protocol adaptor for Microsoft IE 11 to CDP.

go-debugger-devtools