Colorized console output does not work in iOS builds but works for Android builds #64491
Comments
jonahwilliams
added
a: quality
|
It looks like the VM Service logs have some escaping applied which we need to handle when processing. |
flutter doctor -v |
TahaTesser
added
found in release: 1.22
|
@jmagman does your logger change resolve this? |
|
I noticed today on 1.22.1 (beta channel) it’s working as expected again in iOS. |
|
Awesome, tentatively closing - Thanks @jmagman ! |
|
#66399 isn't available until 1.23.0-7.0.pre, so not sure what would have fixed this on 1.22.1. |
|
@jmagman @jonahwilliams this is still happening now and I'm using |
|
It's very simple to reproduce actually, simply try printing this in iOS vs Android: In android you'll get the correct colored output: iOS doesn't apply the ansi color escape: Baseline, echoing in the terminal works as expected: |
|
@jmagman is there any way you can point me in the direction of where to look so I can submit a PR for this, if it's something simple? Would love to have this working again for debugging. Thanks! |
|
@acoutts maybe some processing needed in flutter/packages/flutter_tools/lib/src/ios/devices.dart Lines 721 to 722 in e5322ac I haven't looked into it though. |
|
Thanks! That's exactly the nudge I needed to start digging. |
|
I think that regex is ok, because it prints fine when I extract that to a small test: final _debuggerLoggingRegex = RegExp(r'^\S* \S* \S*\[[0-9:]*] (.*)');
String _debuggerLineHandler(String line) =>
_debuggerLoggingRegex.firstMatch(line)?.group(1) ?? line;
final line1 = '\x1B[38;5;196mabcd';
print(line1);
print(_debuggerLineHandler(line1));
|
|
@jmagman any pointers on where else I can look? edit void main() {
final line1 = '\x1B[38;5;196mabcd';
print(line1);
log(line1);
runApp(
const Center(
child: Text(
'Hello, world!',
key: Key('title'),
textDirection: TextDirection.ltr,
),
),
);
}
So what is different about |
Are you able to step through the tool code and put breakpoints in the debugger logging? That's probably the easiest way to debug this. |
|
I've been trying it out but seems like none of the stream subscription handlers in
I did learn that putting an ANSI color print statement in the constructor of For example, the constructor for |
|
Aha so by the time the output line makes it to
|
That's exactly how it's coming from lldb. How does it look in Xcode? |
|
Ah interesting! Also broken there: So it appears this is not a Flutter issue then. Any idea where I can file for this one? |
|
Probably need to de-mangle it and pass along the color encoding? I haven't investigated this, that's why it's not fixed. 🙂 flutter/packages/flutter_tools/lib/src/base/terminal.dart Lines 166 to 172 in 33b183e |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
This issue is a bit complex, but we could solve it by changing print to developer.log import 'dart:developer' as developer; developer.log('\u001b[35m xxxxxxx'); |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-ios
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
|
It's funny that this works fine with just Dart code, like if you create a CLI tool and run it from VSCode the coloring works fine but if its Flutter code it shows the escape code. |
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
|
I have the same problem and couldn't find any solid solution yet. Created a class copy of the ConsoleLog in the package just with import 'dart:io';
import 'package:logger/logger.dart';
class IosConsoleOutput extends LogOutput {
@override
void output(OutputEvent event) {
event.lines.forEach(stderr.writeln);
}
}Then on the Logger Configurations logger = Logger(
printer: ...,
output: MultiOutput([
// I have a file output here
Platform.isIOS ? IosConsoleOutput() : ConsoleOutput(),
]),
filter: ProductionFilter(), // or use any other filter
);Basicly replaced the the As I mentioned the IOS Simulators wont output any log in this case. So maybe we should use device_info package and check if the device is simulator and use the normal output. |
|
PROGRESS import 'dart:developer';
import 'package:logger/logger.dart';
class DeveloperConsoleOutput extends LogOutput {
@override
void output(OutputEvent event) {
final StringBuffer buffer = StringBuffer();
event.lines.forEach(buffer.writeln);
log(buffer.toString());
}
}logger = Logger(
printer: ...,
output: MultiOutput([
// I have a file output here
DeveloperConsoleOutput(),
]),
filter: ProductionFilter(), // or use any other filter
); |
|
I tried your code but it's not working on my side. I am compiling on a iPad simulator. I made 4 kinds of logs : logger.d('Test log DEBUG');
logger.i('Test log INFO');
logger.w('Test log WARNING');
logger.e('Test log ERROR');And I can't see any difference between the colors in the output : 
EDIT : It was because of my printer. See message below |
|
It was not working because I was using this custom printer (found in the documentation) : // This is WRONG
class MyPrinter extends LogPrinter {
@override
List<String> log(LogEvent event) {
return [event.message];
}
}However, the class has to extend So it would be something like this : // This is GOOD
class MyPrinter extends PrettyPrinter {
@override
List<String> log(LogEvent event) {
// Do something if necessary
return super.log(event);
}
}And the config like this : logger = Logger(
printer: MyPrinter(),
output: DeveloperConsoleOutput(),
);And the DeveloperConsoleOutput class by @Destanci : import 'dart:developer';
import 'package:logger/logger.dart';
class DeveloperConsoleOutput extends LogOutput {
@override
void output(OutputEvent event) {
final StringBuffer buffer = StringBuffer();
event.lines.forEach(buffer.writeln);
log(buffer.toString());
}
} |
|
This is not releated to the topic here, but to the package it self. But gotta put the answer for @icodeyou here I guess. Details
I've guessed that the problems was with the package settings. I put '...' on the comment up there for the printer parameter because the settings was so long. If you wonder how the setting was here you go: printer: PrettyPrinter(
stackTraceBeginIndex: 0,
methodCount: 2,
errorMethodCount: null,
lineLength: 120,
colors: true,
printEmojis: true,
printTime: true,
levelColors: {
/*
0: Black, 8: Grey
1: Red, 9: Red Ascend
2: Green, 10: Green Ascend
3: Yellow 11: Yellow Ascend
4: Blue 12: Blue Ascend
5: Purple 13: Purple Ascend
6: Turquoise 14: Turquoise Ascend
7: White 15: Bright White
*/
Level.trace: const AnsiColor.fg(6),
Level.debug: const AnsiColor.fg(8),
Level.info: const AnsiColor.fg(3),
Level.warning: const AnsiColor.fg(5),
Level.error: const AnsiColor.fg(9),
Level.fatal: const AnsiColor.fg(1),
},
),And I dont think you need to make another class for this. If you want to set Logger only if some certain conditions are done, then just add/remove DeveloperConsoleOutput to the MultiOutput List with that condition. Writing some if statements in the class will make that condition to be checked every time you try to log. DO NOT forget the filter parameter tho. That's the one who decides if the log will be printed or not. Just put ProductionFilter if you are like me that gonna log even on release versions. |
|
I was not saying that we always have to extend the class |
Don't really get it; I don't have this "log" method on my |
Its in the Might cofused bc I'm not using it like import 'dart:developer' as developer;
// ...
developer.log(buffer.toString()); |
|
developer.log worked for me too. If you use loggy, you can copy the PrettyPrinter class and change the logging from 'print' to 'developer.log' to workaround this issue. class DeveloperConsolePrinter extends LoggyPrinter {
// ... other code from PrettyPrinter
@override
void onLog(LogRecord record) {
final time = record.time.toIso8601String().split('T')[1];
final callerFrame =
record.callerFrame == null ? '-' : '(${record.callerFrame?.location})';
final logLevel = record.level
.toString()
.replaceAll('Level.', '')
.toUpperCase()
.padRight(8);
final color =
_colorize ? levelColor(record.level) ?? AnsiColor() : AnsiColor();
final prefix = levelPrefix(record.level) ?? _defaultPrefix;
log(color(
'$prefix$time $logLevel ${record.loggerName} $callerFrame ${record.message}'));
if (record.stackTrace != null) {
log(record.stackTrace!.toString());
}
}
}And initialize loggy with this void main() {
Loggy.initLoggy(
logPrinter: const DeveloperConsolePrinter(showColors: true)
);
} |
|
Without third party package, what is the easiest way to display a colored text using |
|
On IOS (XCode Debug Console), it's the For developer library examples: https://docs.flutter.dev/testing/code-debugging The final code from thoose documents will look like this: final WHITE_CYAN = '\u001b[37;46m';
final RESET = '\u001b[0m';
developer.log("${WHITE_CYAN}I'm colorful, ${RESET}I'm not colorful");
// btw, you dont need to reset color all the time, next developer.log should be already reset. |
|
|
That is why I've put a buffer before it here The solution is dont put multiple |
|
With Android Studio it won't work :) |
|
I just noticed that the colors seem to work when running the app wirelessly on a real iOS device, but not on simulators or when attached with a cable. |
and others
Recently, colorized output has broken in iOS builds but works in Android builds.
Sample app output in Android (expected colors):
The same app run on an iPhone (broken):
I submitted this to the dart-code repo but was advised to file an issue here after we realized this is affecting more than just VSCode and even when run via CLI.
Related issue I submitted to the dart-code repository:
Dart-Code/Dart-Code#2733
Steps to Reproduce
flutter run -d iphoneto see it broken,flutter run -d androidto see it working.Expected results:
Colorized output should work on both platforms.
Actual results:
It only works on Android.
Logs (iOS)
The text was updated successfully, but these errors were encountered: