Última modificación: 12 de septiembre de 2025
‘https://cdn2.hubspot.net/hubfs/53/fatal%20error%20-%20CMS%20CLI.png’; 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.

​
Errores

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.

​
Error fatal

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. captura de pantalla de un error fatal - administrador de diseño captura de pantalla de un error fatal - CMS CLI Los errores fatales deben ser resueltos en orden para poder publicar los archivos.

​
Anuncios

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. advertencia - administrador de diseño Las advertencias nunca impedirán la publicación de archivos, sin embargo, se recomienda investigar las advertencias.

​
hsDebug=true

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é

​
Ver la salida de HubL

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á. Ver la salida de HubL

​
|pprint HubL filter

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. 
{{ local_dt }}
{{ local_dt|pprint }}
{{ local_dt|datetimeformat('%B %e, %Y') }}

​
Información del desarrollador

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. Menú de la rueda dentada de información para desarrolladores 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. Ejemplo de información para desarrolladores Los valores de estos datos se establecen a través de la pestaña Configuración del Editor de Contenidos: editor de contenido - configuración 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. 
<title>{{ page_meta.html_title }}</title>
<meta name="description" content="{{ page_meta.meta_description }}">
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.

​
Revisar el rendimiento del sitio web y los enlaces rotos

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.

​
Mejorar la velocidad del sitio web

Hay muchos factores que intervienen en la optimización y prueba de la velocidad del sitio web. Para obtener herramientas y consejos para optimizar la velocidad de tu sitio web, consulta nuestra guía.