console下方法学习汇总
思维导图
console.log
当多人协作开发一个项目的时候可以自定义每个人的打印,便于快速的发现自己的问题;
用法:
第一个参数是字符串,以%c 开头接加上文案,第二个参数也是字符串,内容写css就好了
demo
console.log('%c 张三的输出','font-size:40px;color:red;')
console.log('%c 李四的输出','font-size:30px;color:blue;')
输出结果如下:
这样就便于每位开发者快速定位自己的问题。
大型项目打印
/**
* 红橙黄绿青蓝紫的颜色打印函数
* 下面为红色打印
* @param {} str
* @param {} =>{console.log(`%c${str}`
* @param {20px;color:red;'} 'font-size
*/
const redLog = (str) => {
console.log(`%c ${str}`, 'font-size:20px;color:#FF0000;')
};
/**
* 下面为橙色打印
* @param {} str
* @param {} =>{console.log(`%c${str}`
* @param {20px;color:#FF7D00;'} 'font-size
*/
const orangeLog = (str) => {
console.log(`%c ${str}`, 'font-size:20px;color:#FF7D00;')
};
/**
* 下面为黄色打印
* @param {} str
* @param {} =>{console.log(`%c${str}`
* @param {20px;color:#FFFF00;'} 'font-size
*/
const yellowLog = (str) => {
console.log(`%c ${str}`, 'font-size:20px;color:#FFFF00;')
};
/**
* 下面为绿色打印
* @param {} str
* @param {} =>{console.log(`%c${str}`
* @param {20px;color:#00FF00;'} 'font-size
*/
const greenLog = (str) => {
console.log(`%c ${str}`, 'font-size:20px;color:#00FF00;')
};
/**
* 下面为青色打印
* @param {} str
* @param {} =>{console.log(`%c${str}`
* @param {20px;color:#00FFFF;'} 'font-size
*/
const cyanLog = (str) => {
console.log(`%c ${str}`, 'font-size:20px;color:#00FFFF;')
};
/**
* 下面为蓝色打印
* @param {} str
* @param {} =>{console.log(`%c${str}`
* @param {20px;color:#0000FF;'} 'font-size
*/
const blueLog = (str) => {
console.log(`%c ${str}`, 'font-size:20px;color:#0000FF;')
};
/**
* 下面为紫色打印
* @param {} str
* @param {} =>{console.log(`%c${str}`
* @param {20px;color:#8B0000;'} 'font-size
*/
const purpleLog = (str) => {
console.log(`%c ${str}`, 'font-size:20px;color:#8B0000;')
};
export {
redLog,
orangeLog,
yellowLog,
greenLog,
cyanLog,
blueLog,
purpleLog
};