Когда занимаешься разработкой и имеешь дело с тоннами отладочной информации, то невольно можно захотеть, чтобы эта информация выглядела красиво)
При разработке HTML5 проектов вся инфа отображается в консоли браузера и выводиться js командой console.log(‘some text’); Например в браузере Chrome эту консоль можно открыть нажав F12 и открыв вкладку Console и по умолчанию это выглядит так:
И всё бы ладно, но я увидел красочную (да ещё и с ссылками!) надпись которой Phaser выводит свою версию и захотел так же!)
После некоторого времени поиска инфы и написания кода у меня получился довольно удобный log-менеджер для проектов на Phaser+TypeScript! Вот как красиво получилось в итоге:
И выводится это простым кодом:
|
1 2 3 4 5 6 |
LogMng.system('Created by MonaxGames studio', 'http://monaxgames.com'); LogMng.info('some info for me'); LogMng.debug('простой дебаг'); LogMng.warn('wow wow easy!'); LogMng.error('everything is lost!'); LogMng.net('фиолетовенький для разнообразия)'); |
Вот весь листинг кода класса менеджера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
namespace LogMng { export const MODE_DEBUG = 'MODE_DEBUG'; export const MODE_RELEASE = 'MODE_RELEASE'; const DEBUG = 'DEBUG'; const INFO = 'INFO'; const NETWORK = 'NETWORK'; const WARNING = 'WARNING'; const ERROR = 'ERROR'; // current mode var mode: string = MODE_DEBUG; // available levels var levels: Array<string> = [DEBUG, INFO, NETWORK, WARNING, ERROR]; export function setMode(aMode: string) { switch (aMode) { case MODE_DEBUG: levels = [DEBUG, INFO, NETWORK, WARNING, ERROR]; break; case MODE_RELEASE: levels = [WARNING, ERROR]; break; } } export function getMode(): string { return mode; } function getCSS(bgColor: string): string { return 'background: ' + bgColor + ';' + 'background-repeat: no-repeat;' + 'color: #1df9a8;' + 'line-height: 16px;' + 'padding: 1px 0;' + 'margin: 0;' + 'user-select: none;' + '-webkit-user-select: none;' + '-moz-user-select: none;'; }; function getLink(color: string): string { return 'background: ' + color + ';' + 'background-repeat: no-repeat;' + 'font-size: 12px;' + 'color: #446d96;' + 'line-height: 14px'; }; function log(aMsg: string, aLevel: string = DEBUG) { if (levels.indexOf(aLevel) < 0) return; var css = ''; switch (aLevel) { case INFO: css = 'background: #308AE4; color: #fff; padding: 1px 4px'; break; case WARNING: css = 'background: #f7a148; color: #fff; padding: 1px 4px'; break; case ERROR: css = 'background: #DB5252; color: #fff; padding: 1px 4px'; break; case NETWORK: css = 'background: #7D2998; color: #fff; padding: 1px 4px'; break; case DEBUG: default: css = 'background: #ADADAD; color: #fff; padding: 1px 4px'; } console.log("%c%s", css, aLevel, aMsg); }; export function system(aMsg: string, aLink: string = '') { console.log("%c %c %c %s %c %c %c %c%s", getCSS('#5C6166'), getCSS('#4F5357'), getCSS('#313335'), aMsg, getCSS('#4F5357'), getCSS('#5C6166'), getLink('none'), getLink('none'), aLink ); } export function debug(aMsg: string) { log(aMsg, DEBUG); } export function info(aMsg: string) { log(aMsg, INFO); } export function net(aMsg: string) { log(aMsg, NETWORK); } export function warn(aMsg: string) { log(aMsg, WARNING); } export function error(aMsg: string) { log(aMsg, ERROR); } } |
Ещё из примечательных особенностей стоит отметить возможность указывать Mode логирования, что позволяет легко переключать уровни логирования при старте приложения. Например вы хотите компилить релизную версию и для этого нужно убрать весь выводимый дебаг и прочую ненужную для неокрепшего мозга игрока информацию. Для этого при старте делаем настройки лога вот так:
|
1 2 3 |
// LogMng settings LogMng.setMode(LogMng.MODE_RELEASE); LogMng.system('current log mode: ' + LogMng.getMode()); |
И всё, ненужные в релизе типы сообщений (debug, info, net) больше не выводятся.
Этот менеджер уже входит в мой шаблон для проектов на Phaser+TypeScript под VisualStudio и свободно доступен на GitHub, и там же пример его использования в файле Boot.ts, налетай!)
Красочных дебагов всем!)
