How to debug protractor in VS CODE?

I'm trying to debug protractor test script but I'm not able to find good source to understand how to debug, can any one suggest me few best sites to refer and how many ways can we debug the protractor test script.

Solution

you have 2 best ways.

Method A:

1) Configure VSCode.

This is my launch configuration: (change the folder path and files as needed).

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Backoffice",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "stopOnEntry": false,
            "args": ["${workspaceRoot}/e2e/backoffice/protractor_backoffice.js"],
            "sourceMaps": true,
            "outFiles": [ "${workspaceRoot}/e2e/backoffice/**/*.js" ],
            "smartStep": true
        }
    ]
}

2) Once you have done this you just can run the debugger and it should work.

INFO: To add breakpoints just write in your code "debugger;" (without quotes).

VERY IMPORTANT!!!! To syncronize your code with your browser you have use async functions and await methods.

example of async/await and breakpoint:

async myFunction() {
 debugger;
 await this.myElement.click();
}

Method B:

Open a terminal in VSCode and write:

node --inspect-brk path/to/protractor/bin/protactor path/to/protractorconfig.js

example:

node --inspect-brk .\node_modules\protractor\bin\protractor .\e2e\backoffice\protractor_backoffice.js

It opens dev chrome tools, in there is pretty much as VSCode debugger, but it gives a bit more information.

Good luck!