<!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 class="controls">
      <button id="script-error" type="button">Generate script error</button>
      <img class="bad-img" />
    </div>
    
    <div class="event-log">
      <label>Event log:</label>
      <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
    </div>


    <script>

      
      const log = document.querySelector('.event-log-contents');

    window.addEventListener('error', (event) => {
        log.textContent = log.textContent + `${event.type}: ${event.message}\n`;
        console.log(event)
    });

    const scriptError = document.querySelector('#script-error');
    scriptError.addEventListener('click', () => {
        const badCode = 'const s;';

        //执行会报错的代码
        //eval(badCode);
        badCode =1
    });

    window.onerror = function (msg, url, line, col, error) {
      // add to errors Stack trace etc.
      console.log("监听错误", msg, url, line, col, error);
    };

    </script>
  </body>
</html>