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.

 

1 comment

PHPStorm will happily step through JavaScript run on browser-load, but not JavaScript run by browser

Are links used in a browser the same (host:port/address)?

Are you starting debugger using "Debug" (bug) button or "Play" button? Would it be possible to attach a screencast of you starting the working debugging session & then the session that doesn't work afterwards?

0

Please sign in to leave a comment.