☰

console.log With DOM Echo

14.09.2020, 17:35:08

当前为 2020-09-14 提交的版本，查看 最新版本。

// ==UserScript==
// @name        console.log With DOM Echo
// @namespace   Violentmonkey Scripts
// @match       *://*/*
// @grant       none
// @version     1.0
// @author      -
// @description 14.09.2020, 17:35:08
// ==/UserScript==

const styles = document.createElement("style")
styles.innerHTML = `
  .console-toast {
    position: fixed;
    right: 15px;
    bottom: -55px;
    padding: 10px 30px;
    border-radius: 3px;
    transition: .3s;
    color: #fff;
    font-family: Lato, Roboto, sans-serif;
    animation: flowUp 10s;
  }

  .console-log-toast {
    background: #3a3a3a;
    box-shadow: 0 0 7px 0 #7b7b7b;
  }

  .console-err-toast {
    background: #d87070;
    box-shadow: 0 0 7px 0 #f38d8d;
  }

  @keyframes flowUp {
    0% {
      bottom: -55px;
    }

    5% {
      bottom: 15px;
    }

    75% {
      bottom: 15px;
      opacity: 1;
    }

    100% {
      bottom: 130%;
      opacity: 0;
    }
  }
`
document.head.append(styles)

const consoleLog = console.log
const consoleErr = console.error

function consoleToast(type) {
  return (...args) => {
    consoleErr(...args)

    const toast = document.createElement("div")

    toast.onanimationend = () => toast.remove()
    toast.className = `console-${type}-toast console-toast`
    toast.innerText = typeof args[0] == 'function' ? args[0] : JSON.stringify(args.length == 1 ? args[0] : args)

    document.body.append(toast)
  }
}

console.log = consoleToast('log')
console.error = consoleToast('err')