Debugging on WebDriverIO from VSCode
One of the challenges I faced when I started using WebDriverIO on VSCode is “Debugging”. It was not that easy for me to invoke the debugger and start debugging my scripts to understand the failure reason. I have always been using “Console.log()” whenever I wanted to understand the execution progress. I knew, it was never easy for me to understand more information if there is any failure.
After exploring some sources online I got to know some of the options to debug on VSCode and I have added those below.
NOTE: Remove/Kill every tab opened within VSCode Terminal and close Terminal within VSCode if its open.
Here are a few options and step by step process to debug your scripts on VSCode:
Option 1:
#1 Select View -> Command Palette… in VSCode or press command+shift+p to invoke Command Palette
#2 Enter “Auto attach” and select “Debug: Toggle Auto Attach” option displayed from the filtered list
#3 Select “Always Auto attach to every Node.js process launched in the terminal”
#4 Place breakpoints on the script
#5 Invoke a new terminal and execute the script from Terminal. We can see the debugger is launched and the execution holds at the step where breakpoint is in place,
Option 2:
#1 Open the config file, for ex. wdio.conf.js file and add the below line of code and save the file,
execArgv: [` — inspect`],
#2 Select View -> Command Palette… in VSCode or press command+shift+p to invoke Command Palette.
#3 Enter “Auto attach” and select “Debug: Toggle Auto Attach” option displayed from the filtered list
#4 Select “Only With Flag Only auto attach when the `— inspect` flag is given”
#4 Place breakpoints on the script
#5 Invoke a new terminal and execute the script from Terminal. We can see the debugger is launched and the execution holds at the step where breakpoint is in place,
Option 3:
#1 Invoke a new Terminal within VSCode
#2 Click on the small dropdown next to the + option in the Terminal,
#3 Select “JavaScript Debug Terminal” option. We can see a new tab is launched with the label as “JavaScript Debug Terminal”,
#4 Place breakpoints on the script
#5 Execute the script from Terminal from the tab “JavaScript Debug Terminal”. We can see the debugger is launched and the execution holds at the step where breakpoint is in place,
I hope these options provided above would help you to debug the script resolve the issues faster. Happy debugging !