VS 코드를 사용하여 진동 개발을 위한 컬러 측정

14776 단어 vscodedartflutter
새로운 개발 프로젝트의 어느 순간에 로그 기록은 더 이상 좋은 것이 아니라 필요한 것이다.나는 최근에 떨림 프로젝트를 하나 해서 이 전환점에 도달했다.백그라운드에서 RESTAPI를 호출하는 것과 같은 일이 발생했는데, 나는 그것들이 정상적으로 작동하는지 모르겠다.임시 print() 문장을 추가하고 싶지 않지만, 로그가 제공하는 기본적인 가시성이 필요합니다.
좋은 시간을 선택해서 로그를 추가한 후에 나는 어떤 쓸모가 있는지 연구를 좀 했다.요구 사항은 간단합니다.
  • 간단 - 이벤트 설정 및 추가 용이
  • 은 로그 출력의 기본 필드를 지원합니다
  • 시간 - 이벤트 발생 시간 스탬프
  • 메시지 - 발생한 일을 설명하는 문자열
  • 레벨 - 정보, 경고, 오류 여부를 나타냅니다.
  • 위치 - 이벤트는
  • 의 코드 라이브러리에서 나온 곳
  • 전체적으로 지루한 능력을 감소하지만 필요한 구역에
  • 증가
  • 컬러 로그 출력으로 문제 발생 여부와
  • 확인
    앞으로 또 다른 요구가 있을 수 있지만, 이것은 일을 시작하기에 충분하다.

    로깅 설정


    다행히도 Dart팀은 logging가방을 제공했는데 내가 원하는 것처럼 보였다.다음 몇 단계는 설정을 상세하게 소개했다.
    우선,pubspec에 가방을 추가합니다.yaml 파일:
    dependencies:
      logging: ^0.11.4
    
    다음에 초기화 함수를 만듭니다.lib/infra/logger에 놓을 것을 선택하겠습니다.던지기:
    import 'package:logging/logging.dart';
    
    void initRootLogger() {
      Logger.root.level = Level.ALL; // defaults to Level.INFO
      Logger.root.onRecord.listen((record) {
        print(
            '${record.time}: ${record.loggerName}: ${record.level.name}:  ${record.message}');
      });
    }
    
    void exampleLogs(Logger logger) {
      print('example print');
      logger.finest('example finest log entry');
      logger.finer('example finer log entry');
      logger.fine('example fine log entry');
      logger.info('example info log entry');
      logger.warning('example warning log entry');
      logger.severe('example severe log entry');
      logger.shout('example shout log entry');
    }
    
    보시다시피, 지원하는 다양한 단계에서 예시 로그 출력을 생성하는 함수를 만들었습니다.
    "main ()"함수에서 루트 레코더를 초기화하는 데 사용할 새 함수를 호출하여 로깅을 즉시 사용하고 구성해야 합니다.
    // needed to use the initRootLogger function
    import '../infra/logger.dart';
    
    void main() {
      // initialize the root logger prior to running the app
      initRootLogger();
      runApp(Founce());
    }
    
    마지막으로 로그 기록을 할 수 있도록 기존 클래스에 코드를 추가했습니다.
    // add this import in every file where logging is desirable
    import 'package:logging/logging.dart';
    // only needed for exampleLogs
    import '../infra/logger.dart';
    
    class SiteInfoService with ChangeNotifier {
      static final _log = Logger('SiteInfoService');
      // other class variables ...
    
      void _getSiteUpdates() {
        // call the function to generate the examples
        exampleLogs(_log);
        // make a logging call, add similar where desired
        _log.info('retrieving site updates');
        // get the site updates ...
      }
    }
    
    이것은 매우 빠르고 간단합니다. 이것은 Visual Studio 코드의 디버깅 컨트롤러에 있는 외관입니다. 이것은 제가 Flitter 개발에 사용하기로 선택한 IDE입니다.

    좋아, 시간 스탬프, 로그에서 온 클래스, 레벨, 메시지가 있어.이 모든 게 다...파란색일반적인 인쇄 메시지, 로그 출력과flatter 또는 VS 코드에서 온 메시지 사이에는 차이가 없습니다.나는 설정과 로그 호출의 간단함에 만족하지만, 만약 예견할 수 있는 장래에 내가 그것을 사용하려고 한다면, 일부 착색은 매우 유용할 것이다.

    음영처리 추가


    최초의 일부 검색은 사람들이 디버그 컨트롤러에 색을 추가하려고 시도했지만 성공하지 못했다는 것을 보여 주었다.주요 문제는 print()이 VS 코드에 디버그 컨트롤러로 출력될 때 ANSI color codes이 무시되는 것 같습니다.
    포기의 가장자리에서 나는 구글이 alternate method의 로그 기록을 묘사한 것을 알아차렸다.본질적으로, developer.log()에 대한 호출을 사용하여 메시지를 출력합니다. print()이 아니라.ANSI 색상 코드는 VS 코드 디버깅 콘솔의 색상 출력에 사용할 수 있습니다.다음은 그의 현재 모습이다.

    나는 그것의 결말을 좋아한다.
  • 의 정밀, 더욱 정밀하고 가장 정밀한 측정정이 배경에 융합되었다.
  • 정보 사건이 더욱 뚜렷해지고 그곳에서 더욱 우렁차게 변했다.
  • 인쇄 문과 Flutter 또는 VS 코드의 다른 내용은 파란색으로 표시되어 구분하기 쉽습니다.
  • 나는 좀 더 잘할 수 있기를 바란다.
  • 은 시간이 항상 똑같이 길기 때문에, 나는 차라리 그것이 먼저 오기를 원한다.불행히도 developer.log()은 기록기 이름을 최우선으로 삼았다.이것은 서로 다른 길이의 클래스가 메시지의 나머지 부분을 바꾸고 시각적으로 더욱 혼란스럽게 한다는 것을 의미한다.레코더 이름을 채우는 것은 도움이 되지만, 추가 공백은 이상적이지 않습니다.
  • 코드에 컬러 로그를 추가하려면 상기 설정과 크게 다른 initRootLogger() 함수에 있습니다.
    import 'package:logging/logging.dart';
    import 'package:flutter/foundation.dart';
    import 'dart:developer' as developer;
    
    void initRootLogger() {
      // only enable logging for debug mode
      if (kDebugMode) {
        Logger.root.level = Level.ALL;
      } else {
        Logger.root.level = Level.OFF;
      }
      hierarchicalLoggingEnabled = true;
    
      // specify the levels for lower level loggers, if desired
      // Logger('SiteInfoService').level = Level.ALL;
    
      Logger.root.onRecord.listen((record) {
        if (!kDebugMode) {
          return;
        }
    
        var start = '\x1b[90m';
        const end = '\x1b[0m';
        const white = '\x1b[37m';
    
        switch (record.level.name) {
          case 'INFO':
            start = '\x1b[37m';
            break;
          case 'WARNING':
            start = '\x1b[93m';
            break;
          case 'SEVERE':
            start = '\x1b[103m\x1b[31m';
            break;
          case 'SHOUT':
            start = '\x1b[41m\x1b[93m';
            break;
        }
    
        final message =
            '$white${record.time}:$end$start${record.level.name}: ${record.message}$end';
        developer.log(
          message,
          name: record.loggerName.padRight(25),
          level: record.level.value,
          time: record.time,
        );
      });
    }
    
    물론, 당신은 서로 다른 ANSI color codes을 선택하여 당신이 좋아하는 색을 맞춤 제작할 수 있습니다.이 새 초기화 코드에 대한 추가 지침:
  • dart:developer 패키지는 디버그 모드에서만 사용할 수 있습니다.이미지를 게시하는 데 로그인해야 한다면 다른 메커니즘이 필요합니다.
  • 은 단일 이름 기록기의 로그 기록 수준을 설정할 수 있습니다.로그를 클래스에 추가할 때, 나는 로그의 이름을 클래스 이름(예를 들어 static final _log = Logger('SiteInfoService');)으로 지정하는 레코더를 만들었습니다.이것은 초기화하는 동안 클래스별 로그 기록 수준을 제어할 수 있습니다 (예를 들어 Logger('SiteInfoService').level = Level.ALL;initRootLogger()).특정 영역을 디버깅하기 위해 루트 레코더 레벨을 Level.WARNING 같은 높은 레벨로 설정한 다음 디버깅 중인 클래스 레코더를 Level.ALL 같은 상세 레벨로 변경하십시오
  • 즐거운 인코딩, Dart, FLUTER 및 기타 위대한 개원 프로젝트에 기여해 주신 모든 분들께 감사드립니다!

    좋은 웹페이지 즐겨찾기