Add jquery to current page if it doesn't exist already

// allcolors.js
// https://github.com/bgrins/devtools-snippets
// Print out CSS colors used in elements on the page.

(function () {
  // Should include colors from elements that have a border color but have a zero width?
  var includeBorderColorsWithZeroWidth = false;

  var allColors = {};
  var props = ["background-color", "color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color"];
  var skipColors = {
    "rgb(0, 0, 0)": 1,
    "rgba(0, 0, 0, 0)": 1,
    "rgb(255, 255, 255)": 1
  };

  [].forEach.call(document.querySelectorAll("*"), function (node) {
    var nodeColors = {};
    props.forEach(function (prop) {
      var color = window.getComputedStyle(node, null).getPropertyValue(prop),
        thisIsABorderProperty = (prop.indexOf("border") != -1),
        notBorderZero = thisIsABorderProperty ? window.getComputedStyle(node, null).getPropertyValue(prop.replace("color", "width")) !== "0px" : true,
        colorConditionsMet;

      if (includeBorderColorsWithZeroWidth) {
        colorConditionsMet = color && !skipColors[color];
      } else {
        colorConditionsMet = color && !skipColors[color] && notBorderZero;
      }

      if (colorConditionsMet) {
        if (!allColors[color]) {
          allColors[color] = {
            count: 0,
            nodes: []
          };
        }

        if (!nodeColors[color]) {
          allColors[color].count++;
          allColors[color].nodes.push(node);
        }

        nodeColors[color] = true;
      }
    });
  });

  function rgbTextToRgbArray(rgbText) {
    return rgbText.replace(/\s/g, "").match(/\d+,\d+,\d+/)[0].split(",").map(function (num) {
      return parseInt(num, 10);
    });
  }

  function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  }

  function rgbToHex(rgbArray) {
    var r = rgbArray[0],
      g = rgbArray[1],
      b = rgbArray[2];
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
  }

  var allColorsSorted = [];
  for (var i in allColors) {
    var rgbArray = rgbTextToRgbArray(i);
    var hexValue = rgbToHex(rgbArray);

    allColorsSorted.push({
      key: i,
      value: allColors[i],
      hexValue: hexValue
    });
  }

  allColorsSorted = allColorsSorted.sort(function (a, b) {
    return b.value.count - a.value.count;
  });

  var nameStyle = "font-weight:normal;";
  var countStyle = "font-weight:bold;";
  function colorStyle(color) {
    return "background:" + color + ";color:" + color + ";border:1px solid #333;";
  };

  console.group("Total colors used in elements on the page: " + window.location.href + " are " + allColorsSorted.length);
  allColorsSorted.forEach(function (c) {
    console.groupCollapsed("%c    %c " + c.key + " " + c.hexValue + " %c(" + c.value.count + " times)",
      colorStyle(c.key), nameStyle, countStyle);
    c.value.nodes.forEach(function (node) {
      console.log(node);
    });
    console.groupEnd();
  });
  console.groupEnd("All colors used in elements on the page");

})();

Print out all colors from computed styles used in elements on the page. Uses styled console.log calls to visualize each color.

/*
 * Inspired by https://gist.github.com/dmethvin/1676346
 */
(function AddBreakPointOnPropertyAccessFunction(window) {
  function debugAccess(obj, prop, debugGet) {
    const origValue = obj[prop];
    Object.defineProperty(obj, prop, {
      get: function () {
        if (debugGet)
          debugger;
        return origValue;
      },
      set: function (val) {
        debugger;
        return origValue = val;
      },
    });
  };
  window.debugAccess = debugAccess;
})(window);

/*
 * Inspired by https://chrome.google.com/webstore/detail/console-injector/abdfbnapkafgcheofcijaieahcbjnpkd?hl=en
 * example: console.inject('jquery')
 */
