# Getting Started

WebdriverIO DevTools gives your end-to-end browser tests a developer-tools UI for running, debugging, and inspecting automation — DOM replay, per-command screenshots, network and console capture, and session screencasts. It runs in two modes. **Live mode** opens an interactive [dashboard](/docs/devtools/dashboard.md) in a browser window while your tests execute, so you can watch and rerun them in real time. **Trace mode** skips the UI and writes a portable, offline [trace artifact](/docs/devtools/wdio/trace-mode.md) (`trace.zip`) you can open later in the `show-trace` player — ideal for CI. This page gets you into live mode fast; trace mode is one option away.

## Install & first run[​](#install--first-run "Direct link to Install & first run")

Pick your adapter, install it, and add the minimal wiring below. Run your tests as usual — the DevTools dashboard opens automatically in a new browser window.

* WebdriverIO
* Selenium
* Nightwatch

Install the service:

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

Add it to your test-runner config:

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

Run your WebdriverIO tests as normal — the DevTools UI opens automatically and tests begin visualizing immediately.

Works with Mocha, Jest, Cucumber, or a plain `node` script — the plugin auto-detects the runner. Install it:

```
npm install @wdio/selenium-devtools
```

Add a single import and one `configure` call at the top of your test file (Mocha shown):

```
// tests/example.test.js
import { Builder, By, until } from 'selenium-webdriver'
import { DevTools } from '@wdio/selenium-devtools'

DevTools.configure({
  screencast: { enabled: true, quality: 70, maxWidth: 1280, maxHeight: 720 }
})

describe('smoke test', function () {
  let driver

  before(async function () {
    driver = await new Builder().forBrowser('chrome').build()
  })

  after(async function () {
    if (driver) {
      await driver.quit()
    }
  })

  it('loads example.com', async function () {
    await driver.get('https://example.com')
    await driver.wait(until.elementLocated(By.css('h1')), 10000)
  })
})
```

Run it — the DevTools UI opens in a new Chrome window:

```
mocha --timeout 60000 tests/example.test.js
```

See the [Selenium page](/docs/devtools/selenium.md) for the Jest, Cucumber, and plain-Node setups.

Install the adapter:

```
npm install @wdio/nightwatch-devtools
```

Wire it into your Nightwatch config via `globals` — no test-file changes needed:

```
// nightwatch.conf.cjs
const nightwatchDevtools = require('@wdio/nightwatch-devtools').default

module.exports = {
  src_folders: ['tests'],

  test_settings: {
    default: {
      desiredCapabilities: {
        browserName: 'chrome',
        // Required for network request capture
        'goog:loggingPrefs': { performance: 'ALL' }
      },
      globals: nightwatchDevtools({ port: 3000 })
    }
  }
}
```

Run your tests as normal — the DevTools UI opens automatically:

```
nightwatch
```

See the [Nightwatch page](/docs/devtools/nightwatch.md) for the Cucumber/BDD setup.

## Next steps[​](#next-steps "Direct link to Next steps")

* **[Trace Mode](/docs/devtools/wdio/trace-mode.md)** — set `mode: 'trace'` to skip the UI and produce a portable, offline trace artifact for CI.
* **[Configuration Reference](/docs/devtools/reference.md)** — every option across all three adapters.
* **Frameworks** — full per-adapter guides: [WebdriverIO](/docs/devtools/wdio.md), [Selenium](/docs/devtools/selenium.md), [Nightwatch](/docs/devtools/nightwatch.md).