Call a service function from browser console in angular 6

Question

I have just made a few changes to some methods in one of the services, and wanted to see if the changes had worked properly or not, but instead of creating a class and testing them out manually, I wanted to know if there was a way to call the functions in chrome's console.

I had followed this example for implementing a logger service, and added to my already created jwt service below.

Unfortunately I don't have any implementation of the error in the application so I can't really test it directly. I wanted to check if both conditions are working properly. I checked this answer out but when I try it for myself it gives me a null error (maybe because this expects a component and I want to test a service perhaps).

To give an example, here is my class, and a method as an example which I want to test in the console:

Jwt.service.ts

import { Injectable } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { LoggerService } from "src/app/services/logger/logger.service";
/**
* Injects the JSON web token service in the project
*/
@Injectable({
  providedIn: 'root'
})

/**
* This service is responsible for management of the jwt token, which would be used
* for authentication/authorization purposes. The service includes methods to save, delete
* and retrieve the token
*/
export class JwtService {


  constructor(
    private translate: TranslatePipe,
    private logger: LoggerService) { }

  /**
   * This method fetches the token from local storage and returns it.
   *
   * @method getToken
   * @return
   */
  getToken(): string {
    var token = window.localStorage['jwtToken'];
    if (token !== undefined) {
      return token;
    } else {
      this.logger.invokeConsoleMethod('error', this.translate.transform("generic[responses][error][token][001]"));
      throw new Error(this.translate.transform("generic[responses][error][token][001]"));
    }
}

You can just `console.log(new JwtService())` somewhere, right click on it in a console, save it as a variable and then use it as you wish. — Roberto Zvjerković, Jan 16 '19 at 08:44
Works, although I'd rather avoid saving variables in the console at runtime: +1 — Muhammad Hamza, Jan 16 '19 at 09:31

score 14 · Accepted Answer · edited May 10 '20 at 14:19

To access a service in a console, it needs to be a global variable i.e. in window object of browser. There is a little trick which i use to access a service class instance in the console.

In the constructor of the console, you can do window.myService=this but typescript wont let you do that because of window definition. Instead, you can do window['myService'] = this. Using this you can access the service using myService or window.myService.

In your case it will be:

import { Injectable } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { LoggerService } from "src/app/services/logger/logger.service";
/**
* Injects the JSON web token service in the project
*/
@Injectable({
  providedIn: 'root'
})

/**
* This service is responsible for management of the jwt token, which would be used
* for authentication/authorization purposes. The service includes methods to save, delete
* and retrieve the token
*/
export class JwtService {


  constructor(
    private translate: TranslatePipe,
    private logger: LoggerService) {
          window['myService'] = this;
   }

  /**
   * This method fetches the token from local storage and returns it.
   *
   * @method getToken
   * @return
   */
  getToken(): string {
    var token = window.localStorage['jwtToken'];
    if (token !== undefined) {
      return token;
    } else {
      this.logger.invokeConsoleMethod('error', this.translate.transform("generic[responses][error][token][001]"));
      throw new Error(this.translate.transform("generic[responses][error][token][001]"));
    }
}

You can then access your service in the console using myService or window.myService.

Also, make sure to remove this line for production as it might cause security issues.

TypeScript won't let you do this . . . window.errorService = this; But it will let you do this . . . window['errorService'] = this; And you can avoid eval — Carl Armbruster, Feb 07 '20 at 01:01

Call a service function from browser console in angular 6

1 Answers1

Linked