4

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.

Improve this question
3
  • 4
    How about your browser debugging tools? Commented Oct 21, 2018 at 0:38
  • Best tool for the job, use the browser tools, since the browser is the one interpreting the JS. Still recovering from the IE vs netscape stuff we had to do 18 years ago... ugh. Commented Oct 21, 2018 at 1:07
  • @Pointy Can you please suggest me some tool that can do the job? Commented Oct 21, 2018 at 1:25

5 Answers 5

Reset to default
6

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Hi @decksterr, really appreciate your efforts to answer but unfortunately I can't do that stuff, I have to talk with my Manager, that's a lot of files, I don't personally like it as I have already mentioned. Thanks by the way
3

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

Improve this answer

1 Comment

ey a bit late here, however I tried that out with the 2.0.0 task manager, and launched the listen for XDebug, and the front end to have both running and only the breakpoints in the PHP code are hit, not the ones in the javascript :/ .Anyhow the source is from APRIL 20, 2017 and the question old so nevermind. Also useful to handle the development server and avoid xampp if desired :)
2

I worked with a lot of wordpress templates where I had to deal with some js inside my php files. Assuming that you can run your code on a server, you can easily debug your output in dev tools in chrome (if using chrome). Chrome also allows for setting of breakpoints so you can go line by line, and since your browser ultimately runs the js, you can monitor your code behavior without dealing with the php. That was my main way of dealing with this issue.

I also recommend separating as much js as possible into separate files in your assets folder. Depending on your project, you rarely have to inline your code, In my opinion it's messy to include a lot of JS right in your php, unless you use onclick="" or onchange="" attributes (which can also be handled with event listeners.

Aside from that, console.log() the crap out of everything.

Improve this answer

3 Comments

Hi @Vladimir, if you say console.log(), then alert is also helpful, I know how I can debug with browser but that would be possible only if js in separate files, can you please tell me how you can debug embedded js with browser as you mentioned? that would be great
what is the js doing or responsible for? i need more context
I do resolve my problem regarding js by separating them, I don't want to do this practice if I can debug them without separating, My Question is the main context. Thanks
1

I helped my self with the following steps if it could help any body else

Note:- If your rendered code is inline specific to java-script then it would hard to debug like this.

  1. Run the required page of your application using browser like chrome, edge etc

  2. Open the inspection page by pressing f12 or (Ctrl+Shift+I), Or you can right click on the page see the option for the inspection and click on it.

  3. Goto sources and double click on the source file(this will be probably your php file).

  4. If code not loaded then reload the page by pressing f5 or Ctrl+R, you will see your java-script code there embedded with the html after rendering, then you can put the break point wherever you want and debug through the browser tools(you can see some buttons there to guide you about debugging like step-over,step-into etc).

  5. You will also see errors there regarding java-script,

Improve this answer

1 Comment

how is it possible to open a php file from the debugger?
0

In the Chrome DevTools inspector, when you navigate to the 'Sources' section, you can find the files being used, including the open PHP page. Simply set a breakpoint on the line you want, and it should work.

However, there might be cases where your JS code is in a different PHP file than the currently open page (I faced this issue myself 😄). Nevertheless, I found a little trick that might interest you: I set an event (for example on a button click) to trigger the execution of my JS code, and when I go to the Chrome 'Event Listeners', I have a link to my JS code, allowing me to debug.

I hope this helps you too 😉

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.