在角度6中从浏览器控制台调用服务功能 [英] Call a service function from browser console in angular 6

问题描述

我刚刚对其中一种 services 中的方法进行了一些更改，并想查看更改是否正常工作，而不是创建一个类并手动对其进行测试，我想知道是否有一种方法可以在chrome的控制台中调用这些函数.

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.

我关注了此用于实现记录器服务的示例，并将其添加到下面已经创建的 jwt服务中.

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

不幸的是，我没有在应用程序中对该错误进行任何实现，因此我无法真正直接对其进行测试.我想检查两个条件是否都正常运行.我检查了此答案，但是当我自己尝试一下，它会给我一个 null 错误(也许是因为这需要一个组件并且我可能想测试服务).

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

推荐答案

要在控制台中访问服务，它必须是全局变量，即在浏览器的窗口对象中.我有一个小技巧可以用来访问控制台中的服务类实例.

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.

在控制台的构造函数中，您可以执行 window.myService = this ，但是由于 window 的定义，打字稿无法执行该操作.相反，您可以执行 window ['myService'] = this .使用此功能，您可以使用 myService 或 window.myService 访问该服务.

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

然后，您可以使用 myService 或 window.myService 在控制台中访问您的服务.

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.

这篇关于在角度6中从浏览器控制台调用服务功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！