uni-app HBuilderX 真机调试和模拟器调试的控制台颜色问题

uni-app HBuilderX 真机调试和模拟器调试的控制台颜色问题

开发环境 版本号 项目创建方式
Mac mac m1
HBuilderX 3.8.7

示例代码：

echo -e "\033[5;32;41m 彩色 \033[0m"

console.log("\033[5;32;41m 这是彩色 \033[0m\n");

操作步骤：

运行h5 + app demo或者uniapp demo，到手机模拟器或者真机调试
demo里面的 js 部分写入 console.log("\033[5;32;41m 这是彩色 \033[0m\n");
然后 hbuilderX 的控制台打印这句话的时候会是红色的，我尝试了很多遍没有变化颜色

预期结果：

预期结果是类似于 console.log("\033[5;32;41m 这是彩色 \033[0m\n"); 在浏览器控制台输出的效果，当然我在自己电脑上也尝试过了，可以输出这样的彩色效果

实际结果：

实际效果是没有出现彩色

bug描述：

hbuilderX 内置控制台 真机运行和模拟器运行 时候 控制台输出的文字 不支持彩色输出


更多关于uni-app HBuilderX 真机调试和模拟器调试的控制台颜色问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

export function log(message, …args) { console.log(\x1b[32m[LOG]\x1b[0m ${message}, …args); // 绿色 // console.log("\033[5;32;41m 这是彩色 \033[0m\n"); console.log(’%c这是一个绿色的成功信息’, ‘color: green; font-size: 16px; font-weight: bold;’); console.log(’%c这是一个红色的错误信息’, ‘color: red; font-size: 16px; font-weight: bold;’); console.log(’%c这是一个黄色的警告信息’, ‘color: orange; font-size: 16px; font-weight: bold;’);
} export function info(message, …args) { console.info(\x1b[36m[INFO]\x1b[0m ${message}, …args); // 青色 } export function warn(message, …args) { console.warn(\x1b[33m[WARN]\x1b[0m ${message}, …args); // 黄色 } export function error(message, …args) { console.error(\x1b[31m[ERROR]\x1b[0m ${message}, …args); // 红色 } export function debug(message, …args) { console.log(\x1b[34m[DEBUG]\x1b[0m ${message}, …args); // 蓝色 }
我这样来定义也是不行的

更多关于uni-app HBuilderX 真机调试和模拟器调试的控制台颜色问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app开发过程中，使用HBuilderX进行真机调试和模拟器调试时，控制台输出信息的颜色设置对于开发者来说是一个重要的功能，它可以帮助我们更直观地识别日志级别和信息类型。虽然HBuilderX和uni-app本身对于控制台输出的颜色格式有一定的默认处理，但开发者有时可能需要自定义这些颜色以便更好地调试。

HBuilderX的控制台输出颜色主要通过日志级别来控制，比如info、warn、error等，这些级别通常会有不同的颜色以区分。然而，直接在uni-app代码中控制这些颜色并不直接可行，因为控制台的输出颜色主要由调试工具（如HBuilderX或模拟器）本身解析和渲染。

不过，我们可以通过在控制台输出时添加特定的ANSI转义序列来控制颜色，但这需要调试工具支持ANSI颜色码。以下是一个简单的示例，展示如何在JavaScript代码中插入ANSI颜色码来改变控制台输出的颜色：

// 定义ANSI颜色码
const reset = "\x1b[0m";
const bright = "\x1b[1m";
const dim = "\x1b[2m";
const underscore = "\x1b[4m";
const blink = "\x1b[5m";
const reverse = "\x1b[7m";
const hidden = "\x1b[8m";

const fg = {
  black: "\x1b[30m",
  red: "\x1b[31m",
  green: "\x1b[32m",
  yellow: "\x1b[33m",
  blue: "\x1b[34m",
  magenta: "\x1b[35m",
  cyan: "\x1b[36m",
  white: "\x1b[37m",
  crimson: "\x1b[38m" // Example of a non-standard color
};

const bg = {
  black: "\x1b[40m",
  red: "\x1b[41m",
  green: "\x1b[42m",
  yellow: "\x1b[43m",
  blue: "\x1b[44m",
  magenta: "\x1b[45m",
  cyan: "\x1b[46m",
  white: "\x1b[47m",
  crimson: "\x1b[48m" // Example of a non-standard color
};

// 使用示例
console.log(`${fg.green}这是一条绿色信息${reset}`);
console.warn(`${fg.yellow}${bg.black}这是一条黄色背景黑色文字的警告信息${reset}`);
console.error(`${fg.red}这是一条错误信息${reset}`);

请注意，上述代码中的ANSI颜色码在支持ANSI转义序列的终端或调试工具中才会生效。HBuilderX的控制台通常支持这些颜色码，但不同的模拟器和真机环境可能会有所不同。

最后，虽然可以在代码中自定义颜色，但建议尽量保持与HBuilderX和uni-app的默认颜色方案一致，以便于团队协作和代码的可读性。如果HBuilderX或uni-app未来提供了更直接的配置选项来控制控制台颜色，建议优先考虑使用这些官方支持的方法。

回到顶部