(function injectAnyRemoteScript(window, console) {
  const PROMPT_LIMIT = 10;

  const runRemoteCode = function (url) {  
    if (!url) {
      return console.error('console.runRemoteCode: No url');
    }
  
    // download and run the script
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
  }

  console.inject = (library) => {
    if (!library) {
      return console.error("library name is required");
    }

    fetch("https://api.cdnjs.com/libraries?search=" + library)
      .then((response) => response.json())
      .then((json) => {
        const choiceNum = window.prompt(`Type a number to select a library:
${json.results.slice(0, PROMPT_LIMIT).map((item, index) => `${index}. ${item.name}`).join("\n")}`);
        let choice = 0;
        try {
          console.log("chose choice", choiceNum);
          choice = parseInt(choiceNum, 10);
          if (choice < 0 && choice >= PROMPT_LIMIT) {
            throw new Error();
          }
        } catch {
          alert("Invalid choice number. Enter a number from 0 to " + (PROMPT_LIMIT - 1));
          return;
        }
        console.info("Injecting " + json.results[choice].name, 'latest from', json.results[choice].latest);
        runRemoteCode(json.results[choice].latest);
      });
  };
})(window, console);

Injecting remote javascript library into any page

/*
 * Warning this is dangerous in general if you don't understand 
 * the remote code that you will be executing
 * example: console.runRemoteCode("https://rawgit.com/bahmutov/code-snippets/master/first-paint.js")
 */

(function (console) {
  console.runRemoteCode = function (url) {  
    if (!url) {
      return console.error('console.runRemoteCode: No url');
    }
  
    // download and run the script
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
  }
})(console)

(function (console) {
  console.save = function (data, filename) {

    if (!data) {
      console.error('Console.save: No data')
      return;
    }

    if (!filename) filename = 'console.json'

    if (typeof data === "object") {
      data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], { type: 'text/json' }),
      e = document.createEvent('MouseEvents'),
      a = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
  }
})(console)

Save object as .json file from Chrome Devtool

// wrapelement.js
// https://github.com/bgrins/devtools-snippets
// Wrap a given element in a given type of element
// wrapElement('.foo', 'h1');
// wrapElement(document.querySelector('#bar'), 'div');
//
// LICENSE: [MIT](http://gkatsev.mit-license.org)

(function () {
  window.wrapElement = function (el, whatToWrapIn) {
    var newParent = document.createElement(whatToWrapIn),
      oldParent,
      nextSibling;

    if (typeof el === 'string') {
      el = document.querySelector(el);
    }

    oldParent = el.parentNode;
    nextSibling = el.nextSibling;
    newParent.appendChild(el);
    if (nextSibling) {
      oldParent.insertBefore(newParent, nextSibling);
    } else {
      oldParent.appendChild(newParent);
    }
  }

})();

Expose a method to wrap an html element with inputed element

(() => {
  function toggleCssBoundingBox(id) {
    if (!id) {
      id = "scriptbar-debug-css-draw-box-around-all-box";
    }
    const el = document.getElementById(id);
    if (el) {
      el.remove();
      return console.info("Scriptbar: Successfully remove all bounding box")
    }

    var style = document.createElement('style');
    style.id = id;

    style.innerHTML = `* { outline: 1px solid red; }`;
    document.getElementsByTagName("head")[0].appendChild(style);
  }
})()

/*
 * Decode jwt token
 * See https://jwt.io/
 */

(function (root) {
  root.decodeJwt = (token) =>
    decodeURIComponent(
      atob(token.split(".")[1].replace("-", "+").replace("_", "/"))
        .split("")
        .map((c) => `%${("00" + c.charCodeAt(0).toString(16)).slice(-2)}`)
        .join("")
    );
})(this);


console.log("%c Init method to decode jwt token. Below is example", 'background: #222; color: #bada55');
decodeJwt(`
    eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
    eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0I
    joxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
`);

/*
 * cssprettifier-bookmarklet
 * Copyright (c) 2013 Addy Osmani, Sindre Sorhus
 * CSSBeautify (c) Sencha, Ariya Hidayat
 * Prism (c) Lea Verou
 * Licensed under the MIT license.
 */

