From 360aebfd9470d1755c7e8b998a85cbd643d4ce79 Mon Sep 17 00:00:00 2001 From: KLA6 Date: Tue, 19 Dec 2023 10:17:29 +0700 Subject: [PATCH] --- README.md | 4 ++-- k6_console.js | 26 ++++++++++++++------------ k6_console.min.js | 2 +- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 269e25a..98f46e8 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Secondly, to show the `console....` things at a corner on a mobile device screen ## Install ``` - + + diff --git a/k6_console.js b/k6_console.js index fa0068c..2e29536 100644 --- a/k6_console.js +++ b/k6_console.js @@ -32,25 +32,27 @@ class k6_console { this.FC.innerText = json ? JSON.stringify( args ) : args } // function - this.CD = this.prod ? false : true // Config Debug - this.FCD = this.prod ? () => {} : ( ... args ) => { console.debug ( `%c${this.header}%s`, 'color: white; background-color: magenta;', ... args ); this.FM( 'white', 'magenta', args ) } // Function Console Debug - this.FCE = this.prod ? () => {} : ( ... args ) => { console.error ( `%c${this.header}%s`, 'color: white; background-color: red ;', ... args ); this.FM( 'white', 'red' , args ) } // Function Console Error - this.FCW = this.prod ? () => {} : ( ... args ) => { console.warn ( `%c${this.header}%s`, 'color: black; background-color: yellow ;', ... args ); this.FM( 'black', 'yellow' , args ) } // Function Console Warn - this.FCG = this.prod ? () => {} : ( ... args ) => { console.group ( `%c${this.header}%s`, 'color: white; background-color: grey ;', ... args ); this.FM( 'white', 'grey' , args ) } // Function Console Group - this.FCGE = this.prod ? () => {} : ( ... args ) => { console.groupEnd( ) } // Function Console Group End - this.FCT = this.prod ? () => {} : ( ... args ) => { console.trace ( `%c${this.header}%s`, 'color: white; background-color: blue ;', ... args ); this.FM( 'white', 'blue' , args ) } // Function Console Trace - this.FCI = this.prod ? () => {} : ( ... args ) => { console.info ( `%c${this.header}%s`, 'color: black; background-color: cyan ;', ... args ); this.FM( 'black', 'cyan' , args ) } // Function Console Info - this.FCL = this.prod ? () => {} : ( ... args ) => { console.log ( `%c${this.header}%s`, 'color: white; background-color: green ;', ... args ); this.FM( 'white', 'green' , args ) } // Function Console Log - this.FCLR = this.prod ? () => {} : ( object ) => { // Function Console Log Recursive + this.CD = this.prod ? false : true // Config Debug + this.FCD = this.prod ? () => {} : ( ... args ) => { console.debug ( `%c${this.header}%s`, 'color: white; background-color: magenta;', '%c %s', '', ... args ); this.FM( 'white', 'magenta', args ) } // Function Console Debug + this.FCE = this.prod ? () => {} : ( ... args ) => { console.error ( `%c${this.header}%s`, 'color: white; background-color: red ;', '%c %s', '', ... args ); this.FM( 'white', 'red' , args ) } // Function Console Error + this.FCW = this.prod ? () => {} : ( ... args ) => { console.warn ( `%c${this.header}%s`, 'color: black; background-color: yellow ;', '%c %s', '', ... args ); this.FM( 'black', 'yellow' , args ) } // Function Console Warn + this.FCG = this.prod ? () => {} : ( ... args ) => { console.group ( `%c${this.header}%s`, 'color: white; background-color: grey ;', '%c %s', '', ... args ); this.FM( 'white', 'grey' , args ) } // Function Console Group + this.FCGE = this.prod ? () => {} : ( ... args ) => { console.groupEnd( ) } // Function Console Group End + this.FCT = this.prod ? () => {} : ( ... args ) => { console.trace ( `%c${this.header}%s`, 'color: white; background-color: blue ;', '%c %s', '', ... args ); this.FM( 'white', 'blue' , args ) } // Function Console Trace + this.FCI = this.prod ? () => {} : ( ... args ) => { console.info ( `%c${this.header}%s`, 'color: black; background-color: cyan ;', '%c %s', '', ... args ); this.FM( 'black', 'cyan' , args ) } // Function Console Info + this.FCL = this.prod ? () => {} : ( ... args ) => { console.log ( `%c${this.header}%s`, 'color: white; background-color: green ;', '%c %s', '', ... args ); this.FM( 'white', 'green' , args ) } // Function Console Log + this.FCLR = this.prod ? () => {} : ( object ) => { // Function Console Log Recursive function replacer( K, V ) { if( typeof V === 'object' && V !== null ) { if( cache.indexOf( V ) !== -1 ) return cache.push ( V ) } return V } let cache = [] let result = JSON.stringify( object, replacer ); cache = null - console.log( `%c${this.header}%s`, 'color: white; background-color: black;', result ) - this .FM ( 'white', 'black' , result, false ) + console.log( `%c${this.header}%s`, 'color: white; background-color: black;', '%c %s', '', result ) + this .FM ( 'white', 'black' , result, false ) } // function + // 참고 // 출력 내용에서 ( '%c문자열%s', '스타일', ... ) 구조 반복이 끊어지면, 더 이상 스타일을 적용할 수 없으므로, 유저가 스타일을 적용할 수 있도록 '%c %s', '' 으로 종료한다. 구문 '%c %s', '' 은 스타일이 없는 공백을 의미한다. + function T_name( worker, prefix, name ) { return worker ? `self.${prefix}${name}` : `window[ '${prefix}${name}' ]` } diff --git a/k6_console.min.js b/k6_console.min.js index 915a35f..90b4e82 100644 --- a/k6_console.min.js +++ b/k6_console.min.js @@ -1 +1 @@ -class k6_console{constructor(P={}){function T_name(i,t,s){return i?`self.${t}${s}`:`window[ '${t}${s}' ]`}this.prod=P.prod||P.production||!1,this.global=P.global||!0,this.worker=P.worker||!1,this.mobile=P.mobile||"bl",(!1==P.mobile||"false"==P.mobile)&&(this.mobile=!1),this.header=P.header||"K6",this.prefix=P.prefix||"",this.prod||console.warn("k6_console.js:",`Don't forget "production: true" or "const ${this.prefix}CD = null, ${this.prefix}FCD = ${this.prefix}FCE = ${this.prefix}FCW = ${this.prefix}FCG = ${this.prefix}FCGE = ${this.prefix}FCT = ${this.prefix}FCI = ${this.prefix}FCL = ${this.prefix}FCLR = () => {}" for the production mode.`),!this.worker&&this.mobile&&(this.FC=document.createElement("pre"),document.addEventListener("DOMContentLoaded",()=>{document.body.appendChild(this.FC)}),this.FC.id="k6_console",this.FC.style.position="fixed",this.FC.style.fontSize="12px",this.FC.style.margin="10px 8px",this.FC.style.padding="6px 8px",this.FC.style.borderRadius="4px","tl"==this.mobile&&(this.FC.style.top=0,this.FC.style.left=0),"tr"==this.mobile&&(this.FC.style.top=0,this.FC.style.right=0),"bl"==this.mobile&&(this.FC.style.bottom=0,this.FC.style.left=0),"br"==this.mobile&&(this.FC.style.bottom=0,this.FC.style.right=0)),this.FM=(i,t,s,e=!0)=>{!this.worker&&this.mobile&&(this.FC.style.color=i,this.FC.style.backgroundColor=t,this.FC.innerText=e?JSON.stringify(s):s)},this.CD=!this.prod,this.FCD=this.prod?()=>{}:(...i)=>{console.debug(`%c${this.header}%s`,"color: white; background-color: magenta;",...i),this.FM("white","magenta",i)},this.FCE=this.prod?()=>{}:(...i)=>{console.error(`%c${this.header}%s`,"color: white; background-color: red ;",...i),this.FM("white","red",i)},this.FCW=this.prod?()=>{}:(...i)=>{console.warn(`%c${this.header}%s`,"color: black; background-color: yellow ;",...i),this.FM("black","yellow",i)},this.FCG=this.prod?()=>{}:(...i)=>{console.group(`%c${this.header}%s`,"color: white; background-color: grey ;",...i),this.FM("white","grey",i)},this.FCGE=this.prod?()=>{}:(...i)=>{console.groupEnd()},this.FCT=this.prod?()=>{}:(...i)=>{console.trace(`%c${this.header}%s`,"color: white; background-color: blue ;",...i),this.FM("white","blue",i)},this.FCI=this.prod?()=>{}:(...i)=>{console.info(`%c${this.header}%s`,"color: black; background-color: cyan ;",...i),this.FM("black","cyan",i)},this.FCL=this.prod?()=>{}:(...i)=>{console.log(`%c${this.header}%s`,"color: white; background-color: green ;",...i),this.FM("white","green",i)},this.FCLR=this.prod?()=>{}:i=>{function t(i,t){if("object"==typeof t&&null!==t){if(-1!==s.indexOf(t))return;s.push(t)}return t}let s=[],e=JSON.stringify(i,t);s=null,console.log(`%c${this.header}%s`,"color: white; background-color: black;",e),this.FM("white","black",e,!1)},this.global&&eval(`${T_name(this.worker,this.prefix,"CD")} = this.CD ;${T_name(this.worker,this.prefix,"FCD")} = this.FCD ;${T_name(this.worker,this.prefix,"FCE")} = this.FCE ;${T_name(this.worker,this.prefix,"FCW")} = this.FCW ;${T_name(this.worker,this.prefix,"FCG")} = this.FCG ;${T_name(this.worker,this.prefix,"FCGE")} = this.FCGE;${T_name(this.worker,this.prefix,"FCT")} = this.FCT ;${T_name(this.worker,this.prefix,"FCI")} = this.FCI ;${T_name(this.worker,this.prefix,"FCL")} = this.FCL ;${T_name(this.worker,this.prefix,"FCLR")} = this.FCLR;`)}} +class k6_console{constructor(P={}){function T_name(i,t,s){return i?`self.${t}${s}`:`window[ '${t}${s}' ]`}this.prod=P.prod||P.production||!1,this.global=P.global||!0,this.worker=P.worker||!1,this.mobile=P.mobile||"bl",(!1==P.mobile||"false"==P.mobile)&&(this.mobile=!1),this.header=P.header||"K6",this.prefix=P.prefix||"",this.prod||console.warn("k6_console.js:",`Don't forget "production: true" or "const ${this.prefix}CD = null, ${this.prefix}FCD = ${this.prefix}FCE = ${this.prefix}FCW = ${this.prefix}FCG = ${this.prefix}FCGE = ${this.prefix}FCT = ${this.prefix}FCI = ${this.prefix}FCL = ${this.prefix}FCLR = () => {}" for the production mode.`),!this.worker&&this.mobile&&(this.FC=document.createElement("pre"),document.addEventListener("DOMContentLoaded",()=>{document.body.appendChild(this.FC)}),this.FC.id="k6_console",this.FC.style.position="fixed",this.FC.style.fontSize="12px",this.FC.style.margin="10px 8px",this.FC.style.padding="6px 8px",this.FC.style.borderRadius="4px","tl"==this.mobile&&(this.FC.style.top=0,this.FC.style.left=0),"tr"==this.mobile&&(this.FC.style.top=0,this.FC.style.right=0),"bl"==this.mobile&&(this.FC.style.bottom=0,this.FC.style.left=0),"br"==this.mobile&&(this.FC.style.bottom=0,this.FC.style.right=0)),this.FM=(i,t,s,e=!0)=>{!this.worker&&this.mobile&&(this.FC.style.color=i,this.FC.style.backgroundColor=t,this.FC.innerText=e?JSON.stringify(s):s)},this.CD=!this.prod,this.FCD=this.prod?()=>{}:(...i)=>{console.debug(`%c${this.header}%s`,"color: white; background-color: magenta;","%c %s","",...i),this.FM("white","magenta",i)},this.FCE=this.prod?()=>{}:(...i)=>{console.error(`%c${this.header}%s`,"color: white; background-color: red ;","%c %s","",...i),this.FM("white","red",i)},this.FCW=this.prod?()=>{}:(...i)=>{console.warn(`%c${this.header}%s`,"color: black; background-color: yellow ;","%c %s","",...i),this.FM("black","yellow",i)},this.FCG=this.prod?()=>{}:(...i)=>{console.group(`%c${this.header}%s`,"color: white; background-color: grey ;","%c %s","",...i),this.FM("white","grey",i)},this.FCGE=this.prod?()=>{}:(...i)=>{console.groupEnd()},this.FCT=this.prod?()=>{}:(...i)=>{console.trace(`%c${this.header}%s`,"color: white; background-color: blue ;","%c %s","",...i),this.FM("white","blue",i)},this.FCI=this.prod?()=>{}:(...i)=>{console.info(`%c${this.header}%s`,"color: black; background-color: cyan ;","%c %s","",...i),this.FM("black","cyan",i)},this.FCL=this.prod?()=>{}:(...i)=>{console.log(`%c${this.header}%s`,"color: white; background-color: green ;","%c %s","",...i),this.FM("white","green",i)},this.FCLR=this.prod?()=>{}:i=>{function t(i,t){if("object"==typeof t&&null!==t){if(-1!==s.indexOf(t))return;s.push(t)}return t}let s=[],e=JSON.stringify(i,t);s=null,console.log(`%c${this.header}%s`,"color: white; background-color: black;","%c %s","",e),this.FM("white","black",e,!1)},this.global&&eval(`${T_name(this.worker,this.prefix,"CD")} = this.CD ;${T_name(this.worker,this.prefix,"FCD")} = this.FCD ;${T_name(this.worker,this.prefix,"FCE")} = this.FCE ;${T_name(this.worker,this.prefix,"FCW")} = this.FCW ;${T_name(this.worker,this.prefix,"FCG")} = this.FCG ;${T_name(this.worker,this.prefix,"FCGE")} = this.FCGE;${T_name(this.worker,this.prefix,"FCT")} = this.FCT ;${T_name(this.worker,this.prefix,"FCI")} = this.FCI ;${T_name(this.worker,this.prefix,"FCL")} = this.FCL ;${T_name(this.worker,this.prefix,"FCLR")} = this.FCLR;`)}}