Debugging Javascript inside php file possible?

Question

I am trying to find the way to debug javascript code inside the php file. I have a lot of javascript code embedded inside the php file.

I can debug php code using netbeans with the help of XDebug. I can also debug javascript separately inside html or js file with browser like chrome or firefox.

What I want is to debug javascript code inside the php file if it is possible. I am sure a lot of people will be using javascript embedded with php file. I don't like it personally, but I have to work it on. I know I can write the code separately in js file and then can debug with browsers, but it's lot of code, take time for the separation.

Can anybody here suggest me a way if it's possible what I am asking.

• Debug Javascript in netbeans 7.4 inside PHP project

• https://netbeans.org/kb/docs/php/debugging.html

• https://confluence.jetbrains.com/display/PhpStorm/Debugging+PHP+and+JavaScript+code+at+the+same+time+in+PhpStorm

• https://blog.jetbrains.com/phpstorm/2014/06/debugging-php-and-javascript-code-at-the-same-time/

Answer 1

IMHO, without even looking it up, i don't think that it is (nor should) be feasible.

Here's why:
Your PHP gets processed on the server side, that's when XDebug kicks in and enables you to breakpoint all your PHP code. Then the server output gets to the client, that's when the actual JS is processed inline in the parsed HTML. Which means you would have to intercept the HTML in some way, parse it, detect eventual inlined JS scripts... and set your breakpoint(s) at that time (yes on each run), then output to client, which parses the HTML yet again to render it and process eventual breakpoints. It would be a tedious process and even more tedious to get to work i guess and that is why nobody even tried making an extension for that.
To my knowledge, inlined JS is also a lot harder to debug and i never saw an actual setup that would allow breakpointing embedded tags in a static HTML document directly from the IDE, which would've been somewhat a little easier to achieve than breakpointing JS in PHP...

Your best shot i guess would be to externalise your JS in separate files and only hard code <script src="path/to/your/app.js"></script> in your PHP templates, which indeed would be much more comfortable to work with on the long run anyways.

Then you would be able to breakpoint all the stuff in app.js, plus have an actual front-end architecture, syntax-highlighting, impress your boss, make your life a lot easier, the world a better place, etc.

Also, for reference: How to debug JavaScript code with Netbeans? (answer #45515159)
And read on: https://netbeans.org/kb/docs/webclient/html5-js-support.html

Edit: seems like setting JS breakpoints in static HTML tags is feasible in Visual Code for example -> https://github.com/Microsoft/vscode-chrome-debug/issues/122

Answer 2

I don't know if I am late, but, I came across the following website and was able to setup the debugger for Javascript and PHP which supports to debug embedded JavaScript in PHP scripts.

source: https://abcmemo.com/2017/04/20/debug-php-and-javascript-in-visual-studio-code/

The website uses PHP.exe as a web service.

It is also possible to use IIS, Apache or others.

Requirements:

1. IDE: Visual studio code
2. Extension: PHP debug
3. Extension: Debugger for (Chrome, Firefox or Edge)
4. Xdebug set in php.ini
5. Extension in browser (optional): PHP xdebug if you want to debug on trigger.

You need to have two debuggers running at the same time one for PHP and one for JavaScrpit.

PHP sample

JavaScript sample