How to debug AJAX (POST) using PhpStorm and Xdebug?

I configured PhpStorm to debug the HTTP GET - but only when I load the page directly.

When I want to debug AJAX, I take the URL that my JS will request and create a PhpStorm configuration to debug it.

Not particularly elegant, is it?

And of course, I cannot do this for POST requests (or can I?).

Ideally, I would like to download my AngularJs application in a browser (Chrome) and be able to interrupt and debug the backend in PhpStorm.

I googled a lot and found a lot that came close, but I can not find the answer: - (

Who can help?

+5
source share
2 answers

If Xdebug and PHPStorm are both configured to debug HTTP GET when the page loads normally, just add the GET parameter to the AJAX request URL in your Javascript. For example: http://example.com/script.php?XDEBUG_SESSION_START=PHPSTORM

Turn on debugging listening in PHPStorm, send an AJAX request with a new URL, and the debugger should catch it. The POST data you are looking for should appear in $ _POST as usual.

+1
source

I use the hack method to debug AJAX requests. My project is Laravel. You can change this code as compatible with your technology.

Main idea:

  • Remove the debug port of the home page
  • Create session
  • Using this session, concatenate the AJAX URL

When debugging starts, the port will be applied to all ajax urls that have + debug_url .

HomeController @index Method

 // Development purpose only if ($request->has('XDEBUG_SESSION_START')) $request->session()->put('debug_port' , $request->get('XDEBUG_SESSION_START')); 

master.blade.php

 <script> var debug_url='?XDEBUG_SESSION_START={{session('debug_port')}}'; </script> 

submit.blade.php

 <script> $.ajax(url + debug_url, { method:'post', data:{} }); </script> 
0
source

All Articles