DevTools

The DevTools service provides a powerful browser-based debugging interface for WebdriverIO test executions. It allows you to visualize, debug, and control your tests in real-time through an interactive web application.

Overview

This service enables you to:

• Rerun tests selectively - Click on any test case or suite to re-execute it instantly
• Debug visually - See live browser previews with automatic screenshots
• Track execution - View detailed command logs with timestamps and results
• Monitor network & console - Inspect API calls and JavaScript logs
• Navigate to code - Jump directly to test source files

Installation

Install the service as a dev dependency:

npm install --save-dev @wdio/devtools-service

Configuration

Add the service to your WebDriverIO configuration:

// wdio.conf.js
export const config = {
    // ...
    services: ['devtools'],
    // ...
};

Service Options

Configure the DevTools service with these options:

// wdio.conf.js
export const config = {
    // ...
    services: [
        ['devtools', {
            port: 3000,      // Port for the devtools UI (default: 3000)
        }]
    ],
    // ...
};

Options

• port (number, default: 3000) - Port number for the devtools UI server

How It Works

When you run your WebdriverIO tests with the DevTools service enabled:

1. The service opens a browser window at http://localhost:3000 (configurable)
2. Your tests execute normally while the DevTools UI displays real-time updates
3. The UI shows test hierarchy, browser preview, command timeline, and logs
4. After tests complete, you can click any test to rerun it individually
5. Tests rerun in the same browser session for faster debugging

Features

Explore the DevTools features in detail:

• Interactive Test Rerunning & Visualization - Real-time browser previews with test rerunning
• Multi-Framework Support - Works with Mocha, Jasmine, and Cucumber
• Console Logs - Capture and inspect browser console output
• Network Logs - Monitor API calls and network activity
• TestLens - Navigate to source code with intelligent code navigation