{"id":230466,"date":"2022-12-06T16:22:00","date_gmt":"2022-12-06T13:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230466"},"modified":"2022-12-07T12:17:01","modified_gmt":"2022-12-07T09:17:01","slug":"instalacion-de-xdebug-parte-2-el-ide","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/instalacion-de-xdebug-parte-2-el-ide\/","title":{"rendered":"Instalaci\u00f3n de Xdebug, Parte 2: El IDE"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/instalacion-de-xdebug-parte-1-el-modulo-xdebug\/\" title=\"Ahora que Xdebug est\u00e1 instalado con su instalaci\u00f3n local de PHP\">Ahora que Xdebug est\u00e1 instalado con su instalaci\u00f3n local de PHP<\/a><\/strong>, es hora de conectarlo al IDE. Esto nos brinda todas las ventajas que Xdebug tiene para ofrecer.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7414e9e342.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7414e9e342.png\" alt=\"Instalaci\u00f3n de Xdebug, Parte 2: El IDE\"><\/a><\/p>\n<p>Es decir, nos permite:<\/p>\n<ul>\n<li>establecer puntos de interrupci\u00f3n,<\/li>\n<li>paso a trav\u00e9s de nuestro c\u00f3digo,<\/li>\n<li>y observa las variables<\/li>\n<\/ul>\n<p>Todo el tiempo el programa se est\u00e1 ejecutando. Esto significa que mientras se procesa una p\u00e1gina, podemos establecer puntos en nuestra base de c\u00f3digo donde podemos ver qu\u00e9 est\u00e1 haciendo el servidor con nuestro c\u00f3digo.<\/p>\n<p>Entonces, claro, aunque se llama depuraci\u00f3n para eliminar errores, tambi\u00e9n puede dar una idea de c\u00f3mo se ejecuta una aplicaci\u00f3n, tema o complemento basado en WordPress y puede ayudarnos a comprender mejor el n\u00facleo de WordPress.<\/p>\n<h2>Instalaci\u00f3n de Xdebug en el c\u00f3digo de Visual Studio<\/h2>\n<p>En este punto, debe tener el siguiente entorno configurado en su m\u00e1quina local:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/local-development-for-the-indie-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Valet<\/a><\/strong> (que incluye Nginx y MySQL y <strong><a href=\"https:\/\/tommcfarlin.com\/databases-and-tools-indie-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">herramientas relacionadas<\/a><\/strong> )<\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/instalacion-de-wordpress-para-el-desarrollo-local\/\" title=\"WordPress\">WordPress<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/the-independent-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">c\u00f3digo de estudio visual<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/instalacion-de-xdebug-parte-1-el-modulo-xdebug\/\" title=\"xdebug\">xdebug<\/a><\/strong><\/li>\n<\/ul>\n<p>Las tareas restantes para todo lo anterior implican vincular Xdebug con Visual Studio Code para obtener una representaci\u00f3n literal de c\u00f3mo funciona WordPress (y, por lo tanto, nuestro trabajo), qu\u00e9 est\u00e1 haciendo, etc. siempre que se est\u00e9 ejecutando en el navegador.<\/p>\n<p>Dicho esto, comencemos.<\/p>\n<h3>1 Instalaci\u00f3n de las extensiones necesarias<\/h3>\n<p>Primero, asegur\u00e9monos de que la Extensi\u00f3n de depuraci\u00f3n de PHP est\u00e9 instalada en Visual Studio Code. Desde el men\u00fa Extensiones en la barra lateral del IDE, busque PHP Debug, y deber\u00eda ver una pantalla como la siguiente.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74153b170c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74153b170c.png\" alt=\"Instalaci\u00f3n de Xdebug, Parte 2: El IDE\"><\/a><\/p>\n<p>Si la extensi\u00f3n a\u00fan no est\u00e1 instalada, contin\u00fae e inst\u00e1lela. Es posible que deba reiniciar Visual Studio Code para que la nueva extensi\u00f3n surta efecto.<\/p>\n<p>A partir de aqu\u00ed, hay algunos ajustes de configuraci\u00f3n adicionales que debemos verificar antes de intentar depurar cualquier c\u00f3digo.<\/p>\n<h3>2 Configuraci\u00f3n de Xdebug (\u00a1a\u00fan m\u00e1s!)<\/h3>\n<p>Recordemos de <strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/instalacion-de-xdebug-parte-1-el-modulo-xdebug\/\" title=\"la publicaci\u00f3n anterior\">la publicaci\u00f3n anterior<\/a><\/strong> que necesit\u00e1bamos incluir Xdebug en nuestro archivo <strong>php.ini .<\/strong> Espec\u00edficamente, tuvimos que agregar <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-18-reference-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la siguiente l\u00ednea de c\u00f3digo<\/a><\/strong> para habilitar Xdebug:<\/p>\n<pre><code>zend_extension=\"\/usr\/local\/lib\/php\/pecl\/20160303\/xdebug.so\"<\/code><\/pre>\n<p>Ahora tenemos que hacer un poco m\u00e1s de trabajo.<\/p>\n<ol>\n<li>necesitaremos agregar una l\u00ednea de configuraci\u00f3n al archivo <strong>php.ini<\/strong> al que se hace referencia <strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/instalacion-de-xdebug-parte-1-el-modulo-xdebug\/\" title=\"en la \u00faltima publicaci\u00f3n\">en la \u00faltima publicaci\u00f3n<\/a><\/strong> ,<\/li>\n<li>necesitaremos configurar un script de demostraci\u00f3n para asegurarnos de que haya una secci\u00f3n Xdebug adecuada,<\/li>\n<li>necesitaremos configurar Visual Studio Code<\/li>\n<\/ol>\n<p>Afortunadamente, todo lo anterior son tareas relativamente r\u00e1pidas. Primero, la l\u00ednea de configuraci\u00f3n que querr\u00e1 agregar a su archivo <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-20-set-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">es la siguiente:<\/a><\/strong><\/p>\n<pre><code>[XDebug]\nxdebug.remote_enable = 1\nxdebug.remote_autostart = 1<\/code><\/pre>\n<p>A continuaci\u00f3n, configure un script de demostraci\u00f3n y con\u00e9ctelo con Valet. Puede hacer esto f\u00e1cilmente creando un directorio en su escritorio, creando algo como <strong>test.php<\/strong> y luego agregando <strong>phpinfo();<\/strong> al archivo<\/p>\n<p>Despu\u00e9s de eso, <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#the-link-command\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vincule<\/a><\/strong> el directorio y <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#other-valet-commands\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">reinicie<\/a><\/strong> Valet. Nombr\u00e9 mi ejemplo de directorio y dej\u00e9 caer un archivo <strong>test.php<\/strong> en el directorio.<\/p>\n<p>Permitiendo que todo est\u00e9 configurado correctamente, deber\u00eda poder cargar el archivo en su navegador y ver algo como lo siguiente:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74157a25f2.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74157a25f2.png\" alt=\"Instalaci\u00f3n de Xdebug, Parte 2: El IDE\"><\/a><\/p>\n<p>Y ahora necesitamos configurar Xdebug. Entonces, suponiendo que todo lo anterior haya ido bien y que las extensiones est\u00e9n correctamente instaladas y funcionando, trabajar con Visual Studio Code deber\u00eda ser f\u00e1cil.<\/p>\n<p>Naturalmente, necesitaremos un script de demostraci\u00f3n que podamos probar, as\u00ed <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-21-test-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">que he escrito algo que es trivial<\/a><\/strong> pero que le dar\u00e1 una idea de qu\u00e9 esperar al establecer puntos de interrupci\u00f3n y qu\u00e9 no.<\/p>\n<pre><code>&lt;?php\n\n\/\/ First, set a sample name.\n$exampleName = 'alice';\necho $exampleName;\n\n\/\/ Next, change the name and display it.\nif ('alice' === $exampleName) {\n    $exampleName = 'bob';\n}\necho $exampleName;\n<\/code><\/pre>\n<p>Ahora dirijamos nuestra atenci\u00f3n al IDE. En Visual Studio Code, haga clic en el icono <strong>Depurar<\/strong> que est\u00e1 justo encima del icono de <strong>Extensiones<\/strong> y justo debajo del icono <strong>de Control de c\u00f3digo fuente .<\/strong><\/p>\n<p>En la barra lateral en la parte superior, notar\u00e1 que hay un bot\u00f3n de reproducci\u00f3n. Al lado hay una lista desplegable. Puede leer &quot;Sin configuraci\u00f3n&quot;. Si ese es el caso, y voy a suponer que lo es, hay algunos pasos muy espec\u00edficos que deber\u00e1 seguir para asegurarse de que la depuraci\u00f3n funcione correctamente.<\/p>\n<h4>1 Abra el directorio del script<\/h4>\n<p>Deber\u00e1 asegurarse de estar en el directorio del script en Visual Studio Code.<\/p>\n<p>Es decir, no es suficiente asegurarse de que solo tiene un archivo abierto. Visual Studio Code necesita saber desde qu\u00e9 directorio est\u00e1 trabajando (porque crea un directorio <strong>.vscode<\/strong> oculto dentro del directorio principal).<\/p>\n<h4>2 Crear la configuraci\u00f3n de lanzamiento<\/h4>\n<p>La configuraci\u00f3n de inicio predeterminada deber\u00eda funcionar de inmediato, pero se basa en el paso anterior.<\/p>\n<p>Una vez que haya abierto un directorio (en mi caso, el que contiene <strong>test.php<\/strong>) en Visual Studio Code, inicie la paleta de comandos (puede hacerlo a trav\u00e9s de un acceso directo que var\u00eda de un sistema operativo a otro o usando el men\u00fa <strong>Ayuda<\/strong> y luego seleccione Paleta de comandos).<\/p>\n<p>Una vez que aparezca, ingrese <strong>&gt; launch.json<\/strong> y le dar\u00e1 la opci\u00f3n de ver el archivo <strong>launch.json<\/strong>. Fuera de la caja, deber\u00eda <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-22-launch-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">verse as\u00ed<\/a><\/strong> :<\/p>\n<pre><code>{\n    \/\/ Use IntelliSense to learn about possible attributes.\n    \/\/ Hover to view descriptions of existing attributes.\n    \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"name\": \"Listen for XDebug\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"port\": 9000\n        },\n        {\n            \"name\": \"Launch currently open script\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"program\": \"${file}\",\n            \"cwd\": \"${fileDirname}\",\n            \"port\": 9000\n        }\n    ]\n}<\/code><\/pre>\n<p>En este punto, el men\u00fa <strong>Depurar<\/strong> deber\u00eda tener algo como Iniciar secuencia de comandos actualmente abierta junto al icono de reproducci\u00f3n. Si no es as\u00ed, te dar\u00e1 la opci\u00f3n de seleccionar algo como PHP (ya que tenemos la extensi\u00f3n instalada).<\/p>\n<p>Si es as\u00ed, seleccione esa opci\u00f3n.<\/p>\n<h3>3 Establecer algunos puntos de interrupci\u00f3n<\/h3>\n<p>Ahora es el momento de ver el depurador en acci\u00f3n. En este punto, contin\u00fae e inicie una ventana del navegador con su script de prueba.<\/p>\n<p>El mio es sencillo:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415b5ced0.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415b5ced0.png\" alt=\"Instalaci\u00f3n de Xdebug, Parte 2: El IDE\"><\/a><\/p>\n<p>Despu\u00e9s de eso, ingrese a su IDE y luego haga clic en el panel izquierdo a la izquierda del n\u00famero de l\u00ednea. Esto establecer\u00e1 algunos puntos de interrupci\u00f3n.<\/p>\n<p>Aqu\u00ed hay un ejemplo:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415f30251.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415f30251.png\" alt=\"Instalaci\u00f3n de Xdebug, Parte 2: El IDE\"><\/a><\/p>\n<p>Ahora haga clic en el bot\u00f3n <strong>Reproducir<\/strong> para el depurador. Inmediatamente, deber\u00eda notar que la barra de estado se vuelve naranja y algunos controles de depuraci\u00f3n (para Continuar, Entrar, Salir, Reiniciar y Detener). No estamos interesados \u200b\u200ben estos en este momento, ya que los analizaremos m\u00e1s a fondo en la pr\u00f3xima publicaci\u00f3n.<\/p>\n<p>Observe tambi\u00e9n que su panel izquierdo tiene informaci\u00f3n sobre variables, relojes, etc. Si ha establecido puntos de interrupci\u00f3n en sus variables locales, notar\u00e1 que <strong>$exampleName<\/strong> est\u00e1 resaltado pero probablemente no inicializado.<\/p>\n<p>Haga clic en el bot\u00f3n <strong>Reproducir<\/strong> en los nuevos controles que han aparecido y deber\u00eda ejecutarse hasta el siguiente punto de interrupci\u00f3n.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7416248504.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7416248504.png\" alt=\"Instalaci\u00f3n de Xdebug, Parte 2: El IDE\"><\/a><\/p>\n<p>La l\u00ednea ahora se resaltar\u00e1 y, en el panel de depuraci\u00f3n, se le dar\u00e1 un valor a <strong>$exampleName .<\/strong> En mi caso, esta es Alice.<\/p>\n<p>Puedes seguir jugando con esto tanto como quieras para tener una idea de c\u00f3mo funciona el depurador.<\/p>\n<h2>La pr\u00f3xima vez, capturas de pantalla<\/h2>\n<p>La depuraci\u00f3n es poderosa, pero puede ser desalentadora en muchos sentidos. A partir de la pr\u00f3xima publicaci\u00f3n, comenzar\u00e9 a compartir algunos screencasts que explican c\u00f3mo:<\/p>\n<ul>\n<li>depurar funciones y variables,<\/li>\n<li>cambiar valores sobre la marcha,<\/li>\n<li>trabajar con la consola de depuraci\u00f3n,<\/li>\n<li>y m\u00e1s.<\/li>\n<\/ul>\n<p>Estos tomar\u00e1n un poco m\u00e1s de tiempo porque ser\u00e1n videos que describen c\u00f3mo hacer esto, pero el beneficio deber\u00eda ser grande.<\/p>\n<p>Si a\u00fan no ha tenido la oportunidad de ponerse al d\u00eda con todo el contenido de esta serie, se lo recomiendo encarecidamente.<\/p>\n<h3>\ud83d\udce3 Una nota para las ventajas de los miembros<\/h3>\n<p>Tenga en cuenta, sin embargo, que antes de la pr\u00f3xima publicaci\u00f3n sobre screencasts y la pr\u00f3xima entrega de esta serie, tengo algunos anuncios que hacer espec\u00edficamente para los miembros del sitio que incluyen descuentos en software basado en WordPress.<\/p>\n<p>Cubrir\u00e9 m\u00e1s sobre eso la pr\u00f3xima semana.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Despu\u00e9s de instalar Xdebug, aqu\u00ed se explica c\u00f3mo conectarlo a su IDE y obtener informaci\u00f3n sobre las variables, funciones y el orden en que ejecuta todo el programa de su c\u00f3digo.<\/p>\n","protected":false},"author":1,"featured_media":236530,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716],"tags":[1172],"class_list":["post-230466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=230466"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230466\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/236530"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=230466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=230466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=230466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}