Convert Figma logo to code with AI

ChromeDevTools logoawesome-chrome-devtools

Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem

6,035
348
6,035
9
View on GitHub

Top Related Projects

ChromeDevTools's avatar

devtools-frontend

3,114

The Chrome DevTools UI

ChromeDevTools's avatar

devtools-protocol

1,123

Chrome DevTools Protocol

firefox-devtools's avatar

debugger

4,614

The faster and smarter Debugger for Firefox DevTools πŸ”₯πŸ¦ŠπŸ› 

Quick Overview

Awesome Chrome DevTools is a curated list of Chrome DevTools resources, tools, and tutorials. It serves as a comprehensive collection of resources for developers looking to enhance their skills with Chrome DevTools, offering links to various tools, extensions, and learning materials.

Pros

  • Extensive collection of resources covering various aspects of Chrome DevTools
  • Regularly updated with new tools and resources
  • Well-organized into categories for easy navigation
  • Community-driven, allowing contributions from developers worldwide

Cons

  • May be overwhelming for beginners due to the large number of resources
  • Some listed resources might become outdated or discontinued over time
  • Lacks detailed descriptions or reviews of individual tools
  • No standardized vetting process for included resources

Note: As this is not a code library, the code examples and getting started instructions sections have been omitted.

Competitor Comparisons

ChromeDevTools logo

devtools-frontend

3,114

The Chrome DevTools UI

Pros of devtools-frontend

  • Contains the actual source code for Chrome DevTools, allowing direct contributions and modifications
  • Provides a comprehensive development environment for Chrome DevTools
  • Offers deeper insights into the inner workings of DevTools

Cons of devtools-frontend

  • Larger and more complex codebase, which may be overwhelming for beginners
  • Requires more setup and knowledge to work with compared to a curated list
  • Less focused on providing quick resources and tools for DevTools users

Code Comparison

devtools-frontend:

// Example from devtools-frontend
export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
  // ...
  loadNetworkResource(url: string, headers: string, streamId: number, callback: (arg0: LoadNetworkResourceResult) => void): void {
    // Implementation details
  }
}

awesome-chrome-devtools:

<!-- Example from awesome-chrome-devtools -->
## Learning
* [Dev Tips](https://umaar.com/dev-tips/) - Large collection of tips as animated gifs

The code comparison shows that devtools-frontend contains actual implementation code, while awesome-chrome-devtools is a curated list of resources in Markdown format.

ChromeDevTools logo

devtools-protocol

1,123

Chrome DevTools Protocol

Pros of devtools-protocol

  • Provides detailed, official documentation of the Chrome DevTools Protocol
  • Offers direct access to low-level DevTools functionality
  • Enables creation of custom debugging tools and automation scripts

Cons of devtools-protocol

  • Steeper learning curve for beginners
  • Requires more coding effort to implement specific features
  • Less community-curated resources compared to awesome-chrome-devtools

Code Comparison

devtools-protocol:

const client = await CDP();
const {Page} = client;
await Page.enable();
await Page.navigate({url: 'https://example.com'});
await Page.loadEventFired();

awesome-chrome-devtools (using chrome-remote-interface):

const CDP = require('chrome-remote-interface');
CDP(async (client) => {
    const {Page} = client;
    await Page.enable();
    await Page.navigate({url: 'https://example.com'});
    await Page.loadEventFired();
});

The code examples demonstrate that while devtools-protocol provides the foundation, awesome-chrome-devtools includes tools like chrome-remote-interface that simplify the usage of the protocol. awesome-chrome-devtools serves as a curated list of resources, tools, and libraries built on top of the Chrome DevTools Protocol, making it easier for developers to find and use relevant tools for their specific needs.

firefox-devtools logo

debugger

4,614

The faster and smarter Debugger for Firefox DevTools πŸ”₯πŸ¦ŠπŸ› 

Pros of debugger

  • Focused specifically on debugging functionality
  • Integrated directly with Firefox, potentially offering deeper browser integration
  • Open-source project with active community contributions

Cons of debugger

  • Limited to Firefox browser, less versatile across platforms
  • Smaller ecosystem compared to Chrome DevTools
  • May have fewer third-party extensions and integrations

Code comparison

debugger:

// Example of setting a breakpoint in debugger
debugger.setBreakpoint("script.js", 10);

awesome-chrome-devtools:

// Example of setting a breakpoint in Chrome DevTools
chrome.debugger.setBreakpoint({lineNumber: 10, url: "script.js"});

Additional notes

awesome-chrome-devtools is a curated list of Chrome DevTools resources, extensions, and tools, while debugger is a specific debugging tool for Firefox. The comparison is not entirely direct, as awesome-chrome-devtools covers a broader range of topics and tools related to Chrome DevTools.

awesome-chrome-devtools offers a comprehensive collection of resources for Chrome developers, including debugging tools, performance analysis, and extensions. It provides a wider scope of development tools and resources beyond just debugging.

debugger, being a specific tool, offers a more focused approach to debugging within the Firefox ecosystem. It may provide a more streamlined experience for Firefox developers but lacks the breadth of resources found in awesome-chrome-devtools.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Awesome Chrome DevTools Awesome

Awesome tooling and resources in the Chrome DevTools ecosystem

Contents

Learning

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

The big two automation libraries

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

Libraries for driving the protocol (or a layer above)

Browser Adapters

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

Using DevTools frontend with other platforms

Android

ClojureScript

  • Dirac - Debugging of ClojsureScript.

iOS

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

Node.js

Ruby

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

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.

Automation

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

Alumni

Old projects, likely not maintained any longerҀ¦ But still cool.