浏览器console学习汇总

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
};

参考资料：

• mdn-console
• console.log自定义输出样式深究