zkz-log
Version:
这是一个打印包，可以在控制台上打印彩色标签，帮助您快速定位日志信息。
432 lines (413 loc) • 11.8 kB
JavaScript
/**
* author: zkz
* @createTime: 2024-11-25 16:57:36
* @Description: 打印模块方法
*/
(function webpackUniversalModuleDefinition(root, factory) {
if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();
else if (typeof define === 'function' && define.amd) define([], factory);
else if (typeof exports === 'object') exports['log'] = factory();
else root['log'] = factory();
})(window, function() {
return /******/ (function(modules) {
// webpackBootstrap
/******/ // The module cache
/******/
var installedModules = {}; /******/ // The require function
/******/
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/
if (installedModules[moduleId]) {
/******/
return installedModules[moduleId].exports;
/******/
} /******/ // Create a new module (and put it into the cache)
/******/ var module = (installedModules[moduleId] = {
/******/
i: moduleId,
/******/
l: false,
/******/
exports: {}
/******/
}); /******/ // Execute the module function
/******/
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded
/******/
/******/ module.l = true; /******/ // Return the exports of the module
/******/
/******/ return module.exports;
/******/
} /******/ // expose the modules object (__webpack_modules__)
/******/
/******/
/******/ __webpack_require__.m = modules; /******/ // expose the module cache
/******/
/******/ __webpack_require__.c = installedModules; /******/ // define getter function for harmony exports
/******/
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/
if (!__webpack_require__.o(exports, name)) {
/******/
Object.defineProperty(exports, name, {
enumerable: true,
get: getter
});
/******/
}
/******/
}; /******/ // define __esModule on exports
/******/
/******/ __webpack_require__.r = function(exports) {
/******/
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/
Object.defineProperty(exports, Symbol.toStringTag, {
value: 'Module'
});
/******/
}
/******/
Object.defineProperty(exports, '__esModule', {
value: true
});
/******/
}; /******/ /******/ /******/ /******/ /******/ // create a fake namespace object // mode & 1: value is a module id, require it // mode & 2: merge all properties of value into the ns // mode & 4: return value when already ns object // mode & 8|1: behave like require
/******/
/******/ __webpack_require__.t = function(value, mode) {
/******/
if (mode & 1) value = __webpack_require__(value);
/******/
if (mode & 8) return value;
/******/
if (mode & 4 && typeof value === 'object' && value && value.__esModule) return value;
/******/
var ns = Object.create(null);
/******/
__webpack_require__.r(ns);
/******/
Object.defineProperty(ns, 'default', {
enumerable: true,
value: value
});
/******/
if (mode & 2 && typeof value != 'string')
for (var key in value)
__webpack_require__.d(
ns,
key,
function(key) {
return value[key];
}.bind(null, key)
);
/******/
return ns;
/******/
}; /******/ // getDefaultExport function for compatibility with non-harmony modules
/******/
/******/ __webpack_require__.n = function(module) {
/******/
var getter =
module && module.__esModule
? /******/
function getDefault() {
return module['default'];
}
: /******/
function getModuleExports() {
return module;
};
/******/
__webpack_require__.d(getter, 'a', getter);
/******/
return getter;
/******/
}; /******/ // Object.prototype.hasOwnProperty.call
/******/
/******/ __webpack_require__.o = function(object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
}; /******/ // __webpack_public_path__
/******/
/******/ __webpack_require__.p = ''; /******/ // Load entry module and return exports
/******/
/******/
/******/ return __webpack_require__((__webpack_require__.s = 0));
/******/
})(
/************************************************************************/
/******/
[
/* 0 */
/***/
function(module, __webpack_exports__, __webpack_require__) {
'use strict';
__webpack_require__.r(__webpack_exports__);
const logger = window.console.log;
/**
* @description 返回这个样式的颜色值
* @param {String} type 样式名称 [ primary | success | warning | danger | info ]
*/
const typeColor = function(type = 'default') {
let color = '';
switch (type) {
case 'primary':
color = '#146aa9';
break;
case 'success':
color = '#19be6b';
break;
case 'info':
color = '#909398';
break;
case 'warning':
color = '#ff9900';
break;
case 'danger':
color = '#f03f14';
break;
case 'default':
color = '#35495E';
break;
case 'line':
color = '#f4f4f5';
break;
case 'log':
color = '#f4f4f5';
break;
default:
color = type;
break;
}
return color;
};
/**
* @param {String} text
* @param {String} type [ primary | success | warning | danger | info ]
*/
const print = (text, title, type) => {
const arr = [ 'primary', 'success', 'warning', 'danger', 'info' ];
if (typeof title != 'string') {
throw new Error(
'Only one variable can be printed at a time,The second parameter only supports type is string,'
);
}
logger(
`%c ${title} `,
`background: ${typeColor(type)}; border:1px solid ${typeColor(
type
)}; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;`,
text
);
};
const info = (text, title = 'info') => {
print(text, title, 'info');
};
const success = (text, title = 'success') => {
print(text, title, 'success');
};
const primary = (text, title = 'primary') => {
print(text, title, 'primary');
};
const warning = (text, title = 'warning') => {
print(text, title, 'warning');
};
const danger = (text, title = 'danger') => {
print(text, title, 'danger');
};
const clear = () => {
console.clear();
};
/**
* @description print a split line
*/
const line = function() {
let text = '-----------------split line-----------------';
logger(
` %c ${text} %c`,
`border:1px solid ${typeColor(
'line'
)}; padding: 1px; border-radius: 4px; background: ${typeColor('line')}; color: #919398;`,
'background:transparent'
);
};
/**
* @description print welcome
*/
const welcome = function() {
var res = `
____ ____ ____ ____ ____ ____ ____
||w |||e |||l |||c |||o |||m |||e ||
||__|||__|||__|||__|||__|||__|||__||
|/__\|/__\|/__\|/__\|/__\|/__\|/__\|
`;
logger(res);
};
/**
* @description print img
* @param {string} img
*/
const img = (img) => {
logger(
'%c+',
`font-size: 1px;
padding: 60px 122px;
background-image: url('${img}');
background-size: contain;
background-repeat: no-repeat;
color: transparent;`
);
};
/**
* @description clear all, if you use,window.logger will invalid
*/
const clearAll = () => {
window.console.log = (str) => {
return;
};
};
const copyright = () => {
let styleTitle1 = `
font-size: 20px;
font-weight: 600;
color: rgb(244,167,89);
`;
let styleTitle2 = `
font-style: oblique;
font-size:14px;
color: rgb(244,167,89);
font-weight: 400;
`;
let styleContent = `
color: rgb(30,152,255);
`;
/* 内容代码 */
let title1 = '🌒 zkz-LOG ';
let title2 = 'author: zkz';
let myUrl = 'https://gitee.com/zuo-bufan';
let bdate = new Date();
let content = `
版 本 号：1.0.2
编译日期：${bdate}
版权声明：
1. ZKZ-LOG版权完全属于 "zkz".
2. ZKZ-LOG可以免费使用，npm下载即可：
1）有问题请联系作者：qq:2605331201
2）保留此版权信息在控制台输出
3）此提示信息只会打印三次
我们保留对此版权信息的最终解释权.
🏠 官网: ${myUrl}
📫 Email: 2605331201@qq.com
`;
logger(`%c${title1} %c${title2}%c${content}`, styleTitle1, styleTitle2, styleContent);
};
const performance = () => {
setTimeout(() => {
let performance = window.performance;
if (performance) {
let time = performance.getEntriesByType('navigation')[0];
let resource = 0;
time || (resource = (time = performance.timeOrigin).navigationStart);
let detail = [
{
key: 'Redirect',
desc: '网页重定向的耗时',
value: time.redirectEnd - time.redirectStart
},
{
key: 'AppCache',
desc: '检查本地缓存的耗时',
value: time.domainLookupStart - time.fetchStart
},
{
key: 'DNS',
desc: 'DNS查询的耗时',
value: time.domainLookupEnd - time.domainLookupStart
},
{
key: 'TCP',
desc: 'TCP连接的耗时',
value: time.connectEnd - time.connectStart
},
{
key: 'Waiting(TTFB)',
desc: '从客户端发起请求到接收到响应的时间 / Time To First Byte',
value: time.responseStart - time.requestStart
},
{
key: 'Content Download',
desc: '下载服务端返回数据的时间',
value: time.responseEnd - time.responseStart
},
{
key: 'HTTP Total Time',
desc: 'http请求总耗时',
value: time.responseEnd - time.requestStart
},
{
key: 'DOMContentLoaded',
desc: 'dom加载完成的时间',
value: time.domContentLoadedEventEnd - resource
},
{
key: 'Loaded',
desc: '页面load的总耗时',
value: time.loadEventEnd - resource
}
];
console.table(detail);
}
}, 0);
};
const help = () => {
let styleContent = `
color: rgb(30,152,255);
`;
let content = `
共支持以下方法：
@param {any} info : What needs to be printed
@param {string} title : Print the header label of the content
* Basic API
1： log.info(info,title)
2： log.danger(info,title)
3： log.success(info,title)
4： log.primary(info,title)
5： log.warning(info,title)
* Other API
1: log.img(link)
2: log.clear()
3: log.clearAll()
4: log.welcome()
5: log.clearAll()
6: log.copyright()
7: log.performance()
* Help API
log.help()
`;
logger(`%c${content}`, styleContent);
};
const log = {
img,
line,
info,
help,
clear,
danger,
success,
primary,
warning,
welcome,
clearAll,
copyright,
performance
};
window.log = log;
/* harmony default export */
__webpack_exports__['default'] = log;
/***/
}
/******/
]
)['default'];
});