Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

Zephyr Devtools

The Zephyr Devtools provide advanced debugging and performance analysis capabilities for your micro-frontend applications. Built into the Zephyr Chrome Extension, the devtools give you deep insights into module federation behavior, performance metrics, and dependency relationships.

Installation & Access

The devtools are part of the Zephyr Chrome Extension:

  1. Install the Zephyr Chrome Extension
  2. Open Chrome DevTools (F12 or right-click → Inspect)
  3. Find the "Zephyr" tab in DevTools

The extension provides both a side panel for deployment management and dedicated DevTools panels for debugging.

DevTools Features

Applications
Performance
Dependencies
Settings

Module Detection & Management

  • Automatically detects federated modules via __FEDERATION__ globals
  • Live module override and version switching
  • Real-time module status monitoring
  • Per-module live reload controls

Key Capabilities

Module Federation Debugging

Automatic Module Detection: The devtools scan for webpack containers, remoteEntry.js scripts, and Module Federation globals to identify all federated modules in your application.

Runtime Module Management: Switch between different versions of modules without redeploying, perfect for testing and debugging integration issues.

Live Reload Control: Enable selective live reload for individual modules while developing, allowing precise control over your development workflow.

Performance Analysis

Bundle Analysis: Get detailed insights into your bundle sizes, compression ratios, and chunk counts to identify optimization opportunities.

Network Timing: See complete timing breakdowns for module loading, including connection establishment, TTFB, and download times.

Web Vitals Monitoring: Track Core Web Vitals and other performance metrics to ensure your micro-frontend architecture maintains good user experience.

Development Workflow Integration

Environment Awareness: The devtools understand your Zephyr deployment environments and provide context-aware debugging information.

Real-time Updates: WebSocket connections provide live updates about module changes and deployment status.

Chrome DevTools API Integration: Deep integration with Chrome's performance and network APIs for comprehensive debugging data.

How It Differs from the Side Panel

The Zephyr extension provides two complementary interfaces:

Side Panel (Browser Action):

  • Environment and deployment management
  • Version switching and live reload
  • Authentication and settings
  • Always accessible deployment controls

DevTools Panels (Chrome DevTools):

  • Deep debugging and performance analysis
  • Module federation internals inspection
  • Advanced dependency visualization
  • Development-focused debugging tools

Practical Use Cases

Performance Debugging

When your application loads slowly, use the Performance tab to identify bottleneck modules, analyze bundle sizes, and optimize loading strategies.

Module Integration Testing

Use the Applications tab to switch between different versions of federated modules, testing integration scenarios without deploying changes.

Dependency Analysis

Visualize complex module relationships in the Dependencies tab to understand how your micro-frontends interact and identify potential optimization opportunities.

Development Workflow

Combine the side panel's deployment controls with the devtools' debugging capabilities for a complete development and debugging workflow.

The Zephyr Devtools transform micro-frontend debugging from guesswork into precise, data-driven analysis, making it easier to build and maintain complex federated applications.