Magento Developer Tools Profiler

Tracking since Apr 1, 2026.

Changelog

• Apr 21, 2026
  description

  🔧 Magento Developer Tools - Headless Commerce API Profiler
  
  Essential Chrome extension for developers building headless Magento applications. Debug API calls between your React, Angular, Next.js, Vue.js frontend and Magento 2 backend with intelligent request interception and comprehensive analysis.
  
  ✨ PERFECT FOR HEADLESS COMMERCE
  
  🎯 Frontend-Backend API Debugging
  • Monitor REST API calls from your React/Angular/Next.js app to Magento backend
  • Track GraphQL queries and mutations in headless implementations
  • Debug authentication issues with customer tokens and admin APIs
  • Analyze API performance and response times
  
  📊 Headless Development Workflow
  • Dedicated DevTools panel for Magento API monitoring
  • Real-time request/response analysis during frontend development
  • JSON response viewer optimized for Magento API structures
  • Header inspection for authentication and custom headers
  
  🚀 HEADLESS ARCHITECTURE SUPPORT
  
  ⚙️ Frontend Framework Integration
  • Works seamlessly with React, Angular, Vue.js, Next.js applications
  • Monitor axios, fetch, and other HTTP client requests to Magento
  • Debug PWA and SPA applications calling Magento APIs
  • Support for both customer-facing and admin API calls
  
  🔍 Magento API Coverage
  • REST API endpoints (/rest/V1/*, /rest/V2/*)
  • GraphQL queries and mutations (/graphql)
  • Customer authentication APIs (/rest/V1/customers/*)
  • Cart and checkout APIs (/rest/V1/carts/*)
  • Product catalog APIs (/rest/V1/products/*)
  • Admin APIs for headless management interfaces
  
  💡 Common Headless Use Cases:
  • E-commerce PWAs with React/Next.js frontend + Magento backend
  • Mobile apps consuming Magento APIs
  • Custom admin dashboards built with Angular/Vue.js
  • Multi-channel commerce with shared Magento backend
  • JAMstack implementations with Magento as headless CMS
  
  🎛️ Smart Header Injection
  Automatically inject debug headers into API requests:
  • X-Debug-Mode for enhanced API responses
  • Custom authentication headers for development
  • API versioning headers (Accept: application/json)
  • CORS and debugging headers for local development
  
  📋 Headless Development Features:
  • Filter requests by API type (REST vs GraphQL)
  • Monitor authentication token usage and expiration
  • Debug CORS issues between frontend and Magento backend
  • Track API quota usage and rate limiting
  • Analyze response times for performance optimization
  
  🔧 Development Environment Support:
  • Local development (localhost frontends calling remote Magento)
  • Staging environments with decoupled architecture
  • Production debugging for headless applications
  • Multi-domain setups (frontend.com → api.magento.com)
  
  ⚡ Quick Setup for Headless Teams:
  1. Install extension in Chrome
  2. Configure your Magento backend domain
  3. Set API paths (REST/GraphQL endpoints)
  4. Start your React/Angular/Next.js development server
  5. Open DevTools → "Magento Developer Tools" tab
  6. Watch API calls in real-time as you develop
  
  🛡️ Security & Privacy:
  • All debugging happens locally in your browser
  • No data sent to external servers
  • API keys and tokens remain secure
  • Full control over which domains are monitored
  
  💻 Typical Headless Stack Support:
  • Frontend: React, Angular, Vue.js, Next.js, Nuxt.js, Gatsby
  • Backend: Magento 2.4+ with REST/GraphQL APIs
  • PWA: Magento PWA Studio, custom React PWAs
  
  Essential tool for any developer building modern headless commerce experiences with Magento as the backend API provider. Streamline your frontend development by gaining complete visibility into your Magento API interactions.
  
  Built specifically for the headless commerce community. 🚀

  🔧 Magento Developer Tools - Headless Commerce API Profiler
  
  Essential Chrome extension for developers building headless Magento applications. Debug API calls between your React, Angular, Next.js, Vue.js frontend and Magento 2 backend with intelligent request interception and comprehensive analysis.
  
  ✨ PERFECT FOR HEADLESS COMMERCE
  
  🎯 Frontend-Backend API Debugging
  • Monitor REST API calls from your React/Angular/Next.js app to Magento backend
  • Track GraphQL queries and mutations in headless implementations
  • Debug authentication issues with customer tokens and admin APIs
  • Analyze API performance and response times
  
  📊 Headless Development Workflow
  • Dedicated DevTools panel for Magento API monitoring
  • Real-time request/response analysis during frontend development
  • JSON response viewer optimized for Magento API structures
  • Header inspection for authentication and custom headers
  
  🚀 HEADLESS ARCHITECTURE SUPPORT
  
  ⚙️ Frontend Framework Integration
  • Works seamlessly with React, Angular, Vue.js, Next.js applications
  • Monitor axios, fetch, and other HTTP client requests to Magento
  • Debug PWA and SPA applications calling Magento APIs
  • Support for both customer-facing and admin API calls
  
  🔍 Magento API Coverage
  • REST API endpoints (/rest/V1/*, /rest/V2/*)
  • GraphQL queries and mutations (/graphql)
  • Customer authentication APIs (/rest/V1/customers/*)
  • Cart and checkout APIs (/rest/V1/carts/*)
  • Product catalog APIs (/rest/V1/products/*)
  • Admin APIs for headless management interfaces
  
  💡 Common Headless Use Cases:
  • E-commerce PWAs with React/Next.js frontend + Magento backend
  • Mobile apps consuming Magento APIs
  • Custom admin dashboards built with Angular/Vue.js
  • Multi-channel commerce with shared Magento backend
  • JAMstack implementations with Magento as headless CMS
  
  🎛️ Smart Header Injection
  Automatically inject debug headers into API requests:
  • X-Debug-Mode for enhanced API responses
  • Custom authentication headers for development
  • API versioning headers (Accept: application/json)
  • CORS and debugging headers for local development
  
  📋 Headless Development Features:
  • Filter requests by API type (REST vs GraphQL)
  • Monitor authentication token usage and expiration
  • Debug CORS issues between frontend and Magento backend
  • Track API quota usage and rate limiting
  • Analyze response times for performance optimization
  
  🔧 Development Environment Support:
  • Local development (localhost frontends calling remote Magento)
  • Staging environments with decoupled architecture
  • Production debugging for headless applications
  • Multi-domain setups (frontend.com → api.magento.com)
  
  ⚡ Quick Setup for Headless Teams:
  1. Install extension in Chrome
  2. Configure your Magento backend domain
  3. Set API paths (REST/GraphQL endpoints)
  4. Start your React/Angular/Next.js development server
  5. Open DevTools → "Magento Developer Tools" tab
  6. Watch API calls in real-time as you develop
  
  📦 Next.js / SSR (npm companion package)
  This extension works with the storefront in the browser. For **server-side** calls from **Next.js** (fetch/axios during SSR) so Magento receives the same debug headers and SSR logs correlate in this panel, install the companion library from npm:
  
  • Package: **@bitbabit/devtools-ssr-bridge** (https://www.npmjs.com/package/@bitbabit/devtools-ssr-bridge)
  • Install: `npm i @bitbabit/devtools-ssr-bridge`
  • Typical setup: wrap `next.config` with `withDevtoolsSsrBridge`, add `instrumentation` with `register` from `@bitbabit/devtools-ssr-bridge/instrument`, call `attachAxiosSsrDevtools` from `@bitbabit/devtools-ssr-bridge/attach-axios` for your axios instances on the server, and optional middleware helpers from `@bitbabit/devtools-ssr-bridge/next` for `X-SSR-ID` correlation.
  • Full checklist, env vars (`MAGENTO_DEVTOOLS_*`, `DEVTOOLS_SSR_BRIDGE_DEBUG`), and cookie behaviour are documented in the **package README** on npm.
  
  The Chrome extension and npm package are designed to be used together for end-to-end headless debugging (browser + Node SSR).
  
  🛡️ Security & Privacy:
  • All debugging happens locally in your browser
  • No data sent to external servers
  • API keys and tokens remain secure
  • Full control over which domains are monitored
  
  💻 Typical Headless Stack Support:
  • Frontend: React, Angular, Vue.js, Next.js, Nuxt.js, Gatsby
  • Backend: Magento 2.4+ with REST/GraphQL APIs
  • PWA: Magento PWA Studio, custom React PWAs
  
  Essential tool for any developer building modern headless commerce experiences with Magento as the backend API provider. Streamline your frontend development by gaining complete visibility into your Magento API interactions.
  
  Built specifically for the headless commerce community. 🚀

• Apr 21, 2026
  short_description

  An advanced profiler for Magento 2 developers to monitor API requests, database queries, and performance metrics.

  Magento 2 API profiler in Chrome DevTools. For Next.js SSR, also install npm @bitbabit/devtools-ssr-bridge and follow its README.

• Apr 21, 2026
  permissions

  storage, declarativeNetRequest, declarativeNetRequestWithHostAccess

  storage, scripting, declarativeNetRequest, declarativeNetRequestWithHostAccess

Permissions & access

Permissions

storagescriptingdeclarativeNetRequestdeclarativeNetRequestWithHostAccess

Host access

None declared

Screenshots

Similar extensions

Alternatives to Magento Developer Tools Profiler, ranked by description similarity.

Magewave: Magento Version & Tech Stack Identifier

Discover Magento versions, tech stacks, TTFB, Core Web Vitals, and performance scores in real time.

146

★ 5.0

Php Laravel & CodeIgniter Debugger

Monitor Laravel, CodeIgniter & PHP applications in Chrome Side Panel. View SQL queries, execution time, memory usage.

47

AH Debugger

Debug analytics and marketing pixels in real time with AH Debugger.

156

★ 5.0

RequestScope

Monitor network requests and API failures with real-time insights

97

★ 5.0

ALT-DEV TOOLS

A powerful sidebar DevTools alternative — Elements, Console, Network, Sources & Application panels right in your browser sidebar

—

★ 5.0

dtools - Web Developer Tools

Comprehensive web developer tools extension with performance metrics, tech stack detection, and debugging utilities.

127

★ 5.0

Alpine.js DevTools Pro

DevTools extension for debugging Alpine.js applications.

915

★ 5.0

Inertia.js Devtools

The unofficial Inertia.js devtools extension.

74

★ 5.0