简介

debug-console 调试打印

1、使用

颜色类型

// 颜色
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>
}