Debug Angular 1 on frontend Laravel 5.5 API in the backend

Hi there,

If it's on the same domain ...just use Xdebug browser extensions (there are few for Firefox and Chrome). Once you chose "Debug"  it will set an Xdebug cookie which will be passed together with all requests. Once debugging is no longer required, just undo/disable "Debug" action in browser extension (or remove cookie manually).

This way you do not have to edit any source code in your JS.

P.S. You can also use bookmarklets .. but it may trigger actual page debug first... https://www.jetbrains.com/phpstorm/marklets/ (if you have browse extension then use that -- it's more convenient IMO)

In any case, check it out: https://www.jetbrains.com/help/phpstorm/zero-configuration-debugging.html#Zero-Configuration_Debugging.xml

P.S. You can also just put xdebug_break(); in your PHP code -- programmatic breakpoint.

Andriy, thank you very much. The first one worked at once with the Xdebug extension tool. But the rest I'll test as well, thank you again.

P.S. xdebug_break(); I am using in blade view in Laravel, works perfectly.

Andriy, I have another question for you on the same pattern please.

The client has two repositories one is for frontend and the other one is the API in Laravel.

Both of the repositories have Dockerfile so they both run Docker containers.

(1) Frontend repository is run on: http://localhost:8888 which redirects to dockers port 4200.

(2) Api repository is running on http://localhost:8099 which redirects to dockers port 80.

Now as you wrote to me above, when I run the environment with Postman and add ?XDEBUG_SESSION_START=1 it works like charm and I can debug the code inside the Phpstorm.

Now what I would like to do is next. When I run the Angular application on http://localhost:8888 and it sends the request towards my api on http://localhost:8099/api I would like to catch it with the breakpoint inside the Phpstorm. I tried with enabling Xdebug Helper, but it just does NOT want to run.

Please advise me how I can make this work in the least painful way. Thank you in advance.

What is frontend and what is API?

API is PHP I assume. But what is "frontend" -- JS .. or PHP as well?

For JS:

1) Use xdebug_break(); inside that function on API and check the request COOKIE -- see if xdebug cookie is present (since you were trying to use Xdebug browser extension).

2) If it's not there .. then it's either not getting set at all (check Network panel in browser to see what data get sent from frontend to API (assuming it's JS action that triggers it)) .. or maybe your API container somehow strips it.

Angular is JS .. so it should use the same cookie when making AJAX requests (domain is the same, just port differs .. unless I misunderstanding how it works here, which might be the case).

If "frontend" is PHP .. then cookie will not do anything here ... as they do not participate in server to server talks (unless you add that (cookie or xdebug param) to your code explicitly).

In such case I may only assume "xdebug_break();" .. or "xdebug.remote_autostart = 1" in php.ini -- will tell Xdebug to attempt to debug every single request regardless on Xdebug param.

P.S. If normal request from Postman with Xdebug parameter works (BTW: try with cookie, affects all requests and no need to add/remove it all the time as it can be set on environment level), then xdebug side is setup correctly.

TBH it's hard to suggest something more concrete based on your description alone (as I may simply misinterpret your setup).

Hi Andry,

thank you for coming back to me.

Sorry about stripped environment information.

On the frontend client has docker setup and Angular App. It runs on http://localhost:8888/

This app Angular is making calls to backend API which is built in Laravel.

As said earlier when I try to debug with Phpstorm and Postman as 1 to 1 relationship ?XDEBUG_SESSION_START=1 works like charm:

Now what I would like to do is next. When I go to Angular app here http://localhost:8888/ and want to log in, the Angular app will send API request towards the api here http://localhost:8099/api/user/login (to Laravel). I would like to put a breakpoint in Phpstorm in the Controller and debug further.

Please have in mind that both Angular App and Laravel App API run different DOCKER containers.

Yes, it's a JS app.

I believe cookie should work (unless cookie set for localhost:8888 will not be carried over to localhost:8099).

I suggest this:

1) Open the desired page (login) in browser

2) Use Xdebug browser extension to enable debugger -- it must set the xdebug cookie.

3) Verify the cookie has been set: "Application tab | Storage > Cookies" in Chrome (the name is XDEBUG_SESSION).

4) Do your login thing and see if call to API will contain that cookie. If not -- that's the issue. See if cookie can be set manually via browser for localhost:8099 (maybe some extension allows that).

If it's not possible to set the cookie this way ... try adding extra param to the API request then (XDEBUG_SESSION_START=1; next to email & password params)

That's the best I can suggest right now.

Hi Andry,

thank you again for fast reply.

1) Open the desired page (login) in browser - I did

2) Use Xdebug browser extension to enable debugger -- it must set the xdebug cookie. - I did

3) Verify the cookie has been set: "Application tab | Storage > Cookies" in Chrome (the name is XDEBUG_SESSION).

4) Do your login thing and see if call to API will contain that cookie. If not -- that's the issue. See if cookie can be set manually via browser for localhost:8099 (maybe some extension allows that).

Sadly this one is not set for some reason.

Just wanted to give you feedback on your flow of thoughts.

I've asked our frontend developers to tell me where is the best way to put GET parameter ?XDEBUG_SESSION_START=1 so I can try to catch it. Will keep you posted. It seems that indeed for some weird reason the COOKIE is not transferred from  http://localhost:8888 to http://localhost:8099. Hmm...

Hi Andry,

I hade made it work. Hooray

As said and as we did earlier the injecting of GET parameter of `?XDEBUG_SESSION_START=1`.

On the frontend, God thank it's written well so I had to change 2 lines of code, see below from:

httpGetService(endpoint: String, token: Boolean, params?: String) {
        const path = this.getBaseUrl()
            + endpoint
            + (token ? `?token=${this.getUserInfo()}` : ``)
            + (params ? `&${params}` : ``);
        return this.http.get(path, this.getDefaultHeaders()).pipe(map(this.prepareResponse));
}

to this:

httpGetService(endpoint: String, token: Boolean, params?: String) {
        const path = this.getBaseUrl()
            + endpoint
            + (`?XDEBUG_SESSION_START=1`)
            + (token ? `&token=${this.getUserInfo()}` : ``)
            + (params ? `&${params}` : ``);
        return this.http.get(path, this.getDefaultHeaders()).pipe(map(this.prepareResponse));
}

Take a note on injection of `?XDEBUG_SESSION_START=1`

Afterwards all went as smooth as it should be.

Thank you for your help Andry. :)

Thanks for coming back -- will definitely help others in similar situation (they will know about possible solution and that it works).