Awesome Chrome DevTools

---

title: Awesome Chrome DevTools slug: awesome-chrome-devtools brand: Google Chrome brand_logo: https://www.google.com/chrome/static/images/chrome-logo.svg source_url: https://github.com/ChromeDevTools/awesome-chrome-devtools#readme category: Themed Directories tags:

• browser
• devtools
• web-development featured: false images:
• https://www.google.com/chrome/static/images/chrome-logo.svg

---

Overview

Awesome Chrome DevTools is a curated directory of tools, learning resources, and integrations built around the Chrome DevTools ecosystem. It aggregates tutorials, tips, utilities, and extensions that help developers learn, extend, and integrate Chrome DevTools into their workflows.

Features

Learning Resources

• Dev Tips – Large collection of Chrome DevTools tips presented as animated GIFs.
• DevTools Tips – Illustrated DevTools tips in the form of concise mini-tutorials.
• Can I DevTools? – Documented DevTools workflows plus a weekly tips & tricks newsletter.
• Web cheatcodes – Browser developer tools explained for non-developers.
• Dear Console – Collection of ready-to-use snippets for the browser console.

DevTools Tooling & Ecosystem

Object Formatting

• immutable-devtools – Custom formatter for Immutable.js values to improve inspection in DevTools.

Network Inspection

• betwixt – System-level network proxy that exposes traffic for inspection via the DevTools Network panel.
• Weer – HTTP protocol debugger (closed source) for detailed HTTP traffic analysis.

CPU Profiling

• call-trace – Instruments JavaScript with hooks and generates .cpuprofile files of full (non-sampled) execution, with views by time or call counts.
• cpuprofilify – Converts output from various profiling and sampling tools into the Chrome DevTools .cpuprofile format.
• Wishbone Python framework (profiling) – Can export profiling data as .cpuprofile for inspection in DevTools.

Multimedia

• snapline – Converts DevTools timeline screenshots into GIFs for easier sharing and analysis.

Timeline, Tracing & Profiling

• DevTools Timeline Viewer – Web-based viewer that lets you upload and share URLs to Chrome DevTools timeline recordings.

Editor & IDE Integration

• VS Code – Debugger for Chrome – Adds breakpoint debugging for Chrome directly inside Visual Studio Code.
• VS Code – Elements for Microsoft Edge – Integrates the Elements panel (DOM & CSS inspection) into VS Code.
• ChromeREPL (Sublime Text) – Use the Chrome console from within Sublime Text for interactive scripting and inspection.
• Sublime Web Inspector – JavaScript breakpoint debugging integrated into Sublime Text.
• WebStorm / JetBrains Chrome Extension – Enables JavaScript debugging, DOM inspection, and live editing of HTML, CSS, and JS from JetBrains IDEs.

Chrome DevTools Protocol

• ChromeDevTools/devtools-protocol – Canonical repository for the Chrome DevTools Protocol JSON definitions and related issue tracking.

Use Cases

• Learn Chrome DevTools from curated tutorials and tip collections.
• Enhance debugging and profiling workflows with specialized tools and format converters.
• Inspect and debug network traffic and HTTP protocol behavior.
• Integrate Chrome DevTools capabilities directly into popular editors and IDEs.
• Work programmatically with the Chrome DevTools Protocol using its canonical specification.

Pricing

This is an open, curated directory of resources and tools. Individual listed tools and services may have their own pricing or licensing, but the directory itself is free to access.