(function () {
  'use strict';

  // cssbeautify
  (function () { "use strict"; function a(a, b) { function s(a) { return " " === a || "\n" === a || "   " === a || "\r" === a || "\f" === a } function t(a) { return "'" === a || '"' === a } function u(a) { return h >= "a" && "z" >= h || h >= "A" && "Z" >= h || h >= "0" && "9" >= h || "-_*.:#".indexOf(a) >= 0 } function v() { var a; for (a = m; a > 0; a -= 1)g += c.indent } function w() { g = r(g), p ? g += " {" : (g += "\n", v(), g += "{"), "\n" !== i && (g += "\n"), m += 1 } function x() { var a; m -= 1, g = r(g), q && (a = g.charAt(g.length - 1), ";" !== a && "{" !== a && (g += ";")), g += "\n", v(), g += "}", f.push(g), g = "" } var c, f, h, i, j, k, l, m, n, o, r, d = 0, e = a.length, g = "", p = !0, q = !1; for (c = arguments.length > 1 ? b : {}, c.indent === void 0 && (c.indent = "    "), "string" == typeof c.openbrace && (p = "end-of-line" === c.openbrace), "boolean" == typeof c.autosemicolon && (q = c.autosemicolon), r = String.prototype.trimRight ? function (a) { return a.trimRight() } : function (a) { return a.replace(/\s+$/, "") }, l = { Start: 0, AtRule: 1, Block: 2, Selector: 3, Ruleset: 4, Property: 5, Separator: 6, Expression: 7, URL: 8 }, m = 0, k = l.Start, o = !1, f = [], a = a.replace(/\r\n/g, "\n"); e > d;)if (h = a.charAt(d), i = a.charAt(d + 1), d += 1, t(n)) g += h, h === n && (n = null), "\\" === h && i === n && (g += i, d += 1); else if (t(h)) g += h, n = h; else if (o) g += h, "*" === h && "/" === i && (o = !1, g += i, d += 1); else if ("/" !== h || "*" !== i) { if (k === l.Start) { if (0 === f.length && s(h) && 0 === g.length) continue; if (" " >= h || h.charCodeAt(0) >= 128) { k = l.Start, g += h; continue } if (u(h) || "[" === h || "@" === h) { if (j = r(g), 0 === j.length) f.length > 0 && (g = "\n\n"); else if ("}" === j.charAt(j.length - 1) || ";" === j.charAt(j.length - 1)) g = j + "\n\n"; else for (; ;) { if (i = g.charAt(g.length - 1), " " !== i && 9 !== i.charCodeAt(0)) break; g = g.substr(0, g.length - 1) } g += h, k = "@" === h ? l.AtRule : l.Selector; continue } } if (k !== l.AtRule) if (k !== l.Block) if (k !== l.Selector) if (k !== l.Ruleset) if (k !== l.Property) if (k !== l.Separator) if (k !== l.Expression) k === l.URL && ")" === h && g.charAt("\\" !== g.length - 1) ? (g += h, k = l.Expression) : g += h; else { if ("}" === h) { x(), k = l.Start, m > 0 && (k = l.Block); continue } if (";" === h) { g = r(g), g += ";\n", k = l.Ruleset; continue } if (g += h, "(" === h && "l" === g.charAt(g.length - 2) && "r" === g.charAt(g.length - 3) && "u" === g.charAt(g.length - 4)) { k = l.URL; continue } } else { if (!s(h)) { g += h, k = l.Expression; continue } t(i) && (k = l.Expression) } else { if (":" === h) { g = r(g), g += ": ", k = l.Expression, s(i) && (k = l.Separator); continue } if ("}" === h) { x(), k = l.Start, m > 0 && (k = l.Block); continue } g += h } else { if ("}" === h) { x(), k = l.Start, m > 0 && (k = l.Block); continue } if ("\n" === h) { g = r(g), g += "\n"; continue } if (!s(h)) { g = r(g), g += "\n", v(), g += h, k = l.Property; continue } g += h } else { if ("{" === h) { w(), k = l.Ruleset; continue } if ("}" === h) { x(), k = l.Start; continue } g += h } else { if (u(h)) { if (j = r(g), 0 === j.length) f.length > 0 && (g = "\n\n"); else if ("}" === j.charAt(j.length - 1)) g = j + "\n\n"; else for (; ;) { if (i = g.charAt(g.length - 1), " " !== i && 9 !== i.charCodeAt(0)) break; g = g.substr(0, g.length - 1) } v(), g += h, k = l.Selector; continue } if ("}" === h) { x(), k = l.Start; continue } g += h } else { if (";" === h) { g += h, k = l.Start; continue } if ("{" === h) { j = r(g), w(), k = "@font-face" === j ? l.Ruleset : l.Block; continue } g += h } } else o = !0, g += h, g += i, d += 1; return g = f.join("") + g } "undefined" != typeof exports ? module.exports = exports = a : "object" == typeof window && (window.cssbeautify = a) })();

  // prism
  (function () { var e = /\blang(?:uage)?-(?!\*)(\w+)\b/i, t = self.Prism = { util: { type: function (e) { return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1] }, clone: function (e) { var n = t.util.type(e); switch (n) { case "Object": var r = {}; for (var i in e) e.hasOwnProperty(i) && (r[i] = t.util.clone(e[i])); return r; case "Array": return e.slice() }return e } }, languages: { extend: function (e, n) { var r = t.util.clone(t.languages[e]); for (var i in n) r[i] = n[i]; return r }, insertBefore: function (e, n, r, i) { i = i || t.languages; var s = i[e], o = {}; for (var u in s) if (s.hasOwnProperty(u)) { if (u == n) for (var a in r) r.hasOwnProperty(a) && (o[a] = r[a]); o[u] = s[u] } return i[e] = o }, DFS: function (e, n) { for (var r in e) { n.call(e, r, e[r]); t.util.type(e) === "Object" && t.languages.DFS(e[r], n) } } }, highlightAll: function (e, n) { var r = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); for (var i = 0, s; s = r[i++];)t.highlightElement(s, e === !0, n) }, highlightElement: function (r, i, s) { var o, u, a = r; while (a && !e.test(a.className)) a = a.parentNode; if (a) { o = (a.className.match(e) || [, ""])[1]; u = t.languages[o] } if (!u) return; r.className = r.className.replace(e, "").replace(/\s+/g, " ") + " language-" + o; a = r.parentNode; /pre/i.test(a.nodeName) && (a.className = a.className.replace(e, "").replace(/\s+/g, " ") + " language-" + o); var f = r.textContent; if (!f) return; f = f.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\u00a0/g, " "); var l = { element: r, language: o, grammar: u, code: f }; t.hooks.run("before-highlight", l); if (i && self.Worker) { var c = new Worker(t.filename); c.onmessage = function (e) { l.highlightedCode = n.stringify(JSON.parse(e.data)); l.element.innerHTML = l.highlightedCode; s && s.call(l.element); t.hooks.run("after-highlight", l) }; c.postMessage(JSON.stringify({ language: l.language, code: l.code })) } else { l.highlightedCode = t.highlight(l.code, l.grammar); l.element.innerHTML = l.highlightedCode; s && s.call(r); t.hooks.run("after-highlight", l) } }, highlight: function (e, r) { return n.stringify(t.tokenize(e, r)) }, tokenize: function (e, n) { var r = t.Token, i = [e], s = n.rest; if (s) { for (var o in s) n[o] = s[o]; delete n.rest } e: for (var o in n) { if (!n.hasOwnProperty(o) || !n[o]) continue; var u = n[o], a = u.inside, f = !!u.lookbehind || 0; u = u.pattern || u; for (var l = 0; l < i.length; l++) { var c = i[l]; if (i.length > e.length) break e; if (c instanceof r) continue; u.lastIndex = 0; var h = u.exec(c); if (h) { f && (f = h[1].length); var p = h.index - 1 + f, h = h[0].slice(f), d = h.length, v = p + d, m = c.slice(0, p + 1), g = c.slice(v + 1), y = [l, 1]; m && y.push(m); var b = new r(o, a ? t.tokenize(h, a) : h); y.push(b); g && y.push(g); Array.prototype.splice.apply(i, y) } } } return i }, hooks: { all: {}, add: function (e, n) { var r = t.hooks.all; r[e] = r[e] || []; r[e].push(n) }, run: function (e, n) { var r = t.hooks.all[e]; if (!r || !r.length) return; for (var i = 0, s; s = r[i++];)s(n) } } }, n = t.Token = function (e, t) { this.type = e; this.content = t }; n.stringify = function (e) { if (typeof e == "string") return e; if (Object.prototype.toString.call(e) == "[object Array]") return e.map(n.stringify).join(""); var r = { type: e.type, content: n.stringify(e.content), tag: "span", classes: ["token", e.type], attributes: {} }; r.type == "comment" && (r.attributes.spellcheck = "true"); t.hooks.run("wrap", r); var i = ""; for (var s in r.attributes) i += s + '="' + (r.attributes[s] || "") + '"'; return "<" + r.tag + ' class="' + r.classes.join(" ") + '" ' + i + ">" + r.content + "</" + r.tag + ">" }; if (!self.document) { self.addEventListener("message", function (e) { var n = JSON.parse(e.data), r = n.language, i = n.code; self.postMessage(JSON.stringify(t.tokenize(i, t.languages[r]))); self.close() }, !1); return } var r = document.getElementsByTagName("script"); r = r[r.length - 1]; if (r) { t.filename = r.src; document.addEventListener && !r.hasAttribute("data-manual") && document.addEventListener("DOMContentLoaded", t.highlightAll) } })();;
  Prism.languages.css = { comment: /\/\*[\w\W]*?\*\//g, atrule: /@[\w-]+?(\s+[^;{]+)?(?=\s*{|\s*;)/gi, url: /url$(["']?).*?\1$/gi, selector: /[^\{\}\s][^\{\}]*(?=\s*\{)/g, property: /(\b|\B)[a-z-]+(?=\s*:)/ig, string: /("|')(\\?.)*?\1/g, important: /\B!important\b/gi, ignore: /&(lt|gt|amp);/gi, punctuation: /[\{\};:]/g }; Prism.languages.markup && Prism.languages.insertBefore("markup", "tag", { style: { pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig, inside: { tag: { pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig, inside: Prism.languages.markup.tag.inside }, rest: Prism.languages.css } } });

  var prismStyle = document.createElement('style');
  var beautified = cssbeautify(document.body.textContent, { autosemicolon: true });
  var highlighted = Prism.highlight(beautified, Prism.languages.css);

  prismStyle.textContent = 'code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-family:Consolas,Monaco,\'Andale Mono\',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none;}}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;}:not(pre) > code[class*="language-"],pre[class*="language-"]{background:#f5f2f0;}:not(pre) > code[class*="language-"]{padding:.1em;border-radius:.3em;}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray;}.token.punctuation{color:#999;}.namespace{opacity:.7;}.token.property,.token.tag,.token.boolean,.token.number{color:#905;}.token.selector,.token.attr-name,.token.string{color:#690;}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:hsla(0,0%,100%,.5);}.token.atrule,.token.attr-value,.token.keyword{color:#07a;}.token.regex,.token.important{color:#e90;}.token.important{font-weight:bold;}.token.entity{cursor:help;}';

  document.head.innerHTML = '';
  document.head.appendChild(prismStyle);
  document.body.innerHTML = '<code><pre>' + highlighted + '</pre></code>';

})();

