{"id":228597,"date":"2022-10-24T13:59:00","date_gmt":"2022-10-24T10:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228597"},"modified":"2022-11-09T03:11:23","modified_gmt":"2022-11-09T00:11:23","slug":"depurador-de-codigo-de-visual-studio-introduccion-y-captura-de-pantalla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/depurador-de-codigo-de-visual-studio-introduccion-y-captura-de-pantalla\/","title":{"rendered":"Depurador de c\u00f3digo de Visual Studio: introducci\u00f3n y captura de pantalla"},"content":{"rendered":"\n<p>En publicaciones anteriores, he hablado un poco sobre por qu\u00e9 es importante usar un depurador adecuado en comparaci\u00f3n con algunas de las declaraciones integradas de PHP. En <a href=\"https:\/\/wordpress.mediadoma.com\/es\/xdebug-visual-studio-code-y-mamp\/\" title=\"la \u00faltima publicaci\u00f3n\" >la \u00faltima publicaci\u00f3n<\/a>, incluso, explico c\u00f3mo configurar Xdebug con Visual Studio Code (y MAMP Pro, si lo est\u00e1 usando).<\/p>\n<p>Pero si nunca ha usado una herramienta como esta antes, nunca ha visto c\u00f3mo funciona o nunca ha visto por qu\u00e9 es tan poderosa, quiero cubrir un poco de eso en esta publicaci\u00f3n.<\/p>\n<p>As\u00ed que voy a explicar un poco c\u00f3mo hacer esto en el contexto de algunas definiciones y capturas de pantalla, as\u00ed como una breve presentaci\u00f3n de pantalla al final para poder mostrar el funcionamiento del depurador de Visual Studio Code en acci\u00f3n.<\/p>\n<h2>El depurador de c\u00f3digo de Visual Studio<\/h2>\n<p>Suponiendo que tiene instalado el depurador; hay algunos t\u00e9rminos que vale la pena aprender. Claro, hay m\u00e1s, pero estos son los que considero claves:<\/p>\n<ul>\n<li><strong>Los puntos de interrupci\u00f3n<\/strong> son donde le dice al programa que detenga su ejecuci\u00f3n. Una vez que el c\u00f3digo se detiene en este punto, puede examinar las variables, ver qu\u00e9 valores est\u00e1n almacenados en la memoria, etc.<\/li>\n<li><strong>Los relojes<\/strong> son variables en el c\u00f3digo que desea observar literalmente a medida que cambian a lo largo de la ejecuci\u00f3n de las variables.<\/li>\n<li><strong>Start<\/strong> pone en marcha el depurador. Incluso si tiene puntos de interrupci\u00f3n y relojes configurados, el depurador no har\u00e1 nada hasta que lo inicie.<\/li>\n<li><strong>Step Into<\/strong> es una acci\u00f3n que, cuando presiona una llamada de funci\u00f3n, lo llevar\u00e1 a la funci\u00f3n que se est\u00e1 invocando. A veces esto es \u00fatil, por ejemplo, si desea ver qu\u00e9 est\u00e1 haciendo la funci\u00f3n; otras veces, es innecesario si solo te importa la ejecuci\u00f3n de la funci\u00f3n o solo te importa lo que devuelve.<\/li>\n<li><strong>Step Over<\/strong> le permitir\u00e1 pasar por encima de la ejecuci\u00f3n de una funci\u00f3n de modo que la ejecuci\u00f3n del programa se detenga inmediatamente despu\u00e9s de que finalice la funci\u00f3n que ha pasado por alto.<\/li>\n<li><strong>Step Out<\/strong> se usa cuando ha entrado en una funci\u00f3n, llega a un punto en el que ha terminado de evaluar el c\u00f3digo y luego est\u00e1 listo para volver a donde hab\u00eda establecido un punto de interrupci\u00f3n.<\/li>\n<li><strong>Stop<\/strong> terminar\u00e1 la ejecuci\u00f3n del depurador.<\/li>\n<\/ul>\n<p>Suena relativamente claro, \u00bfno? En mi opini\u00f3n, es m\u00e1s f\u00e1cil ver esto en acci\u00f3n.<\/p>\n<p>Adem\u00e1s, para ver qu\u00e9 \u00edconos hacen qu\u00e9, generalmente lo mejor que se puede hacer es pasar el mouse sobre ellos y luego leer la informaci\u00f3n sobre herramientas; sin embargo, despu\u00e9s de un tiempo o dos de usarlos, estar\u00e1 familiarizado con lo que hace cada uno.<\/p>\n<p>Despu\u00e9s de todo, los \u00edconos son bastante descriptivos.<\/p>\n<h3>Un ejemplo<\/h3>\n<p>Dicho esto, suponiendo que haya seguido los pasos del art\u00edculo anterior, aqu\u00ed hay un breve ejemplo de c\u00f3mo puede establecer un punto de interrupci\u00f3n y seguir su ejecuci\u00f3n a trav\u00e9s de un complemento.<\/p>\n<h4>1 punto de ruptura<\/h4>\n<p>Observe en la imagen a continuaci\u00f3n, he colocado un punto de interrupci\u00f3n al lado de una l\u00ednea de c\u00f3digo (como lo indica el punto rojo).<\/p>\n<p>Aqu\u00ed es donde la ejecuci\u00f3n se detendr\u00e1 una vez que inicie el depurador y comience a ejecutar el programa.<\/p>\n<h4>2 Establecer un reloj<\/h4>\n<p>Luego, ver una variable significa que queremos ver el valor de una variable a lo largo del ciclo de vida del programa. A continuaci\u00f3n, agrego un reloj a la variable $descripci\u00f3n.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa6c2dd2b.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-167911-61e7aa6c2dd2b.png\" alt=\"Depurador de c\u00f3digo de Visual Studio: introducci\u00f3n y captura de pantalla\" ><\/a><\/p>\n<p>En la siguiente secci\u00f3n, ver\u00e1 el valor del reloj despu\u00e9s de que la ejecuci\u00f3n del programa pasara esa l\u00ednea de c\u00f3digo.<\/p>\n<h4>3 Evaluar el reloj<\/h4>\n<p>Una vez que el c\u00f3digo ha pasado esa l\u00ednea, puede ver el valor de la variable en la\u00a0 secci\u00f3n <strong>Observar<\/strong> del panel de depuraci\u00f3n.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa7036c8e.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-167911-61e7aa7036c8e.png\" alt=\"Depurador de c\u00f3digo de Visual Studio: introducci\u00f3n y captura de pantalla\" ><\/a><\/p>\n<p>Observe en la funci\u00f3n que hay una llamada a woocommerce_wp_text_input. Usaremos esta funci\u00f3n como ejemplo para entrar en una funci\u00f3n, ya que es una funci\u00f3n que forma parte del n\u00facleo de WooCommerce.<\/p>\n<h4>4 Prep\u00e1rese para intervenir<\/h4>\n<p>Antes de ingresar a una funci\u00f3n, es importante asegurarse de que el nombre de la funci\u00f3n est\u00e9 resaltado.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa750310e.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-167911-61e7aa750310e.png\" alt=\"Depurador de c\u00f3digo de Visual Studio: introducci\u00f3n y captura de pantalla\" ><\/a><\/p>\n<p>Una vez que haya terminado, podr\u00e1 hacer clic en el\u00a0 bot\u00f3n <strong>Entrar<\/strong> para ver qu\u00e9 sucede en la funci\u00f3n.<\/p>\n<h4>5 Entrar<\/h4>\n<p>Despu\u00e9s de ingresar, ver\u00e1 un c\u00f3digo que no escribi\u00f3. En cambio, es un c\u00f3digo que forma parte de WooCommerce (al menos en este ejemplo).<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa79897c0.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-167911-61e7aa79897c0.png\" alt=\"Depurador de c\u00f3digo de Visual Studio: introducci\u00f3n y captura de pantalla\" ><\/a><\/p>\n<p>Seg\u00fan su experiencia, ver\u00e1 el c\u00f3digo que tal vez escribi\u00f3 usted o que escribi\u00f3 otra persona.<\/p>\n<h4>6 Salir<\/h4>\n<p>Una vez que haya salido del c\u00f3digo, volver\u00e1 a la l\u00ednea de c\u00f3digo inmediatamente despu\u00e9s de donde entr\u00f3 en el c\u00f3digo.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa7d94629.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-167911-61e7aa7d94629.png\" alt=\"Depurador de c\u00f3digo de Visual Studio: introducci\u00f3n y captura de pantalla\" ><\/a><\/p>\n<p>\u00bfTener sentido?<\/p>\n<h3>Un Screencast<\/h3>\n<p>Y finalmente, aqu\u00ed hay un screencast muy breve que explica c\u00f3mo se ve todo lo anterior en acci\u00f3n:<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/lzJZB5rqxlA\" frameborder=\"0\"><\/iframe><\/div>\n<p>Como se menciona en el video, esto no es completo, pero deber\u00eda ser suficiente para mostrar cu\u00e1n poderosa puede ser la depuraci\u00f3n.<\/p>\n<h2>Se necesita tiempo y pr\u00e1ctica<\/h2>\n<p>La depuraci\u00f3n lleva un poco m\u00e1s de tiempo que descargar variables en la pantalla.<\/p>\n<p>Y no digo que hacer eso no tenga su lugar; sin embargo, si desea obtener una comprensi\u00f3n m\u00e1s profunda de lo que sucede cada vez que ejecuta su programa, o si desea explorar, por ejemplo, el n\u00facleo de WordPress, entonces usar un depurador es una muy buena manera de hacerlo.<\/p>\n<p>Adem\u00e1s, dir\u00eda que el uso de un depurador puede ayudar a comprender mejor lo que va mal (o bien) dentro del contexto de su c\u00f3digo para que pueda crear la mejor soluci\u00f3n posible.<\/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>Voy a mostrar un peque\u00f1o screencast al final para poder mostrar el depurador de Visual Studio Code en acci\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":223730,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716,914,840],"tags":[1172],"class_list":["post-228597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-otro","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228597","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=228597"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228597\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223730"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}