debug-console 调试打印
// 颜色
const scopeColor = {
'Default' : '\u001b[0m', // (默认颜色)
'Black' : '\u001b[30m', //(黑色)
'Red' : '\u001b[31m', //(红色)
'Green' : '\u001b[32m', //(绿色)
'Yellow' : '\u001b[33m', //(黄色)
'Blue' : '\u001b[34m', //(蓝色)
'Purple' : '\u001b[35m', //(紫色)
'Cyan' : '\u001b[36m', //(青色)
'White' : '\u001b[37m' //(白色)
}
// 背景
const descColor = {
'BlackBackground' : '\u001b[40;1;37m', //(黑色背景,加粗,白色文字)
'RedBackground' : '\u001b[41;1;37m', //(红色背景,加粗,白色文字)
'GreenBackground' : '\u001b[42;1;37m', //(绿色背景,加粗,白色文字)
'YellowBackground' : '\u001b[43;1;37m', //(黄色背景,加粗,白色文字)
'BlueBackground' : '\u001b[44;1;37m', //(蓝色背景,加粗,白色文字)
'PurpleBackground' : '\u001b[45;1;37m', //(紫色背景,加粗,白色文字)
'CyanBackground' : '\u001b[46;1;37m', //(青色背景,加粗,白色文字)
'WhiteBackground' : '\u001b[47;1;30m' //(白色背景,加粗,黑色文字)
}
type ScopeColor = {
scope:'Default' | 'Black' | 'Red' | 'Green' | 'Yellow' | 'Blue' | 'Purple' | 'Cyan' | 'White';
desc:'BlackBackground' | 'RedBackground' | 'GreenBackground' | 'YellowBackground' | 'BlueBackground' | 'PurpleBackground' | 'CyanBackground' | 'WhiteBackground';
};
createDebug(
FLAG:boolean | string = false, //是否打印
scope: string = 'Debuger', //域名称,可以写组件名,或者某个方面的打印,如:Worker、Debuger
color: ScopeColor = { scope:'Red', desc:'RedBackground' }, //颜色
localStorageKey: string = 'VITE_BROWSER_NODE_DEBUG'
)
//打包线上开启调试
localStorage 设置 VITE_BROWSER_NODE_DEBUG = true 既可开启打印调试
import React, { useEffect, useState } from "react";
import { createDebug } from '@feige0629/debug-console';
/**
* vitejs中使用
*
* .env 配置文件
* .env.development 配置文件
* .env.production 配置文件
*
* 在配置文件中设置 VITE_BROWSER_NODE_DEBUG = true
*
* 使用:import.meta.env.VITE_BROWSER_NODE_DEBUG
*/
const debug = createDebug(import.meta.env.VITE_BROWSER_NODE_DEBUG);
export function App(){
const name = '飞哥';
// 打印
debug('姓名:', name);
return <div>打印测试</div>
}