Unminified and pretify a CSS file on page

/*
 * Expose method insertCss allow to insert css code into the DOM
 * Example: insertCss(`html{filter: invert(1)}`)
 */
((root, document) => {
  function insertCss(code) {
    if (!code) {
      return console.error('insertCss: No code');
    }
    var style = document.createElement('style');
  
    if (style.styleSheet) {  // IE
      style.styleSheet.cssText = code;
    } else { // Other browsers
      style.innerHTML = code;
    }
    document.getElementsByTagName("head")[0].appendChild( style );
  }
  root.insertCss = insertCss;
})(this, document)

console.table((function listAllEventListeners() {
  const allElements = Array.prototype.slice.call(document.querySelectorAll('*'));
  allElements.push(document); // we also want document events
  const types = [];
  for (let ev in window) {
    if (/^on/.test(ev)) types[types.length] = ev;
  }
  let elements = [];
  for (let i = 0; i < allElements.length; i++) {
    const currentElement = allElements[i];
    for (let j = 0; j < types.length; j++) {
      if (typeof currentElement[types[j]] === 'function') {
        elements.push({
          "node": currentElement,
          "type": types[j],
          "func": currentElement[types[j]].toString(),
        });
      }
    }
  }
  return elements.sort(function(a,b) {
    return a.type.localeCompare(b.type);
  });
})());

