As described below, we can add debugger/brakepoint in code and do a debugger when we coding, please go through the method below, and if everything is okay, please give a guide in the Readme under /apps/dbb/README.md of how to set breakpoint and do debugging.
The execArgv: ['--inspect'] option enables the Node.js debugger for your WebDriverIO test execution. Let me break down what this means and how to use it:
What is --inspect?
--inspect is a Node.js command-line flag that:
- Starts the Node.js Inspector Agent
- Listens for debugging clients (default on port 9229)
- Allows you to debug your test code using Chrome DevTools or other debuggers
How it Works
// wdio.conf.js
exports.config = {
// ... other config
execArgv: ['--inspect'], // Enables Node.js debugger
// Alternative options:
// execArgv: ['--inspect=localhost:9229'], // Specific port
// execArgv: ['--inspect-brk'], // Pauses on first line (useful for debugging)
}Debugging Workflow
1. Start Debugging
# Run tests with debugger enabled
npx wdio wdio.conf.js
You'll see output like:
Debugger listening on ws://127.0.0.1:9229/...
2. Connect Chrome DevTools
- Open Chrome browser
- Navigate to:
chrome://inspect
- Click "Open dedicated DevTools for Node"
- Or click on your target under "Remote Target"
3. Set Breakpoints in Your Test Code
describe('Login Test', () => {
it('should login successfully', async () => {
// Set breakpoint here - execution will pause
await browser.url('/login');
debugger; // This will also trigger a breakpoint
await $('#username').setValue('testuser');
await $('#password').setValue('password123');
await $('button[type="submit"]').click();
// Debug complex scenarios
const url = await browser.getUrl();
console.log('Current URL:', url);
});
});Common execArgv Options
exports.config = {
// Different debugging options:
// Basic inspector (starts immediately)
execArgv: ['--inspect'],
// Inspector with break at start (pauses execution)
execArgv: ['--inspect-brk'],
// Specific port
execArgv: ['--inspect=localhost:9230'],
// Debug with specific options
execArgv: ['--inspect', '--max-old-space-size=4096'],
// Multiple flags
execArgv: ['--inspect', '--no-deprecation']
}Practical Debugging Example
1. Setup for Step-by-Step Debugging
// wdio.conf.js
exports.config = {
execArgv: ['--inspect-brk'], // Pause immediately
capabilities: [{
browserName: 'chrome',
'goog:loggingPrefs': { browser: 'ALL' }
}],
// Run only one spec at a time when debugging
specFileRetries: 0,
maxInstances: 1
}2. Debug a Specific Test
// test.spec.js
describe('Complex User Flow', () => {
it('should complete registration', async () => {
debugger; // Execution stops here
await browser.url('/register');
// You can now step through each line
const title = await browser.getTitle();
console.log('Page title:', title);
// Inspect variables in debugger
const currentUrl = await browser.getUrl();
await $('#username').setValue('testuser');
// Step over to see what happens
});
});VS Code Integration
1. Create Debug Configuration
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug WDIO Tests",
"program": "${workspaceFolder}/node_modules/@wdio/cli/bin/wdio.js",
"args": ["${workspaceFolder}/wdio.conf.js"],
"skipFiles": ["<node_internals>/**"]
}
]
}2. Debug from VS Code
- Set breakpoints in your test files
- Press F5 or click "Run and Debug"
- Use debug controls (step over, step into, etc.)
Benefits of Using --inspect
- Real-time variable inspection
- Step-through debugging (line by line)
- Call stack examination
- Breakpoint management
- Async/await debugging support
- Much more powerful than
console.log
Quick Debugging Recipe
// For quick debugging sessions:
exports.config = {
execArgv: ['--inspect-brk'], // Pause at start
specs: ['./test/specific-test.spec.js'], // One test only
maxInstances: 1
}
// In your test:
it('debug this', async () => {
await browser.url('/');
debugger; // Execution stops here
// Use F10 (step over) and F11 (step into) to debug
await someFunction();
});This approach transforms your test development from "console.log debugging" to professional, interactive debugging with full access to variables, call stacks, and execution flow.
As described below, we can add debugger/brakepoint in code and do a debugger when we coding, please go through the method below, and if everything is okay, please give a guide in the Readme under
/apps/dbb/README.mdof how to set breakpoint and do debugging.The
execArgv: ['--inspect']option enables the Node.js debugger for your WebDriverIO test execution. Let me break down what this means and how to use it:What is
--inspect?--inspectis a Node.js command-line flag that:How it Works
Debugging Workflow
1. Start Debugging
# Run tests with debugger enabled npx wdio wdio.conf.jsYou'll see output like:
2. Connect Chrome DevTools
chrome://inspect3. Set Breakpoints in Your Test Code
Common
execArgvOptionsPractical Debugging Example
1. Setup for Step-by-Step Debugging
2. Debug a Specific Test
VS Code Integration
1. Create Debug Configuration
2. Debug from VS Code
Benefits of Using
--inspectconsole.logQuick Debugging Recipe
This approach transforms your test development from "console.log debugging" to professional, interactive debugging with full access to variables, call stacks, and execution flow.