Javascript debugging not working correctly in PHPStorm

Problem:

I am having trouble debugging with Javascript, in the sense that PHPStorm will happily step through JavaScript run on browser-load, but not JavaScript run by browser action after the browser load - for example clicking an element with an 'onclick' function.

I've set my debugging configuration and specified the URL. See below. Thanks in advance for help

What I've tried:

If I debug JavaScript by selecting 'Inspect in PHPStorm' from the JetBrains chrome plugin, I can put breakpoints in my Javascript and step through them no problem. PHPStorm responds as I use the browser, e.g. if I click an element with an onclick function.

However, the console.log does not output into the PHPStorm console - which I think is a known issue. 

Code

PHP Template

wp_enqueue_script('linz-js');


?>

<script>console.log('sandbox.php loaded'); </script>

    <div id="test">click for log</div>

<?php

get_footer();

Javascript file

var i = 0;

console.log('Page Loads as expected');

var test = document.getElementById('test');
test.onclick = function() {
    console.log('Click Logged');
    i++
}

System

I use PHPStorm to develop my Wordpress site, and use Local By Flywheel as my local PHP Server.