Cualquier desarrollador web que se precie debe utilizar asiduamente algún tipo de herramienta que le ayude a depurar su implementación. Existen numerosas utilidades que facilitan esta tarea, como el componente Debug del framework Symfony (entorno de desarrollo PHP). No obstante, la realidad de quienes nos movemos bajo el paraguas del Marketing Digital es bien distinta. Por suerte, tenemos a nuestra disposición en todos los navegadores del mercado otro tipo de herramientas igualmente útiles. Se las conoce como DevTools (Herramientas para Desarrolladores). Aunque este caso vayamos a centrarnos en la propia de Chrome, cabe recalcar que todas son muy parecidas entre sí.
Componentes del Inspector del navegador
Para acceder a ella tenemos tres opciones: a través del menú superior derecho de Chrome seleccionando Más herramientas > Herramientas para desarrolladores, clicando con el botón secundario del ratón en la página web y escogiendo Inspeccionar o con la combinación de teclas Ctrl+Mayúsculas+I en Windows o Cmd+alt+I en Mac. A continuación, se abrirá automáticamente una ventana donde destacan los siguientes elementos:
- Elements selector. Permite examinar cualquier objeto presente en la página. Gracias a esta funcionalidad podemos clicar sobre un elemento y obtener una ingente cantidad de información (pestaña Elements). Funciona exactamente igual a la opción inspeccionar del botón derecho del ratón.
- Device mode. Adapta el navegador a diferentes tamaños de pantalla o tipos de dispositivos.
- Console. Muestra la información de diagnóstico que surge durante la carga de una página. Además, al contrario de lo que ocurre en GTM, nos da la oportunidad de probar cualquier función JS en vivo y en directo sin que afecte a la aplicación web publicada.
- Audits. Muestra algunas de las optimizaciones necesarias para mejorar nuestra página. La mayoría de ellas están relacionadas con estrategias y acciones sobre Posicionamiento en buscadores.
- Elements. Permite realizar modificaciones sobre el código HTML (panel izquierdo) y CSS (pestaña Styles en el panel derecho) de nuestra página. Al igual que sucede en Console, estos cambios se visualizan al instante. Existe también otra pestaña más denominada Event Listeners donde se muestran todos los eventos accionados, aunque seguramente no necesitaremos hacer uso de ella (casos excepcionales).
- Sources. Ámbito de depuración (resolución) del código JS. Posibilita además una estructura de navegación a través de cada uno de los archivos que componen un sitio web.
- Network. Especifica de manera cronológica y por cada tipo de elemento (JS, CSS, img, font, etc.) los recursos solicitados por una página. Para cada uno de estos archivos se muestra un gran número de datos como: protocolo, tamaño, estado, dominio, tipo, etc.
- Security. Enumera problemas de diferente índole como pueden ser los derivados de errores en el certificado de seguridad o la detección de contenido mixto, entre otros muchos.
- Application. Registra elementos tales como cookies, services workers, local storage u otros archivos relativos al almacenamiento en caché del navegador.
Para finalizar este artículo, es necesario que nos reafirmemos sobre la importancia de conocer y utilizar este tipo de herramientas. Hoy en día y no parece que esto vaya a cambiar, una de las deudas pendientes de muchos de los profesionales de Marketing Digital está precisamente relacionada con su baja cualificación técnica. Lógicamente, la culpa no es de ellos y ni mucho menos de la imparable aparición de nuevas tecnologías y metodologías. Quizás el mayor problema resida en la enseñanza. Actualmente, la gran mayoría de las carreras universitarias y de los grados profesionales de este ámbito no ofrecen materias que promuevan este tipo de inquietudes. Cualquier persona que se involucre en un entorno tecnológico (el Marketing Digital lo es, al menos, en parte) debe entender los beneficios asociados a la adquisición de determinados conocimientos técnicos. Se trata de sacar todo el jugo disponible a nuestro alcance y no quedarnos nunca atrás.