JavaScript in HTML vs seperate File – Blancer.com Tutorials and projects

I am currently learning JavaScript and I’m trying to seperate my Code from HTML to a JavaScript-file.

WORKING CODE:

<!DOCTYPE html>
<html>
    <head>
        <title> DOM </title>
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <button>hello</button>
        <script>
            console.log(document.body.innerHTML);
        </script>
    </body>
</html>

NOT WORKING CODE:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title> DOM </title>
        <script src="basics.js" defer></script>
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <button>hello</button>
    </body>
</html>

JavaScript:

console.log(document.body.innerHTML);

From my not working Code I get a lot of unnessecary output in the console.

        <button>hello</button>
        <script src="basics.js" defer=""></script>
    <!-- Code injected by live-server -->
<script>
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function () {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
.
.
.
<script>

How do I get rid of it?

Thanks in advance.