Media
5 items
Description
Magento 2 API profiler in Chrome DevTools. For Next.js SSR, also install npm @bitbabit/devtools-ssr-bridge and follow its README. 🔧 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. 🚀