Debug Angular 1 on frontend Laravel 5.5 API in the backend

Hello dear collegues,

 

I am busting my head with how to debug this. I've landed one project in UK and the guys have on the frontend Angular 1 and on the backend Laravel 5.5 API. The question is pretty simple, how can I debug the call from frontend to my backend in PhpStorm?

 

Here are the files you might need to understand it better in images:

https://i.imgur.com/t01fBqN.png

The first one is making a request towards the API with the route `api/user/rfq`.

The api.php file looks like this:

https://i.imgur.com/nqwxklG.png

And this leads us to `UserController and createRfq` function.

Ok and now when the user on frontend clicks submit I want that Phpstorm catches this debug break point so I can debug it. But sadly I can't make it work. What I would like from the experts here is to hear how can this be done in an elegant way?

 

Now for the curious ones I managed to do it the old school way with Phpstorm, hacking the request and of course who else but Postman. Here is how I did it, but I don't like it, you'll see at once why.

 

In the UserController@createRfq I made `info(json_encode($request->all()))` that way I caught what was in the POST and had in JSON format. Look here (https://i.imgur.com/AIoU77y.png). This information I took and shipped over to Postman (https://i.imgur.com/266nTTE.png) and of course added to the URL legendary: `?XDEBUG_SESSION_START=1`, that way I was able to catch it the backend and it works for the time being, but I don't want to go back and forth writing to laravel.log the request and then port it to Postman to debug the app. Please guys help me out here. Thanks in advance.

 

P.S. I've solved it, just now.

As soon as I wrote it I thought that it might have been that this frontend mambo jumbo is compiled. So I went directly to the assets/js/main.js found the line that I needed and appended to it `?XDEBUG_SESSION_START=1`: 

https://i.imgur.com/MbFbfWl.png

I reloaded the site, went through the form and guess what it's working perfectly now in Phpstorm and I got my breakpoint:

https://i.imgur.com/XNyRjay.png

Ohh such a nice way to end the workweek.

Hope this will help somebody.

 

 

 

 

0
9 comments

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.

0

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.

0

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.

0

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).

0

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.

0

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.

0

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...

0

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. :)

1

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

0

Please sign in to leave a comment.