JSFiddle - React, Tailwind, and code Playground

by santeriv

HTML

<script src="https://raw.github.com/cowboy/javascript-hooker/master/dist/ba-hooker.min.js"></script>
<div class="bar">
    <div class="bar">
        <div id="foo"></div>
    </div>
</div>
<div id="bacon"></div>

JavaScript

// jQuery inspection, the easy-ish way!
// https://github.com/cowboy/javascript-hooker

var indent = "";
function getOpts(state) {
  return {
    passName: true,
    pre: function(name) {
      var args = [].slice.call(arguments, 1);
      var prefix = indent + (state ? "jQuery(" : "jQuery.fn." + name + "(");
      var suffix = ")";
      console.log.apply(console, [prefix].concat(args, suffix));
      indent += "  ";
    },
    post: function() {
      indent = indent.slice(2);
    }
  }
};

// Hook all jQuery.fn methods.
hook(jQuery.fn, getOpts());
// Well, except this one.
unhook(jQuery.fn, "init");

// Hook the global jQuery / $ functions.
hook(window, ["jQuery", "$"], getOpts(true));

// Run some jQuery (check the console).
$("#foo").parents(".bar").next().prev().parent().find(".foo:last").text("test");