06. Visual Studio Code beállítása a távoli kód szerkesztéséhez és debuggolásához

Visual Studio Code

Visual Studio Code beállítása a távoli kód szerkesztéséhez

  1. Legyél készen a WSL alatti fájlrendszerrel, másold fel az Apache + PHP + MariaDB ( MySQL ) rendszer egy könyvtárába a szerkesztendő fájlokat.
  2. Telepítsd a Visual Studió Code alá a WSL ( korábbi nevén Remote - WSL ) kiterjesztést. Ennek hatására a Visual Studio Code -ból meg tudod nyitni a WSL-ben a Linux fájlrendszerből egy mappát, vagyis lesz egy projekted. Például innen: /var/www/fw3.com. Ha a Remote Development csomagot telepíted, abban benne van a WSL is.
  3. A teljesség kedvéért a VSC-re telepítsd a PHP Extension Pack modult is, ami által tudod a PHP szerkesztés és debuggolás teljes eszköztárát használni.

Érdemes a Linux fájlrendszerét elérni Windows alól root userként. Akkor a Visual Studio Code-ban a File/Open folder menüpontban meg kell keresni a \\wsl$\Debian\var\www\html foldert és azzal kell megnyitni a Visual Studio Code-ot.

XDEBUG használata remote gépen

Xdebug telepítése a Linuxra

Először is telepíteni a kell a WSL alatti Linuxon a PHP-hoz az xdebug extension-t.

apt-get install php8.4-xdebug

Ezután újra kell indítani a php8.4-fpm-et, esetleg az Apache-ot is.

systemctl restart php8.4-fpm
systemctl restart apache2

Létrejön az /etc/php/8.4/mods-available/xdebug.ini fájl, amely az xdebux beállításait fogja tartalmazni.

Hozd létre az alábbi tartalmat:

zend_extension=xdebug.so              ; Engedélyezi az xdebug használatát
xdebug.start_with_request= yes       ; A böngésző kérésére indul az xdebug
xdebug.mode = debug                     ; Csak debuggolásra akarom használni a kiterjesztést
xdebug.log = /var/log/xdebug.log   ; Naplózni akarom az xdebug üzeneteit
xdebug.client_host = 127.0.0.1         ; Az xdebug kliense (vagyis ahonnan elérem) a localhost legyen
xdebug.client_port = 9003               ; Ezt a portot használom az xdebug3 esetén.
xdebug.remote_log = /var/log/xdebug.log
xdebug.log_level = 3                        ; A logolás szintjét állíthatom be

Úgy tudod kipróbálni, hogy a megadott könyvtárba készítesz egy egyszerű php fájlt, mondjuk xdebug.php néven. A tartalma az alábbi:

<?php
xdebug_info();
phpinfo();
?>

Ennek hatására felül bejön az Xdebug panelja és a remote szerveren telepített PHP összes lényeges információja.

Ahhoz, hogy a Linux rendszeren működjön a távoli kód végrehajtás érdemes a tűzfalon beállítani egy szabályt a 9003-as portra vagy letiltani a tűzfalat. Ez fejlesztői gépen nem olyan nagy veszély.

ufw disable

Xdebug a böngészőre

A fentieken kívül kell telepíteni a böngészőmre egy plugint, ami az xdebug kérését indítja el. Firefox esetén az Xdebug Helpert javaslom, Chrome esetén Xdebug for Chrome extensiont. Azt érdemes telepíteni, amelynek sok felhasználója van...

Beállítani valójában semmit sem kell. Használatkor a kis bogárnak zöldnek kell lennie

Xdebug a VSC-ben

Mivel korábban telepítetted a VSC alá a PHP Extension Pack-et, ezért van a gépeden egy kiterjesztés, amely a VSC-ben kezeli a távoli kéréseket. Ha nem telepítetted, akkor rajta, most telepítsd.

A VSC-ben megnyomod a Run/Start Debugging menüpontot és a mellette lévő setting ikont vagy Run / Open Configurations menüt.... Szóval konfigurálni kell a debuggolást. Rákérdez arra, hogy elkészíted-e vagy megnyitja a launch.json fájlt. ez a projektedhez tartozó fájl lesz. az alábbi konfigurációt kell betolni az elejére

    {     
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "stopOnEntry": false,
      "log": true,
      "pathMappings": {
         "/var/www/fw3.com": "${workspaceFolder}"
      }
    },

A beállítások magyarázatai: 

  • "name": "xxxxxx" - Ez fog megjelenni a debugger lehetőségek listájában
  • "Request": "launch" - A böngésző hívására indul el.
  • "port" : 9003 - Ezen a porton kommunikál  VSC és az xdebug
  • "stopOnEntry": true/false - Megálljon-e a VSC az első php kódsorán
  • "log": true - Legyen-e logolás
  • "pathMappings": =>"${workspaceFolder}" - A megadott mappa a Linuxon megfeleljen a VSC munkaterületének. Így fogja megtalálni a hívásoknál a megfelelő fájlokat.

Még lehetséges az alábbi beállítás is a VSC-ben. 

Amikor PHP kódot szerkesztek, akkor a PHP csomagoknak kell egy olyan hely, ahol elérik a PHP.EXe fájlt, ezért a Windowson telepíteni érdemes egy xamp-ot. A xamp-on belül pedig egy PHp folder is létrejön. ezt a könyvtárat meg kell adni a Visual Studio Code-nak. Ehhez a File / Preferences / Settings menüben meg kell nyitni a VSC setting.json fájlját. Rá kell keresni a php.exe kifejezésre és két sort kapunk Ezt a két sort a php.exe aktuális elérési útjával kell módosítanunk.

"php.executablePath": "c:/xémpp/php/php.exe", 
.
"php.debug.executablePath": "c:/xampp/php/php.exe",
Tags
#WSL
#VSC