ortagon
ortagon

Reputation: 533

Laravel Xdebug with SPA (Vue.js, React.js ..)

How to debug Laravel project with Xdebug when using Single Page Application for front end, like Vue.js, React.js etc? Tutorials on this seems to be outdated.

I have setup Xdebug on my windows machine with Laragon nginx, PHP 8.1.2 and also installed related xdebug.dll for my PHP from Xdebug official website. But Xdebug does not connect to my PhpStorm IDE. I also installed Xdebug helper extension on Chrome which sends cookie header correctly for PhpStorm.

[12344] Log opened at 2022-04-20 19:55:22.015861
[12344] [Step Debug] INFO: Checking remote connect back address.
[12344] [Step Debug] INFO: Checking header 'HTTP_X_FORWARDED_FOR'.
[12344] [Step Debug] INFO: Checking header 'REMOTE_ADDR'.
[12344] [Step Debug] INFO: Client host discovered through HTTP header, connecting to 127.0.0.1:9003.
[12344] [Step Debug] WARN: Could not connect to client host discovered through HTTP headers, connecting to configured address/port: 127.0.0.1:9003. :-|
[5520] Log opened at 2022-04-20 19:55:32.343684
[5520] [Step Debug] INFO: Checking remote connect back address.
[5520] [Step Debug] INFO: Checking header 'HTTP_X_FORWARDED_FOR'.
[5520] [Step Debug] INFO: Checking header 'REMOTE_ADDR'.
[5520] [Step Debug] INFO: Client host discovered through HTTP header, connecting to 127.0.0.1:9003.
[5520] [Step Debug] INFO: Connected to debugging client: 127.0.0.1:9003 (from REMOTE_ADDR HTTP header). :-)
[5520] [Step Debug] -> <init xmlns="urn:debugger_protocol_v1" xmlns:xdebug="https://xdebug.org/dbgp/xdebug" fileuri="file:///D:/Projects/iq/iq-integrate/public/index.php" language="PHP" xdebug:language_version="8.1.2" protocol_version="1.0" appid="5520" idekey="PHPSTORM"><engine version="3.1.4"><![CDATA[Xdebug]]></engine><author><![CDATA[Derick Rethans]]></author><url><![CDATA[https://xdebug.org]]></url><copyright><![CDATA[Copyright (c) 2002-2022 by Derick Rethans]]></copyright></init>

Upvotes: 2

Views: 1025

Answers (1)

farruq
farruq

Reputation: 29

maybe this will help someone i used extension requestly to send xdebug key and it helped me. xdebug starts working Other extension like xdebug-helpers are not sending xdebug key. my front app on vuejs spa

Upvotes: 0

Related Questions