PhpStorm debug WordPress theme files

I am trying to set up PhpStorm for WordPress theme development and facing an issue with getting xdebug to work with theme files.

The problem I face is that when I try to debug lets say header.php, it tries to open the file itself in the browser in order to watch the variables within it: http://localhost/wp-content/themes/themename/header.php which of course throughs me an error as the file itself does not contain the rest of the function and dependencies of WordPress.

So my question is, if I have a variable inside header.php, or footer.php is there a way I can watch it in PhpStorm debug. If so how?

My xdebug is enabled, I am running XAMPP. I tried adding theme folder into the project and adding External Libraries paths, wp-includes and wp-admin as shown in this tutorial https://www.youtube.com/watch?v=nt85dnx0V8Y.

Then I decided to add it as whole project. I did setup interpreter. But still can’t really debug any of the variables inside the theme files. Is there a solution for that?

I also installed JB plugin for chrome but it also did not help.