How to debug component/typescript code when runnin

问题:

Most of the questions I've read so far only deal with trying to debug the unit tests / e2e tests when running Protractor / vscode (or rather how to make the breakpoints work in vscode)

In my case, I'm able to place breakpoints in my e2e tests and vscode have no issues with them, but the problem, once I'm inside the it() function, I have no clue how to access/inspect my components

I know e2e tests are not about components, but in this case, I was able to find a nasty bug that only e2e tests were able to catch, and I really need to inspect component variables to see what's going on

    it('should do something with ProductComponent', () =>
{
    // Code...
        
    // Once I'm here, how can I inspect ProductComponent anyway??
}

where, for example, ProductComponent looks like this:

@Component({
    selector   : 'app-product',
    templateUrl: './product.component.html',
    styleUrls  : ['./product.component.css']
})
export class ProductComponent
{
    productId: number;
    productSKU: number;
    
    // ...
}

回答1:

Try browser.pause() or browser.explore() methods. I think that explore fits more into your needs.

http://www.protractortest.org/#/api?view=ProtractorBrowser.prototype.pause http://www.protractortest.org/#/api?view=ProtractorBrowser.prototype.explore

import {browser} from 'protractor';

describe('suite', () => {
    it('test',() => {
        browser.pause();
        browser.explore();
    });
});