Detect devtools and hide content

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h4>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum,
        dicta iure. Explicabo, alias fugit? Quia quae molestiae, quam obcaecati
        molestias fugit commodi maxime porro quasi harum, eos unde placeat modi?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam,
        aperiam molestiae ad nulla asperiores neque odio maxime itaque,
        expedita, quam repellat tenetur! Iusto impedit animi maxime voluptatum
        vitae eligendi unde! Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Corporis nobis facilis et? Error eum praesentium laboriosam nemo
        ullam incidunt tempore neque, dignissimos dolor consequatur aperiam
        dicta assumenda totam libero vero?
      </h4>
    </div>

     <script>
      var aCheck = false;
      var devtools = function () {};
      devtools.toString = function () {
        // alert('in')
        aCheck = true;
        return "-";
      };

      var no = setInterval(() => {
        console.profile(devtools);
        // alert(a)
        if (aCheck) {
          localStorage.setItem("check", 1);
          document.body.innerHTML =
            '<h2 style="width:100%;text-align:center;"><strong>Sorry</strong>, but you have opened Developer Tools and you can\'t continue using this app.</h2>';
          aCheck = false;
        } else {
          check();
        }
        console.profileEnd(devtools);
        console.clear()
      }, 1000);

      function check() {
        if (localStorage.getItem("check") == 1) {
          location.reload();
          localStorage.setItem("check", 2);
        }
      }
    </script>
</body>
</html>