// based on answer to question
// http://stackoverflow.com/questions/4391575/how-to-find-the-size-of-localstorage
(function showLocalStorageSize() {
  function stringSizeBytes(str) {
    return str.length * 2;
  }

  function toMB(bytes) {
    return bytes / 1024 / 1024;
  }

  function toSize(key) {
    return {
      name: key,
      size: stringSizeBytes(localStorage[key])
    };
  }

  function toSizeMB(info) {
    info.size = toMB(info.size).toFixed(2) + ' MB';
    return info;
  }

  var sizes = Object.keys(localStorage).map(toSize)
    .sort((kv1, kv2) => {
      return kv2.size - kv1.size;
    }).map(toSizeMB);

  console.table(sizes);

}());


Print out current page localStorage values size

// measures how much memory a key and its value takes up in a collection of objects
(function expensiveKeysInit(root) {
  function stringSize(str) {
    // JavaScript strings are unicode UTF-16 up to 2 bytes per character
    return str.length * 2;
  }

  function objectSize(obj) {
    return stringSize(JSON.stringify(obj));
  }

  var value = function value(key) {
    return function (object) {
      return object[key];
    };
  };

  var pickValue = function (key, items) {
    return items.map(value(key));
  };

  function keySize(items, key) {
    return stringSize(key) * items.length + objectSize(pickValue(key, items));
  }

  function zip(keys, values) {
    var result = {};
    keys.forEach(function (key, index) {
      result[key] = values[index];
    });
    return result;
  }

  function toMB(bytes) {
    return bytes / 1024 / 1024;
  }

  function toSizeMB(size) {
    return toMB(size).toFixed(2) + " MB";
  }

  function valuesInMB(obj) {
    var result = {};
    Object.keys(obj).forEach(function (key) {
      var val = obj[key];
      if (typeof val === "number") {
        result[key] = toSizeMB(obj[key]);
      }
    });
    return result;
  }

  function propertySizes(object) {
    if (!object || typeof object !== "object" || Array.isArray(object)) {
      return console.error("propertySizes expects a javascript object");
    }

    var keys = Object.keys(object);
    const sizes = keys.map(keySize.bind(null, [object]));
    const result = zip(keys, sizes);
    result.mb = valuesInMB.bind(null, result);
    return result;
  }

  root.expensiveKeys = propertySizes;
  console.info("try expensiveKeys(<object>);");
  console.log("you can call .mb() method on the returned object e.g expensiveKey({key: 'value'}).mb()");
})(this);

