☰

c4console

15.06.2020, 06:31:18

  1. // ==UserScript==
  2. // @name        c4console
  3. // @namespace   Violentmonkey Scripts
  4. // @match       *://*/*
  5. // @run-at      document-start
  6. // @grant       none
  7. // @version     3.1.3
  8. // @author      Tut 'UniBreakfast' Ninin
  9. // @description 15.06.2020, 06:31:18
  10. // ==/UserScript==
  11.  
  12. if (!window.c4console) {
  13.   let lastTime
  14.  
  15.   const win = window,  c = console,  {log, dir} = c,  plan = setTimeout,
  16.     ls = localStorage,  {defineProperty, assign} = Object,
  17.     objProto = Object.prototype,  promProto = Promise.prototype,
  18.     def =(obj, prop, value)=> defineProperty(obj, prop,
  19.       {value, enumerable: false, writable: true, configurable: true}),
  20.     labelStyle = `font-size:.6rem;font-weight:bold;color:#ee6d;background:#56ab;
  21.       border-radius:4px;`,
  22.     getTime =()=> new Date().toLocaleTimeString('en', {hour12: false}),
  23.     img =(src, size=0.4, label=' ')=> {
  24.       if (src.match(/^data:image\/.*;base64,/))
  25.         return assign(new Image(), {src, onload() {
  26.           plan(log.bind(c, `%c${label}`, labelStyle+`background: no-repeat
  27.             url(${src}); padding:0 ${this.width*size}px ${this.height*size}px
  28.               4px;border-radius:0;background-size:contain`))
  29.         }})
  30.       fetch(src).then(r => r.blob()).then(blob => assign(new FileReader(),
  31.         {onload() { img(this.result, size) }}).readAsDataURL(blob))
  32.     },
  33.  
  34.   c4 = win.c4console = {
  35.     cGlobalFn: (...args)=> plan((args.length==1 && (args[0] instanceof Element
  36.       || args[0] instanceof Attr ||args[0]==document)? dir : log)
  37.         .bind(c,...args)) && args.length>1? args : args[0],
  38.  
  39.     cGenericMethod(label) {
  40.       const time = getTime(),  val = this.valueOf(),
  41.         isDOMel = val instanceof Element || val instanceof Attr ||
  42.                     val==document,
  43.         labelParts = [...time == lastTime? [] : [lastTime = time],
  44.         ...typeof label=='string'? [label+':'] : typeof label=='number'?
  45.           [label+'.'] : []]
  46.       plan(log.bind(c,...labelParts.length? [`%c ${labelParts.join` `} `,
  47.         labelStyle] : [], ...isDOMel? [] : [val]))
  48.       if (isDOMel) dir(val)
  49.       return val
  50.     },
  51.  
  52.     cPromiseMethod(label) {
  53.       let onresolve = _ => _,  onreject = _ => _
  54.       const time = getTime(),  start = new Date,  body = 'response body',
  55.         report =(res, status)=> {
  56.           const labelParts = [...time == lastTime? [] : [lastTime = time],
  57.             ...typeof label=='string'? [label+':'] : typeof label=='number'?
  58.               [label+'.'] : [], `${status} in ${new Date()-start}ms`],
  59.                 fetched = res instanceof Response
  60.           plan(log.bind(c,`%c ${labelParts.join` `} `, labelStyle,
  61.             fetched? [res] : res))
  62.           if (fetched) {
  63.             if ((res.headers.get('content-type')||'').startsWith('image/'))
  64.               res.clone().blob().then(blob => assign(new FileReader(),
  65.                 {onload() { img(this.result, 0.4, body) }})
  66.                   .readAsDataURL(blob))
  67.             else res.clone().text().then(text =>
  68.               { try { JSON.parse(text).c(body) } catch { text.c(body) } })
  69.           }
  70.         },
  71.         resolve = val => report(val, 'resolved') || onresolve(val),
  72.         reject = err => report(err, 'rejected') || onreject(err),
  73.         prom = this.then(resolve, reject)
  74.       this.then =(cb1, cb2)=> {
  75.         if (cb1) onresolve = cb1
  76.         if (cb2) onreject = cb2
  77.         return prom
  78.       }
  79.       this.catch = prom.catch = cb => (onreject = cb) && prom
  80.       return this
  81.     },
  82.  
  83.     on() {
  84.       c.img = this.img
  85.       win.c = this.cGlobalFn
  86.       def(objProto, 'c', this.cGenericMethod)
  87.       def(promProto, 'c', this.cPromiseMethod)
  88.       if (this.status().includes('OFF'))
  89.         this.off(), log('sorry, unable to turn ON')
  90.     },
  91.  
  92.     off() {
  93.       if (c.img==this.img) delete c.img
  94.       if (win.c==this.cGlobalFn) delete win.c
  95.       if (objProto.c==this.cGenericMethod) delete objProto.c
  96.       if (promProto.c==this.cPromiseMethod) delete promProto.c
  97.     },
  98.  
  99.     status() {
  100.       return (win.c==this.cGlobalFn && objProto.c==this.cGenericMethod
  101.         && promProto.c==this.cPromiseMethod? 'ON':'OFF') + ' / ' +
  102.           (ls.c4=='enabled'? 'enabled' : 'disabled')
  103.     },
  104.  
  105.     enable() { ls.c4 = 'enabled'; c4.on() },
  106.     disable() { ls.c4 = 'disabled'; c4.off() },
  107.  
  108.     img,  getTime,  get lastTime() { return lastTime },
  109.  
  110.     greet() {
  111.       log(`Hi. c4console is now %c ${ this.status() } `, labelStyle,
  112.         'and c4console.help() is there for you')
  113.     },
  114.  
  115.     help() {
  116.       log(`c4console is now %c ${ this.status() } `, labelStyle, `
  117.  
  118. c4console provides following methods:
  119.  
  120.   .help() - shows the text you are reading;
  121.   .on() - turns ON c4console functionality (see below) for this page just until reload;
  122.   .off() - turns OFF ... the same as previous;
  123.   .enable() - enables c4console functionality for this page until disabled;
  124.   .disable() - disables ... the same until enabled
  125.  
  126. it isn't enabled by default because many big sites won't load if they see that standard prototypes were modified before they themselves did that same thing (like Facebook, YouTube or Google). So you can turn c4console ON on those too BUT don't enable it for them by default or do not forget how to disable it.
  127.  
  128. c4console functionality includes:
  129.  
  130.   c(...args) - global function like console.log but it also returns the stuff it outputs;
  131.   any_variable_or_value.c(?label) - method available on (almost) any value that allows you to output that value to the console and that call is "transparent" for the chaining methdods - it returns the thing if was called from, so you can insert it in the middle of any expression without breaking anything;
  132.   any_promise.c(?label) - method available on any promise that also outputs to the console the final status of the promise, time it took and its value, and, if it was a fetch response, it outputs the response body below - as text, json-parsed object/array or image;
  133.   console.img(src, ?size, ?label) - function to show images in console, prefers Base64 strings as a source but can also fetch images implicitly if url provided instead`
  134.       )
  135.     }
  136.   }
  137.  
  138.   if (ls.c4=='enabled') c4.on()
  139.   c4.greet()
  140. }