Skip to content

Commit

Permalink
No commit message
Browse files Browse the repository at this point in the history
  • Loading branch information
KLA6 committed Dec 19, 2023
1 parent 2b6f2a9 commit 360aebf
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 15 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Secondly, to show the `console....` things at a corner on a mobile device screen

## Install
```
<script src="https://cdn.jsdelivr.net/gh/KLA6/[email protected].8/k6_console.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/KLA6/[email protected].9/k6_console.min.js"></script>
<script> new k6_console( {
production: false, // If this is true, no console message shows.
global : true , // If this is true, functions will be gloval, not in the class instance.
Expand Down Expand Up @@ -37,7 +37,7 @@ However, it's recommended to hide the installation part at all in the production
The following is an example in PHP.
```
<? if( $DEBUG ) { ?>
<script src="https://cdn.jsdelivr.net/gh/KLA6/[email protected].8/k6_console.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/KLA6/[email protected].9/k6_console.min.js"></script>
<script> new k6_console() </script>
<? } else { ?>
<script> const CD = null, FCD = FCE = FCW = FCG = FCGE = FCT = FCI = FCL = FCLR = () => {}; </script>
Expand Down
26 changes: 14 additions & 12 deletions k6_console.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}' ]` }

Expand Down
2 changes: 1 addition & 1 deletion k6_console.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 360aebf

Please sign in to comment.