console.info('Example: expensiveKeys({key: "value"})');
console.table(expensiveKeys({'testNum': 10, 'testStr': 'longtext'}).mb());


/*
 * Pause javascript execution on keydown. This is handy when your page
 * have a dynamic element that you want to pause the execution of javascript.
 */
((document) => {
  document.addEventListener("keydown", (e) => {
    if (e.key === "Enter") debugger;
  });
})(document);


Pause javascript execution on keydown. Handy to debug dynamic element

Pretty print all query string params on page as table

window.scrollTo(0,document.body.scrollHeight);

/*
 * This code snippet checks if the page allows creating
 * and executing new inline scripts (script-injection attacks) 
 * See https://github.com/bahmutov/disable-inline-javascript-tutorial
 * Credit: https://github.com/bahmutov/code-snippets/blob/master/test-script-injection.js
 */

(function testInlineScriptInjection() {
  var el = document.createElement('script');
  el.innerText = 'alert("hi there")';
  document.body.appendChild(el); // runs the code by default
}());

(function testExternalScriptInjection() {
  var el = document.createElement('script');
  el.src = 'https://rawgit.com/hakimel/reveal.js/tree/master/js';
  document.body.appendChild(el);
}());

Run script to test if page allow injecting js or running remote script

((document) => {
  if (document.designMode.toLocaleLowerCase() === 'on') {
    document.designMode = 'off';
  } else {
    document.designMode = 'on';
  }
})(document)

(function turnWebSiteIntoDarkMode(document) {
  function insertCss(code) {
    var style = document.createElement("style");
    style.innerHTML = code;
    document.getElementsByTagName("head")[0].appendChild(style);
  }

  insertCss(`html {
    filter: invert(1) hue-rotate(180deg);
  }`);
})(document);


Turn any website into dark mode by adding this css 1liner

// viewcookies.js
// https://github.com/bgrins/devtools-snippets
// Shows all cookies stored in document.cookies in a console.table

(function () {
  'use strict';

  window.viewCookies = function () {
    if (document.cookie) {
      const cookies = document.cookie
        .split(/; ?/)
        .map(s => {
          const [, key, value] = s.match(/^(.*?)=(.*)$/);
          return {
            key,
            value: decodeURIComponent(value)
          };
        });

      console.table(cookies);
    }
    else {
      console.warn('document.cookie is empty!');
    }
  };
})();

window.viewCookies();