Instalar vscode (Visual Studio Code) y xDebug en Kali Linux

 Un recurso importante durante la revisión de código manual y dinámico, es contar con un entorno fácil de configurar que nos permita realizar el debugging de la aplicación, en este artículo vamos a mencionar la instalación y configuración de vscode un entorno de desarrollo muy utilizado en estos días que cuenta con características interesantes para realizar debugging.

Visual Studio Code es un editor de código fuente desarrollado por Microsoft para Windows, Linux y macOS. Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis, finalización inteligente de código, fragmentos y refactorización de código.

Instalación de vscode

Para instalar vscode lo descargamos en el link que les muestro a continuación y como vamos a trabajar bajo Ubuntu  escogemos la opción del paquete .deb 

Ejecutamos el comando  dpkg -i code_1.45.1-1589445302_amd64.deb.

Luego que la instalación finaliza, podemos iniciar Visual Studio en: Aplicaciones -> Aplicaciones habituales -> Desarrollo ->  Visual Studio Code o simplemente escribimos el nombre del programa en una terminal y presionamos enter.

Instalación de xDebug

Una vez que Visual Studio Code está abierto, vamos a las extensiones y buscamos php-debug para instalarlo.

A continuación iniciamos apache mediante el comando  systemctl start apache2.  Luego vamos a la raíz del directorio www y creamos un archivo php simple con el siguiente código:

 

Abrimos un navegador y vamos a http://localhost/info.php y copie la salida completa (use Ctrl + a).

Vamos  a https://xdebug.org/wizard, y pegamos la salida (Ctrl + p) y presionamos analizar phpinfo () output.

Wizard de instalación de xDebug

Es esta sección la página de xDebug analizará el output de phpinfo() en nuestro sistema y nos guiará durante el proceso de instalación.

Seguimos las instrucciones de instalación:

1.     Descargamos xdebug-2.9.6.tgz.
2.     Instalamos los pre-requisitos para instalar los componentes compilados de php.
3.     En un sistema Debian ejecutamos: apt-get install php-dev autoconf automake.
4.     Desempaquetamos el archivo descargado con: tar -xvzf xdebug-2.9.6.tgz.
5.     En una terminal ejecutamos: cd xdebug-2.9.6.
6.     Y luego este comando: phpize.

Nota: Los usuarios de Debian y Ubuntu deben instalar los paquetes de desarrollo con el comando apt install php-dev.  Los usuarios de openSuse lo pueden hacer con  zypper install php7-devel.

7.    Ejecutamos: ./configure.
8.    Ejecutamos: make.
9.    Copiamos los modules con el comando: cp modules/xdebug.so /usr/lib/php/20180731.
        (Editamos el archivo php.ini) vim /etc/php/7.3/apache2/php.ini y agregamos la línea
        zend_extension = /usr/lib/php/20180731/xdebug.so
       Nos aseguramos que zend_extension = /usr/lib/php/20180731/xdebug.so se encuentra debajo de la línea OPcache.
10.  También actualizamos los archivos php.ini  en directorios adyacentes, tanto para el command line como para el webserver.
11.  Habilitamos debugging remoto en nuestro sistema en el archivo php.ini.

 12. Reiniciamos nuestro webserver con: systemctl restart apache2

Verificamos la instalación de xdebug mediante la salida de phpinfo() en la sección XDebug.

Para esto ejecutamos  php -m y revisamos que el modulo XDebug se encuentra en el output.

Configuración de vscode

Para configurar vscode primero creamos un directorio, le otorgamos los permisos apropiados y luego creamos un archivo .php con el siguiente código:

 <?php
    echo "hello world";
    $a=30;
    $b=50;
    echo $a+$b;
?>

En Visual Studio code, abre la carpeta con el archivo .php.

Ve a la tab debugger y presiona el engranaje para posteriormente seleccionar PHP como lenguaje. Luego de esto un archivo de configuración (launch.json) se creará automáticamente con la siguiente configuración:

Vamos a la sección de Exploración y seleccionamos el archivo .PHP, a continuación seleccionamos el breakpoint que queremos configurar, presionando Click derecho > Add New Breakpoint.

Vamos a ejecutar, para ello  podemos seleccionar “Listen for Xdebug” o “Launch currently open script”

     1.     Debbuging “Listen for Xdebug”: Presionamos el botón -> select  “Listen for Xdebug” -> inicia la depuración.  Se verá una herramienta una barra de herramientas del depurador.

     2.    Abrimos un navegador, buscamos el archivo php y presionamos Enter. Visual Studio code llegará al breakpoint. Es importante mencionar que no es necesario colocar el número de puerto en la URl.

     3.     Depuración de "Launch currently open script": Pulsamos el botón Ejecutar -> seleccionamos "Launch currently open script" -> iniciar la depuración. Se verá una barra de herramientas del depurador y  Visual Studio code llegará al breakpoint configurado.

Fuente:

https://www.inmune7.com/blog/debugging-con-vscode