Advanced Developer Tools

Developer Documentation

Overview

The Zepra Browser includes comprehensive developer tools integrated natively into the Zepra shell interface. This advanced system provides full debugging, profiling, and development capabilities tailored for our custom engine stack.

🚀 Key Features

Core Developer Tools

  • Console Panel: Advanced ZepraScript console with filtering and history
  • Elements Panel: WebCore DOM inspector with real-time UI/layout editing via NXRender
  • Network Panel: NxHTTP request/response monitoring and analysis
  • Performance Panel: Engine profiling and specific pipeline metrics
  • Sources Panel: ZepraScript debugging with direct bytecode inspection
  • Application Panel: Local storage, cache, and IPC state inspection
  • Security Panel: Certificate (NxCrypto) and permission management

Advanced Browser Engine Layer

  • Zepra Engine Integration: Full integration with Zepra UI shell and platform abstractions
  • ZepraScript Engine: Custom lightweight engine replacing V8 for low memory footprints
  • WebCore Features: Custom rendering pipeline utilizing GPU via NXRender natively
  • Security Features: HTTPS enforcement, IPC Sandboxing, process isolation model

🔧 Developer Tools Architecture

Components

1. DeveloperTools Class

class DeveloperTools {
    // Console management
    void log(const String& message, ConsoleLevel level);
    void clearConsole();
    std::vector<ConsoleMessage> getConsoleMessages();

    // Network (NxHTTP) monitoring
    void logNetworkRequest(const NetworkRequest& request);
    void logNetworkResponse(const NetworkResponse& response);

    // DOM (WebCore) inspection
    void setDOMTree(std::shared_ptr<DOMNode> root);
    std::shared_ptr<DOMNode> getNodeById(int nodeId);

    // ZepraScript execution
    String executeZepraScript(const String& script);
    void executeZepraScriptAsync(const String& script);

    // Engine Performance monitoring
    void startPerformanceMonitoring();
    PerformanceMetrics getPerformanceMetrics();
};

2. DevToolsManager Class

class DevToolsManager {
    std::shared_ptr<DeveloperTools> createTools();
    void destroyTools(std::shared_ptr<DeveloperTools> tools);
    void startGlobalPerformanceMonitoring();
};

3. DevToolsUI Class

class DevToolsUI {
    // Panel management
    void showPanel(DevToolsPanel panel);
    void setCurrentPanel(DevToolsPanel panel);

    // Elements panel
    void updateDOMTree();
    void highlightElement(int nodeId);

    // Network panel
    void updateNetworkLog();
    void exportNetworkLog(const String& filePath);

    // Performance panel
    void startPerformanceRecording();
    void exportPerformanceData(const String& filePath);
};

🌐 Zepra Engine Features

Configuration

struct ZepraConfig {
    bool enableZepraScript = true;
    bool enableNxGfx = true;
    bool enableNxAudio = true;
    bool enableExtensions = true;
    bool enableDevTools = true;
    String userAgent = "Zepra Browser/3.0 (NeolyxOS)";
    int maxMemoryUsage = 512; // MB (Aggressive Optimization)
    int maxConcurrentRequests = 20;
    bool enableCaching = true;
};

Advanced Integration

// Initialize Zepra engine
zepra::ZepraEngine engine;
zepra::ZepraConfig config;

config.enableZepraScript = true;
config.enableNxGfx = true;
config.enableDevTools = true;
config.maxMemoryUsage = 256; 

if (engine.initialize(config)) {
    // Integrate developer tools
    engine.setDeveloperTools(devTools);
    engine.enableDeveloperTools(true);
    engine.enableNetworkMonitoring(true);

    // Set up event handlers
    engine.setEventHandler([](const zepra::BrowserEvent& event) {
        std::cout << "Zepra Event: " << event.url << std::endl;
    });

    // Create and load page
    engine.createWindow();
    engine.loadHTML("<html><body><h1>Welcome to Zepra</h1></body></html>");

    // Execute ZepraScript
    String result = engine.executeScript("document.title");
}

🔒 Security Features & Policies

// Set IPC Sandbox policy
engine.setSandboxPolicy("strict");

// Request sandbox permissions securely
engine.requestPermission("gpu_access", "https://example.com");

// Grant/deny permissions at OS level
engine.grantPermission("storage_api", "https://example.com");
engine.denyPermission("microphone_api", "https://example.com");

📊 Performance Monitoring

Metrics Collection

struct PerformanceMetrics {
    double nxRenderLayoutTime;
    double nxRenderPaintTime;
    double zepraScriptParseTime;
    double zepraScriptExecutionTime;
    int totalBytes;
    int totalRequests;
    double averageResponseTime;
    size_t memoryAllocatedByVM;
};

🎯 Keyboard Shortcuts

  • F12 - Toggle Developer Tools
  • Ctrl+Shift+I - Open Inspector
  • Ctrl+Shift+J - Open Console
  • Ctrl+Shift+C - Inspect Element
  • Ctrl+Shift+N - Open Network Panel
  • Ctrl+Shift+P - Open Performance Panel
  • Ctrl+R - Reload page
HomeDocsCommunityBlog