{"id":9013,"date":"2022-01-14T17:34:30","date_gmt":"2022-01-14T22:34:30","guid":{"rendered":"https:\/\/itsoftware.com.co\/content\/?p=9013"},"modified":"2022-01-18T17:44:20","modified_gmt":"2022-01-18T22:44:20","slug":"depuracion-chrome-mobile-chrome-desktop","status":"publish","type":"post","link":"https:\/\/itsoftware.com.co\/content\/depuracion-chrome-mobile-chrome-desktop\/","title":{"rendered":"Depuraci\u00f3n web m\u00f3vil Android, desde Google Chrome Desktop"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Desde la versi\u00f3n de escritorio para Chrome,  contamos con herramientas para desarrolladores, desde donde es posible realizar un seguimiento completo, del comportamiento de una p\u00e1gina web, desde sus estilos, scripts, c\u00f3digo html, tiempos de carga, rendimiento, visualizaci\u00f3n responsive, etc.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"700\" height=\"329\" src=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/herramientas-desarrolladores-chrome-escritorio.png\" alt=\"Depuraci\u00f3n Chrome Desktop\" class=\"wp-image-8998\" srcset=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/herramientas-desarrolladores-chrome-escritorio.png 700w, https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/herramientas-desarrolladores-chrome-escritorio-300x141.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption>Depuraci\u00f3n Chrome Desktop<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Aunque desde estas herramientas se puede hacer una depuraci\u00f3n de las vista m\u00f3vil de una p\u00e1gina, en ocasiones se requiere poder depurar la p\u00e1gina directamente en el dispositivo m\u00f3vil Android, con el fin de detectar y corregir alg\u00fan tipo de error. Por eso en este art\u00edculo, describiremos los pasos para hacer una depuraci\u00f3n de una web m\u00f3vil corriendo en Android, desde Google Chrome en un PC de escritorio.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"276\" height=\"600\" src=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/pagina-web-movil.jpeg\" alt=\"Depuraci\u00f3n Chrome Mobile\" class=\"wp-image-8999\" srcset=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/pagina-web-movil.jpeg 276w, https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/pagina-web-movil-138x300.jpeg 138w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><figcaption>Depuraci\u00f3n Chrome Mobile<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">1- Inicialmente se debe poner el dispositivos m\u00f3vil en modo desarrollador, permitiendo el debug por medio de cable USB.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2- Ahora se conecta el m\u00f3vil al PC. En este momento se debe aceptar la pregunta que realiza el dispositivo, para autorizar la depuraci\u00f3n por USB.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"276\" height=\"600\" src=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/depuracion-usb.jpeg\" alt=\"\" class=\"wp-image-9000\" srcset=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/depuracion-usb.jpeg 276w, https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/depuracion-usb-138x300.jpeg 138w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><figcaption>Aceptar Depuraci\u00f3n USB<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">3- Ahora en Chrome, ponemos la siguiente direcci\u00f3n en la barra de direcciones: &nbsp;<a href=\"chrome:\/\/inspect\/#devices\">chrome:\/\/inspect\/#devices<\/a><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"219\" src=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/herramientas-desarrolladores-chrome-movil.png\" alt=\"Depuraci\u00f3n de dispositivos remotos\" class=\"wp-image-9001\" srcset=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/herramientas-desarrolladores-chrome-movil.png 600w, https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/herramientas-desarrolladores-chrome-movil-300x110.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption>Depuraci\u00f3n de dispositivos remotos<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">4- Luego de unos segundos, en la parte de abajo debe detectar el equipo m\u00f3vil, y mostrar las p\u00e1ginas abiertas en el Chrome del dispositivo m\u00f3vil .<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"368\" src=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/dereccion-de-dispositivos-y-paginas-abiertas.png\" alt=\"Dispositivos y p\u00e1ginas abiertas en Chrome m\u00f3vil\" class=\"wp-image-9002\" srcset=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/dereccion-de-dispositivos-y-paginas-abiertas.png 700w, https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/dereccion-de-dispositivos-y-paginas-abiertas-300x158.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption>Dispositivos y p\u00e1ginas abiertas en Chrome m\u00f3vil<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Si no aparece ninguna informaci\u00f3n en Remote Target, se debe desconectar y volver a conectar el cable USB, hasta que aparezca en el m\u00f3vil la autorizaci\u00f3n para Debug por USB.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5- Ahora se escoge la p\u00e1gina que se va a depurar, y se selecciona la opci\u00f3n Inspect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6- Se abrir\u00e1 en el escritorio un popup con las herramientas de depuraci\u00f3n, pero esta vez reflejando el comportamiento de la p\u00e1gina abierta en el m\u00f3vil.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"408\" src=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/popup-inspect-chrome-mobile.png\" alt=\"Depuraci\u00f3n Chrome M\u00f3vil desde Chrome de Escritorio\" class=\"wp-image-9003\" srcset=\"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/popup-inspect-chrome-mobile.png 600w, https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/popup-inspect-chrome-mobile-300x204.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption>Depuraci\u00f3n Chrome M\u00f3vil desde Chrome de Escritorio<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Esta herramienta de depuraci\u00f3n m\u00f3vil de Chrome, es ideal cuando requerimos hacer seguimiento de una p\u00e1gina cuyo comportamiento no es el esperado en el dispositivo m\u00f3vil.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este art\u00edculo hace parte del sistema de divulgaci\u00f3n de conocimiento de <a href=\"https:\/\/itsoftware.com.co\/content\/desarrollo-de-software-bogota-colombia\/\"><strong>ITSoftware<\/strong><\/a>.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Si te gust\u00f3, por favor no olvides compartirlo en las redes sociales. \ud83d\ude09<\/h5>\n","protected":false},"excerpt":{"rendered":"<p>Desde la versi\u00f3n de escritorio para Chrome, contamos con herramientas para desarrolladores, desde donde es posible realizar un seguimiento completo, del comportamiento de una p\u00e1gina web, desde sus estilos, scripts,[&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":9003,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1070,92,1],"tags":[1567,1570,1568,1566],"class_list":["post-9013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-de-software","category-desarrollo-web","category-sin-categoria","tag-debug-mobile","tag-debug-web-mobile","tag-depuracion-movil","tag-depuracion-web"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/itsoftware.com.co\/content\/wp-content\/uploads\/2022\/01\/popup-inspect-chrome-mobile.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/posts\/9013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/comments?post=9013"}],"version-history":[{"count":0,"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/posts\/9013\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/media\/9003"}],"wp:attachment":[{"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/media?parent=9013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/categories?post=9013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itsoftware.com.co\/content\/wp-json\/wp\/v2\/tags?post=9013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}