DevTools. How to catch the moment in onload when a class is added to an element?

D

DTX2016-11-08 12:32:39

JavaScript

DTX, 2016-11-08 12:32:39

Apparently, Break on attributes modifications does not work in onload, or I'm doing something wrong.
html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js"></script>
  </head>
  <body>
    Hello, world!
  </body>
</html>

style.css

body:before {
  content: "ver 1."
}

body.ver2:before {
  content: "ver 2."
}

body.ver3:before {
  content: "ver 3."
}

script.js

function onready() {
  b = document.getElementsByTagName("body")[0];
  b.classList.add('ver2');

  setTimeout(ver3, 3000);
}

function ver3() {
  b.classList.add('ver3');
}

document.addEventListener('DOMContentLoaded', onready);

So. I set for body Break on attributes modifications and stop in js occurs only at the moment ver3 () is triggered.
How to catch change from onready?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ivan Leshchenko, 2016-11-08
@inkluter

Try debugging the code with the debugger command.

function onready() {
  debugger;
  b = document.getElementsByTagName("body")[0];
  b.classList.add('ver2');

  setTimeout(ver3, 3000);
}

Let me remind you that the debugger only works if the developer panel is open.