Debugging Javascript Webdriver IO in Visual Studio Code revisited

This post is a follow up to a nice Bill Agee's tutorial on Webdriver IO debugging in Visual Studio Code. If you follow the tutorial carefully, you can still fail at the very last step where the VS Code is supposed to pause upon a breakpoint. At this point you can receive the "Cannot connect to runtime process (timeout after 10000 ms)." message indicating that the debugging protocol is not configured properly. Anyway, to summarize steps from Bill's tutorial:

1. create a new folder under VS
2. npm init
3. npm install webdriverio
4. .\node_modules\.bin\wdio config, accept default answers but remember to check selenium-standalone when asked about which services should be added
5. the .\wdio.conf.js file is created
6. create an example test method in a file .\test\test1/js (the example code is taken from the WebdriverIO page)

   var assert = require('assert');
   
   describe('Top level', function() {
           
       it( 'Unit test function definition', function() {
               
           browser.url('https://duckduckgo.com/');
           browser.setValue('#search_form_input_homepage', 'WebdriverIO');
               
           browser.click('#search_button_homepage');
   
           var title = browser.getTitle();
   
           assert.equal(title, 'WebdriverIO na DuckDuckGo');
       });
   
   });   
   

   Node the actual title description is language specific so you could probably tweak the assertion. Mine is specific to my Polish locale.
7. Modify the .\vscode\launch.json so that when F5 is hit, the web driver io is invoked

   {
       "version": "0.2.0",
       "configurations": [
           {
               "type": "node",
               "request": "launch",
               "protocol": "inspector",
               "port": 5859,
               "name": "WebdriverIO",
               "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/wdio",
               "windows": {
                   "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/wdio.cmd"
               },
               "timeout": 1000000,
               "cwd": "${workspaceRoot}",
               "console": "integratedTerminal",
               "args":[
                   "", "wdio.conf.js",
                   "--spec", "test/test1.js"
               ]
           }   ]
   }
   

   Note that protocol and ports are explicit
8. Go to the .\wdio.conf.js file and add

       debug: true,
       execArgv: ['--inspect=127.0.0.1:5859'],
   

   flags that set the very same debugging port VS is expecting. You can also replace FF with Chrome in the capabilities section.
9. Create a breakpoint, hit F5 and see that this time the VS picks the breakpoint correctly