<div class="outer">
  <div class="inner"></div>
</div>

<button onclick="textarea.value=''">Clear log</button>
<textarea id="textarea"></textarea>
.inner {
  width: 100px;
  background: gray;
}

.outer {
  width: 200px;
  background: lightgray;
}

.inner,
.outer {
  aspect-ratio: 1 / 1;
  margin: auto;
  display: grid;
}

button {
  margin-top: 2rem;
}

textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 12rem;
  font-size: 1rem;
  font-family: Consolas, monospace;
}

body {
  margin-bottom: 0;
}

var outer = document.querySelector(".outer");
var inner = document.querySelector(".inner");

// 监听元素属性变化
new MutationObserver(function () {
  console.log("mutate");
}).observe(outer, {
  attributes: true
});

function onClick() {
  console.log("click");

  setTimeout(function () {
    console.log("timeout");
  }, 0);

  Promise.resolve().then(function () {
    console.log("promise");
  });

  outer.setAttribute("data-random", Math.random());
}

inner.addEventListener("click", onClick);
outer.addEventListener("click", onClick);

// hack console.log
console.log = function (s) {
  textarea.value += s + "\n";
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.