# The Dashboard

Live mode opens the DevTools UI in an external browser window and streams your test run in real time. It's the interactive counterpart to [Trace Mode](/docs/devtools/wdio/trace-mode.md), which skips the UI and writes a portable offline artifact instead. Live mode is enabled by default (`mode: 'live'`), so simply running your WebdriverIO tests launches the dashboard.

When you run your tests, the DevTools UI automatically opens in an external browser window and tests begin executing immediately with real-time visualization. After the initial run completes, use the play buttons to rerun individual tests or suites, and the stop button to terminate running tests at any time.

## What the dashboard shows[​](#what-the-dashboard-shows "Direct link to What the dashboard shows")

* **Live browser preview** — watch the browser under test as commands execute.
* **Test progress** — suites and tests update as they run.
* **Command execution** — each action streams in as it happens.
* **Workbench tabs** — explore Actions, Console, Network, Metadata, and Source for the selected test.

## Live-mode features[​](#live-mode-features "Direct link to Live-mode features")

* **[Interactive Test Rerunning & Visualization](/docs/devtools/wdio/interactive-test-rerunning.md)** — Real-time browser previews with test rerunning
* **[Preserve & Rerun (Compare)](/docs/devtools/wdio/preserve-and-rerun.md)** — Snapshot a failing test, rerun it, and diff the two runs side-by-side
* **[Console Logs](/docs/devtools/wdio/console-logs.md)** — Capture and inspect browser console output
* **[Network Logs](/docs/devtools/wdio/network-logs.md)** — Monitor API calls and network activity
* **[Metadata](/docs/devtools/wdio/metadata.md)** — Session capabilities, environment, and timing per browser session
* **[TestLens](/docs/devtools/wdio/testlens.md)** — Navigate to source code with intelligent code navigation
* **[Multi-Framework Support](/docs/devtools/wdio/multi-framework-support.md)** — Works with Mocha, Jasmine, and Cucumber
* **[Session Screencast](/docs/devtools/wdio/screencast.md)** — Automatic video recording of browser sessions

## Configuring the dashboard window[​](#configuring-the-dashboard-window "Direct link to Configuring the dashboard window")

The `port`, `hostname`, and `devtoolsCapabilities` options control the DevTools UI server and the window it opens in. See the [Configuration Reference](/docs/devtools/reference.md) for details.

## Running the backend on its own[​](#running-the-backend-on-its-own "Direct link to Running the backend on its own")

The adapters start the dashboard server in-process, so you normally never touch it. It also ships as a standalone binary, which is what you want when the dashboard should outlive a single run - or when the tests are not JavaScript, as with the Python adapter (see the [Selenium](/docs/devtools/selenium.md) page).

```
npx @wdio/devtools-backend
```

```
Usage: devtools-backend [options]

Options:
  --port <number>     Preferred port; a free one is chosen if it is taken
  --hostname <host>   Host to bind (default: localhost)
  -h, --help          Show this message
```

`--port` is a *preference*, not a promise: if that port is taken the server binds a free one instead of failing. It prints the port it actually bound, which is the line to read rather than the one you asked for:

```
devtools-backend listening at http://localhost:3000
```

Point a run at an already-listening server with `DEVTOOLS_PORT` (every adapter honours it), and the run will attach instead of starting a second one.

A second binary, `show-trace`, opens a trace archive in the offline player - see [Trace Player](/docs/devtools/trace-player.md).