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]"));
    }
}

Answer 1

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.