Errores y depuración
Depurar el código y entender dónde y cómo ver los errores es una parte importante del desarrollo en el CMS de HubSpot. Hay una serie de herramientas que puedes utilizar para aumentar la eficiencia en la construcción y depuración y para asegurarte de que tu sitio web está optimizado a medida que continúas construyéndolo.
El sistema de archivos para desarrolladores del CMS de HubSpot tiene muchas formas de validación para asegurar que tus plantillas y módulos se muestren correctamente en las páginas.
Los errores fatales son errores que impedirían que una página se renderizara con éxito. Para asegurar que el contenido en vivo se represente correctamente, el CMS de HubSpot impide la publicación de plantillas que tengan errores fatales. Un ejemplo de error fatal sería la falta de variables HubL requeridas, como standard_header_includes. Esto causará errores cuando se desarrolle en el Administrador de diseño o cuando se carguen archivos a través de la CLI del CMS. La extensión de VS code soporta HubL linting, y puede mostrar los errores fatales en contexto antes de cargar el archivo.
Los errores fatales deben ser resueltos en orden para poder publicar los archivos.
Las advertencias son errores o problemas que no impiden la publicación de los archivos. Las advertencias suelen ser sugerencias de sintaxis o problemas potenciales que un desarrollador podría pasar por alto. La extensión de VS code soporta HubL linting, y puede mostrar las advertencias en contexto antes de cargar el archivo. Por ejemplo, si intentas incluir un archivo que no existe, se lanza una advertencia para alertar al desarrollador.
Las advertencias nunca impedirán la publicación de archivos, sin embargo, se recomienda investigar las advertencias.
El CMS de HubSpot realiza una serie de optimizaciones en tu sitio web de forma automática. Para obtener más información sobre ellos, consulta CDN, seguridad y rendimiento. Algunas veces, la depuración de problemas con estas optimizaciones en un sitio web en vivo puede ser difícil. Si cargas una página de HubSpot en vivo con la cadena de consulta ?hsDebug=true, la página se renderizará:
- Con archivos no minificados
- Con archivos CSS no combinados (archivos CSS individuales servidos)
- Sin servir archivos en caché
Dentro del Administrador de diseño, los archivos codificados tienen un botón "Mostrar salida" que abre un segundo panel del editor de código, con un código transpilado del archivo que se está viendo. Esto es útil para ver cómo su código HubL es transpilado en CSS, HTML o JavaScript, en lugar de recargar las páginas en vivo en las que se incluye el archivo. También es una herramienta útil para usar cuando se exploran nuevas características de HubL, o se aprenden los aspectos básicos de HubL, ya que puedes ver fácilmente lo que la entrada de HubL producirá.
El filtro |pprint HubL se puede utilizar en las variables HubL para imprimir información valiosa de depuración. Imprimirá el tipo de variable HubL, que puede ser útil para entender con qué expresiones, filtros, operadores o funciones se puede utilizar.
Por ejemplo, {{ local_dt }} imprimirá el 21 de febrero de 2020 a las 12:52:20. Si imprimimos bien esta variable, podemos ver que el valor es una fecha (PyishDate: 2020-02-21 12:52:20). Esto significa que podemos utilizar filtros HubL que operan o formatean objetos de fecha, como el filtro HubL |datetimeformat.
La información para desarrolladores de una página es el contexto de todos los datos disponibles cuando se está renderizando una página. Todo este contexto de renderizado es accesible a través de HubL. Para acceder a la información del desarrollador de una página, selecciona el icono de la rueda dentada de HubSpot en la esquina superior derecha de las páginas en vivo > Información del desarrollador.
Esto abrirá una nueva pestaña que devolverá el contexto de renderización de una página determinada en forma de JSON. Se recomienda tener un formateador JSON instalado en el navegador para facilitar la lectura de la información del desarrollador, como esta extensión de Chrome del formateador JSON. Aunque gran parte de la información contenida en el contexto de la página es para propósitos internos, esta herramienta puede ser valiosa para ver qué datos están disponibles a través de HubL cuando se planifica.
Por ejemplo, la siguiente imagen es de la información del desarrollador para https://desigers.hubspot.com/docs/developer-reference/cdn.
Los valores de estos datos se establecen a través de la pestaña Configuración del Editor de Contenidos:
Los valores son entonces accesibles para renderizar en las páginas a través de HubL. Para imprimir el título y la metadescripción en una plantilla base, se utilizaría el siguiente HubL.
Los datos del contexto de renderización están disponibles a través de HubL, y el árbol JSON se puede recorrer utilizando la notación de puntos. Los datos de la información para desarrolladores que se imprimen con frecuencia incluyen los valores de los campos del módulo y las etiquetas que se han exportado al contexto de la plantilla.
Es importante verificar que los visitantes de tu sitio no vayan a enlaces rotos. Hay dos herramientas que puedes utilizar para asegurarte de que los visitantes de tu sitio web llegan al lugar correcto. Puedes utilizar la API de rendimiento del sitio web para obtener los estados HTTP como los 404 y ver el tiempo de actividad de tus sitios.
Si ves errores 404 es una buena idea redirigir al visitante a una URL relevante.
También puedes utilizar la Herramienta de recomendaciones SEO para identificar los enlaces rotos dentro del contenido de tu página y arreglarlos rápidamente.
Gracias por tus comentarios, son muy importantes para nosotros.