Recarga automática al depurar en Chrome

La recarga automática al depurar en Chrome permite modificar el código, volver a cargar la aplicación y comprobar los cambios sin reiniciar manualmente todo el flujo de trabajo. En un entorno local, herramientas como nodemon pueden detectar cambios en los archivos y reiniciar el servicio mientras Visual Studio Code permanece en modo de depuración.

En Chrome, las herramientas de desarrollo permiten detener la ejecución mediante puntos de interrupción, la declaración debugger o una pausa automática ante errores. Cuando la ejecución está detenida, puedes examinar variables, revisar la pila de llamadas, ejecutar comandos en la consola y continuar paso a paso hasta localizar el problema.

Qué significa recargar automáticamente durante la depuración

La recarga automática consiste en actualizar una aplicación o una pestaña cuando se modifica el código fuente, sin tener que detener y volver a iniciar manualmente el proceso. En proyectos locales, esta función resulta especialmente útil para probar cambios en servidores HTTP, complementos y aplicaciones JavaScript.

Puedes implementar, probar, depurar y volver a cargar automáticamente tu complemento de Google Workspace de forma local. Cuando guardas el archivo, nodemon vuelve a cargar automáticamente la aplicación con el código fuente actualizado y Visual Studio Code permanece en modo de depuración.

La aplicación ahora se está ejecutando y escuchando solicitudes HTTP en el puerto 9000. La aplicación ngrok también inicia una interfaz web en tu localhost. Puedes supervisar todas las actividades abriéndolo en un navegador.

Depuración de JavaScript con Chrome DevTools

Antes de escribir código más complejo, hablemos de debugging. Todos lo exploradores modernos y la mayoría de los otros ambientes soportan el “debugging” - una herramienta especial de UI para desarrolladores que nos permite encontrar y reparar errores más fácilmente.

Aquí utilizaremos Chrome porque es uno de los que mejores herramientas tienen en este aspecto. Tu version de Chrome posiblemente se vea distinta, pero sigue siendo obvio lo que hablamos aquí.

Abrir el panel Sources

Abre la pagina de ejemplo en Chrome. Activa las herramientas de desarrollo con F12 (Mac: Cmd+Opt+I). Selecciona el panel sources/recursos.

El botón botón de activación (toggle button) abre la pestaña con los archivos. Hagamos click allí y seleccionemos index.html y luego hello.js en el árbol de archivos.

Podemos ver tres zonas: La Zona de recursos lista los archivos HTML, JavaScript, CSS y otros, incluyendo imágenes que están incluidas en la página. Las extensiones de Chrome quizás también aparezcan aquí.

La Zona de Recursos muestra el código fuente de los archivos. La Zona de información y control es para “debugging”, la exploraremos pronto. Ahora puedes hacer click en el mismo botón de activación otra vez para esconder la lista de recursos y darnos más espacio.

Usar la consola

Si presionamos Esc, la consola se abrirá debajo. Podemos escribir los comandos y presionar Enter para ejecutar. Después de que se ejecuta una sentencia, el resultado se muestra debajo.

Por ejemplo, aquí 1+2 da el resultado 3, mientras que la llamada a función hello("debugger") no devuelve nada, entonces el resultado es undefined:

Para escribir algo en la consola, existe la función console.log. Por ejemplo, esto muestra los valores desde el 0 hasta el 4 en la consola:

// open console to see
for (let i = 0; i < 5; i++) {
console.log("value,", i);
}

Los usuarios regulares no ven este output, ya que está en la consola. Para verlo, debemos abrir la consola de desarrolladores y presionar la tecla Esc y en otro tab: se abrirá la consola debajo.

Si tenemos suficiente log en nuestro código, podemos entonces ver lo que va pasando en nuestro registro, sin el debugger.

Puntos de interrupción en Chrome

Examinemos qué pasa con el código de la página de ejemplo. En hello.js, haz click en el número de línea 4. Si, en el número 4, no en el código. ¡Felicidades! Ya configuraste un breakpoint.

Por favor haz click también en el número de la linea 8. Debería verse así (en donde está azul es donde deberías hacer click):

Un breakpoint es un punto de código donde el debugger pausará automáticamente la ejecución de JavaScript. Mientras se pausa el código, podemos examinar las variables actuales, ejecutar comandos en la consola, etc. En otras palabras, podemos depurar.

Administrar breakpoints

Siempre podemos encontrar una lista de los breakpoints en el panel derecho. Esto es muy útil cuando tenemos muchos breakpoints en varios archivos.

• Saltar rápidamente al breakpoint en el código (haciendo click en él dentro del panel).
• Desactivar temporalmente el breakpoint desmarcándolo.
• Eliminar el breakpoint haciendo click derecho y seleccionando quitar/eliminar/remove.
• …y mucho más.

Breakpoints condicionales

Click derecho en el número de línea nos permite crear un breakpoint condicional. Solo se disparará cuando la expresión dada, que debes proveer cuando la creas, sea verdadera.

Esto es útil cuando necesitamos detener la ejecución para un determinado valor de las variables o parámetros de función.

La declaración debugger

También podemos pausar el código utilizando el comando debugger, así:

function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- the debugger stops here
say(phrase);
}

Este comando solo funciona cuando el panel de herramientas de desarrollo está abierto, de otro modo el navegador lo ignora.

Pausar y examinar el estado del código

En nuestro ejemplo, hello() se llama durante la carga de la página, entonces la forma mas fácil de activar el debugger es recargando la página. Entonces presionemos F5 (en Windows ó Linux) ó Cmd+R (en Mac).

Como el breakpoint está definido, la ejecución se detiene en la línea 4. Por favor abre el desplegable de información de la derecha (etiquetado con flechas). Este nos permite examinar el estado del código actual:

Watch

Watch - muestra el valor actual de cualquier expresión. Puedes hacer click en el màs + e ingresar una expresión.

El debugger mostrará su valor, y se recalculará automáticamente en el proceso de ejecución.

Call Stack

Call Stack - muestra las llamadas anidadas en la cadena. En el momento actual el debugger está dentro de la función hello(), llamada por un script en index.html (no dentro de ninguna función, por lo que se llama “anonymous”).

Si haces click en un elemento de la pila (por ejemplo “anonymous”), el debugger saltará al código correspondiente, y todas sus variables también serán examinadas.

Scope

Scope - variables activas. Local muestra las variables de la función local. También puedes ver sus valores resaltados sobre el código fuente.

Global contiene las variables globales (fuera de cualquier función). También tenemos la palabra this la cual no estudiaremos ahora, pero pronto lo haremos.

Controlar la ejecución paso a paso

Ahora es tiempo de trazar el script. Hay botones para esto en le panel superior derecho.

Reanudar

“Reanudar”: continúa la ejecución, hotkey F8. Reanuda la ejecución.

Si no hay breakpoints adicionales, entonces la ejecución continúa y el debugger pierde el control. Esto es lo que podemos ver al hacer click:

La ejecución continuó, alcanzando el siguiente breakpoint dentro de say() y pausándose allí. Revisa el “Call stack” a la derecha. Ha incrementado su valor en una llamada. Ahora estamos dentro de say().

Siguiente paso

“Siguiente paso”: ejecuta el siguiente comando, hotkey F9. Ejecuta la siguiente sentencia.

Si la cliqueamos ahora, se mostrara alert. Otro clic volverá a ejecutar otro comando, y así uno por uno, a través de todo el script.

Saltar paso

“saltar paso”: corre al comando siguiente, pero no te metas en la función, hotkey F10.

Similar a “siguiente paso”, pero se comporta diferente si la siguiente sentencia es un llamado a función. Esto es: no una nativa como alert, sino una función nuestra.

El comando “siguiente” entra y pausa en la primera línea, en cambio “saltar” ejecuta la función anidada de forma invisible, no mostrando el interior de la función. La ejecución entonces se pausa inmediatamente despues de esa función.

Es útil si no estamos interesados en ver lo que pasa dentro de la función llamada.

Siguiente dentro

siguiente paso, hotkey F11. Similar a “siguiente”, pero se comporta diferente en las llamadas asincrónicas.

Si apenas comienzas en javaScript, puedes ignorar esto por ahora pues no tenemos llamados asincrónicos aún. Para el futuro, simplemente recuerda que “Siguiente” ignora las acciones asincrónicas tales como setTimeout (llamada a función programada), que se ejecutan después.

“Siguiente dentro” va al interior de su código, esperando por ellas si es necesario. Puedes ver el DevTools manual para más detalles.

Step out

“Step out”: continuar la ejecución hasta el final de la función actual, hotkey Shift+F11.

La ejecución se detendrá en la última línea de la función actual. Esto es útil cuando accidentalmente entramos en una llamada anidada usando que no nos interesa, y queremos continuar hasta el final tan rápido como se pueda.

Activar o desactivar breakpoints

activar/desactivar todos los breakpoints. Este botón no mueve la ejecución. Solo prende y apaga los breakpoints.

Pausa automática ante errores

activar/desactivar pausa automática en caso de error. Cuando está activo y la consola de developers tools esta abierta, un error de script automáticamente pausa la ejecución.

Entonces podemos analizar las variables para ver qué está mal. Y si nuestro script muere por un error, podemos abrir el debugger, activar esta opción y recargar la página para ver dónde muere y cuál es el contexto en ese momento.

Continuar hasta aquí

Click derecho en un una línea de código abre el menú contextual con una gran opción que dice “Continua hasta aquí”. Esto es útil cuando queremos movernos múltiples pasos adelante, pero somos muy flojos como para definir un breakpoint.

Recarga automática de una aplicación local

La recarga automática es especialmente práctica cuando el navegador accede a una aplicación que se ejecuta en localhost. En este flujo, el depurador detiene la solicitud, el desarrollador modifica el código y el proceso vuelve a cargarse conservando la configuración de depuración.

En esta sección, interactuarás con tu complemento de Google Workspace que se ejecuta en tu entorno local. La depuración de complementos de Google Workspace puede realizarse de muchas formas diferentes dependiendo de la arquitectura de tu app, sus funciones, cómo se implementa y tus preferencias.

En esta página, se explica cómo depurar un complemento de Google Workspace HTTP con ngrok, una plataforma de entrada unificada que puedes usar para probar entornos de desarrollo locales.

En esta guía, puedes probar cambios de código en un entorno local y solucionar problemas en un entorno remoto.

Requisitos para depurar con recarga automática

Node.js

• Las versiones más recientes de node y npm instaladas en tu entorno local
• La versión más reciente de nodemon instalada en tu entorno local.
• Un proyecto de Google Cloud.
• Es el código del complemento de Google Workspace que se depurará en tu entorno local.
• Un IDE configurado en tu entorno local que pueda depurar.
• Una cuenta de ngrok
• La versión más reciente de gcloud instalada y inicializada en tu entorno local.

Se usa para la recarga automática: npm install -g nodemon

Puedes seguir las secciones Requisitos previos y Configura el entorno de la Guía de inicio rápido. En esta guía, usamos las funciones de vínculos de vista previa del ejemplo de código 3p-resources del repositorio de GitHub googleworkspace/add-ons-samples con fines ilustrativos.

En esta guía, usamos el IDE de Visual Studio Code y sus funciones de depuración predeterminadas con fines ilustrativos.

Python

• La versión más reciente de python3 instalada en tu entorno local
• La versión más reciente de pip y virtualenv instaladas en tu entorno local
• Un proyecto de Google Cloud.
• Es el código del complemento de Google Workspace que se depurará en tu entorno local.
• Un IDE configurado en tu entorno local que pueda depurar.
• Una cuenta de ngrok
• La versión más reciente de gcloud instalada y inicializada en tu entorno local.

Se usan para administrar paquetes de Python y entornos virtuales, respectivamente.

Java

• La última versión estable de Java SE 11's JDK instalada en tu entorno local
• La versión más reciente de Apache Maven instalada en tu entorno local
• Un proyecto de Google Cloud.
• Es el código del complemento de Google Workspace que se depurará en tu entorno local.
• Un IDE configurado en tu entorno local que pueda depurar.
• Una cuenta de ngrok
• La versión más reciente de gcloud instalada y inicializada en tu entorno local.

Se usa para administrar proyectos de Java.

Hacer que localhost sea accesible desde Internet

Debes conectar tu entorno local a Internet para que el complemento de Google Workspace pueda acceder a él. La aplicación ngrok se usa para redireccionar las solicitudes HTTP realizadas a una URL pública a tu entorno local.

1. En un navegador de tu entorno local, accede a tu cuenta de ngrok.
2. Instala la aplicación y configura tu authtoken en tu entorno local.
3. Crea un dominio estático en tu cuenta de ngrok.

En las instrucciones de esta guía, se hace referencia a él como NGROK_STATIC_DOMAIN.

Crear e instalar la implementación

Configura el complemento de Google Workspace para que envíe todas sus solicitudes HTTP a tu dominio estático. Tu archivo de implementación debería verse de la siguiente manera:

{
"oauthScopes": [ " " ],
"addOns": {
"common": {
"name": "Manage support cases",
"logoUrl": " "
"layoutProperties": { "primaryColor": "#dd4b39" }
},
"docs": {
"linkPreviewTriggers": [
{
"runFunction": "NGROK_STATIC_DOMAIN",
"patterns": [
{ "hostPattern": "example.com", "pathPrefix": "support/cases" },
{ "hostPattern": "*.example.com", "pathPrefix": "cases" },
{ "hostPattern": "cases.example.com" }
],
"labelText": "Support case",
"localizedLabelText": { "es": "Caso de soporte" },
"logoUrl": " "
}
],
"createActionTriggers": [
{
"id": "createCase",
"labelText": "Create support case",
"localizedLabelText": { "es": "Crear caso de soporte" },
"runFunction": "$URL2",
"logoUrl": " "
}
]
},
"httpOptions": { "granularOauthPermissionSupport": "OPT_IN" }
}
}

Reemplaza NGROK_STATIC_DOMAIN por el dominio estático de tu cuenta de ngrok.

Configura el proyecto de Google Cloud que se usará:

gcloud config set project PROJECT_ID

Adquiere credenciales de usuario nuevas para utilizar las Credenciales predeterminadas de la aplicación:

gcloud auth application-default login

Reemplaza PROJECT_ID por el ID del proyecto del proyecto de Google Cloud de la app.

Crea la implementación:

gcloud workspace-add-ons deployments create manageSupportCases \
--deployment-file=DEPLOYMENT_FILE_PATH

Reemplaza DEPLOYMENT_FILE_PATH por la ruta de acceso a tu archivo de implementación.

Instala la implementación:

gcloud workspace-add-ons deployments install manageSupportCases

El complemento de Google Workspace envía todas sus solicitudes HTTP al dominio estático. El servicio público de "ngrok" actúa como un puente entre el complemento de Google Workspace y el código de la aplicación que se ejecuta de forma local.

Recarga automática con Node.js y nodemon

En el IDE de Visual Studio Code instalado en tu entorno local, haz lo siguiente:

1. En una ventana nueva, abre la carpeta add-ons-samples/node/3p-resources.
2. Configura la aplicación para la ejecución local y la depuración de recarga automática agregando una dependencia y dos secuencias de comandos en el archivo package.json.

{
"dependencies": {
"@google-cloud/functions-framework": "^3.3.0"
},
"scripts": {
"start": "npx functions-framework --target=createLinkPreview --port=9000",
"debug-watch": "nodemon --watch ./ --exec npm start"
}
}

Desde el directorio raíz, instala la aplicación:

npm install

Crea y configura un lanzamiento llamado Debug Watch que active el script debug-watch. Para ello, crea el archivo .vscode/launch.json en el directorio raíz:

{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Debug Watch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "debug-watch"]
}]
}

Agrega un punto de interrupción que detenga el procesamiento de la solicitud HTTP en el archivo index.js y comienza a ejecutar y depurar con la configuración Debug Watch agregada anteriormente.

La aplicación ahora se está ejecutando y escuchando solicitudes HTTP en el puerto 9000.

Inicia la aplicación ngrok en tu entorno local:

ngrok http --domain=NGROK_STATIC_DOMAIN 9000

Reemplaza NGROK_STATIC_DOMAIN por el dominio estático de tu cuenta de ngrok. Ahora todas las solicitudes se redireccionan a tu entorno local y al puerto que usa la aplicación.

Probar el cambio y repetir una solicitud

Para probar tu complemento de Google Workspace, obtén una vista previa de la URL de un caso en un documento de Google nuevo con una cuenta de verificador:

1. Crea un documento de Google.
2. Escribe el siguiente vínculo y presiona enter:
3. Haga clic en el vínculo.

En el Visual Studio Code de tu entorno local, puedes ver que la ejecución se detiene en el punto de interrupción que se estableció.

Cuando reanudas la ejecución desde el depurador de Visual Studio Code antes de que se agote el tiempo de espera de los complementos de Google Workspace, el complemento de Google Workspace muestra la vista previa del vínculo en el documento de Google desde la caché.

Puedes consultar los registros de solicitudes y respuestas HTTP desde la interfaz web alojada por la aplicación ngrok en tu entorno local.

Para cambiar el comportamiento de la aplicación, reemplaza Case por Case: en la línea 51 de index.js. Cuando guardas el archivo, nodemon vuelve a cargar automáticamente la aplicación con el código fuente actualizado y Visual Studio Code permanece en modo de depuración.

Esta vez, en lugar de hacer clic en el vínculo y esperar unos segundos en un nuevo documento de Google, puedes seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicación ngrok en tu entorno local y hacer clic en Replay.

Al igual que la última vez, tu complemento de Google Workspace no responde porque se está depurando de forma activa. Cuando reanudes la ejecución desde el depurador de Visual Studio Code, podrás ver en la interfaz web alojada por la aplicación de ngrok en tu entorno local que la aplicación genera una respuesta con la versión actualizada de la tarjeta de vista previa.

Recarga automática con Python

En el IDE de Visual Studio Code instalado en tu entorno local, haz lo siguiente:

1. En una ventana nueva, abre la carpeta add-ons-samples/python/3p-resources/create_link_preview.
2. Crea un entorno virtual para Python env y actívalo:

virtualenv env
source env/bin/activate

Instala todas las dependencias del proyecto con pip en el entorno virtual:

pip install -r requirements.txt

Crea el archivo .vscode/launch.json en el directorio raíz y configura un lanzamiento llamado Debug Watch que active la aplicación desde el módulo functions-framework en el puerto 9000 en modo de depuración en el entorno virtual env:

{
"version": "0.2.0",
"configurations": [{
"type": "python",
"request": "launch",
"name": "Debug Watch",
"python": "${workspaceFolder}/env/bin/python3",
"module": "functions_framework",
"args": [
"--target", "create_link_preview", "--port", "9000", "--debug"
]
}]
}

Agrega un punto de interrupción que detenga el procesamiento de la solicitud HTTP en el archivo main.py y comienza a ejecutar y depurar con la configuración Debug Watch agregada anteriormente.

La aplicación ahora se está ejecutando y escuchando solicitudes HTTP en el puerto 9000.

Inicia la aplicación ngrok en tu entorno local:

ngrok http --domain=NGROK_STATIC_DOMAIN 9000

Reemplaza NGROK_STATIC_DOMAIN por el dominio estático de tu cuenta de ngrok. Ahora todas las solicitudes se redireccionan a tu entorno local y al puerto que usa la aplicación.

La aplicación ngrok también inicia una interfaz web en tu localhost. Supervisa todas las actividades abriéndolo en un navegador.

Para probar tu complemento de Google Workspace, obtén una vista previa de la URL de un caso en un documento de Google nuevo con una cuenta de verificador:

1. Crea un documento de Google.
2. Escribe el siguiente vínculo y presiona enter:
3. Haga clic en el vínculo.

En el Visual Studio Code de tu entorno local, puedes ver que la ejecución se detiene en el punto de interrupción que se estableció.

Cuando reanudas la ejecución desde el depurador de Visual Studio Code antes de que se agote el tiempo de espera de los complementos de Google Workspace, el complemento de Google Workspace muestra la vista previa del vínculo en el documento de Google desde la caché.

Puedes consultar los registros de solicitudes y respuestas HTTP desde la interfaz web alojada por la aplicación ngrok en tu entorno local.

Para cambiar el comportamiento de la aplicación, reemplaza Case por Case: en la línea 56 del archivo main.py. Cuando guardas el archivo, Visual Studio Code vuelve a cargar automáticamente la aplicación con el código fuente actualizado y permanece en el modo de depuración.

Esta vez, en lugar de hacer clic en el vínculo y esperar unos segundos en un nuevo documento de Google, puedes seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicación ngrok en tu entorno local y hacer clic en Replay.

Al igual que la última vez, tu complemento de Google Workspace no responde porque se está depurando de forma activa. Cuando reanudes la ejecución desde el depurador de Visual Studio Code, podrás ver en la interfaz web alojada por la aplicación de ngrok en tu entorno local que la aplicación genera una respuesta con la versión actualizada de la tarjeta de vista previa.

Recarga automática y depuración remota con Java

En el IDE de Visual Studio Code instalado en tu entorno local, haz lo siguiente:

1. En una ventana nueva, abre la carpeta add-ons-samples/java/3p-resources.
2. Configura el proyecto de Maven para ejecutar la aplicación CreateLinkPreview en el puerto 9000 de forma local.

Para ello, agrega el complemento de compilación de Cloud Functions Framework function-maven-plugin al archivo pom.xml:

<plugin>
<groupId>com.google.cloud.functions</groupId>
<artifactId>function-maven-plugin</artifactId>
<version>0.11.0</version>
<configuration>
<functionTarget>CreateLinkPreview</functionTarget>
<port>9000</port>
</configuration>
</plugin>

Ahora puedes iniciarlo de forma local en modo de depuración:

mvnDebug function:run
Preparing to execute Maven in debug mode
Listening for transport dt_socket at address: 8000

Crea el archivo .vscode/launch.json en el directorio raíz y configura un inicio llamado Remote Debug Watch que se adjunte a la aplicación que se inició anteriormente en el puerto 8000:

Recarga automática de páginas en Chrome

Recarga automática Chrome se refiere a la capacidad de actualizar automáticamente las pestañas del navegador a intervalos establecidos sin acción manual. En lugar de presionar el botón Actualizar repetidamente, una extensión de recarga automática de Chrome vuelve a cargar la página según el momento elegido.

Esta funcionalidad es especialmente útil para páginas que se actualizan con frecuencia, como paneles, resultados en vivo, disponibilidad de boletos o paneles de administración. Al usar la recarga automática, los usuarios de Chrome ahorran tiempo y reducen las tareas repetitivas.

Características relevantes

• Intervalos de tiempo personalizados (segundos, minutos, horas)
• Control específico de pestañas (solo recargar pestañas seleccionadas)
• Opciones de pausa y reanudación
• Condiciones de recarga inteligente (recargas basadas en palabras clave opcionales)
• Rendimiento ligero con uso mínimo de CPU

La actualización automática mejora la precisión, ahorra tiempo y reduce la carga mental causada por acciones repetitivas.

Casos de uso

• Paneles de monitoreo: análisis, estado del servidor o paneles de pedidos
• Stock & Crypto Tracking: actualizaciones de precios en vivo sin actualización manual
• Reserva de entradas o citas: recarga automática hasta que aparezca la disponibilidad
• Moderación de contenido: mantenga las páginas de administración actualizadas
• Exámenes o resultados en línea: Actualizar automáticamente las páginas de resultados

En todos estos casos, Chrome Auto Reload ayuda a los usuarios a mantenerse actualizados sin esfuerzo.

Actualizar una pestaña manualmente o de forma automática

Característica	Actualización manual	Recarga automática Chrome
Esfuerzo	Elevado	Mínimo
Precisión	depende del usuario	Consistente
Productividad	interrumpido	Continuo
Vigilancia	Ineficiente	automatizado

Esta comparación muestra claramente por qué Chrome Auto Reload es una opción más inteligente para los usuarios que valoran la eficiencia y la fiabilidad en la navegación diaria.

Cómo evitar una recarga automática provocada por meta refresh

La etiqueta meta http-equiv="refresh" puede hacer que una página se recargue automáticamente. En Chrome no se puede evitar esa recarga automática (sí hay maneras de hacerlo en Firefox -de forma nativa y con extensiones- y hasta en Internet Explorer).

Tampoco encontré ninguna extensión de Chrome que lo hiciese, por lo que me puse manos a la obra. Nunca había programado una extensión, pero al poco tiempo me di cuenta de por qué no había otras, una vez que el navegador «leyó» la etiqueta, no hay forma de eliminar el refresco, ni siquiera eliminando o cambiándola en el DOM del documento.

Chrome and Chromium don’t allow to disable the refresh meta tag, nor they provide with an easy method for cancelling it. The extension uses a http trick.

Interceptar la solicitud de actualización

Después de darle vueltas, y estudiar más el API de Chrome, encontré un truco: Al cargar cada página y frame, analizar los meta, y enviar un mensaje al JS principal (temas de seguridad) para que almacene los URLs y la hora en que se produciría la recarga de cada frame, en cada pestaña.

Interceptar todas las conexiones de la ventana principal y los frames, verificar el URL contra los almacenados para esa pestaña, si la hora coincide, detener la conexión.

Al implementarlo, encontré que al solución era peor que la enfermedad, Chrome hacía desaparecer el contenido de la página, y mostraba un mensae de error que acojonaba: No encontré la forma de evitar ese error, y me dí cuenta por qué no encontré ninguna extensión [todavía].

Usar una respuesta HTTP 204

Cuando estuaba a punto de abandonarlo, se me ocurrió pensar que quizás haya una cabecera de estado HTTP (como los «404» de «no encontrado) que hiciese que el navegador no cambie el contenido de lo que ya tiene. Encontré que el 204 sonaba bastante a lo que quería.

Intenté inyectar desde javascript esta cabecera, pero no había manera. La única forma era incluir un pequeño servidor web (en código nativo, para que no haya requerimientos adicionales de Python, o similar) y redireccionarlo hacia allí.

La solución fue implementar un pequeño script en PHP en los servidores de Menéame (« Google App Engine (stopautorefresh.appspot.com/stop) que sólo devuelven las cabeceras mínimas necesarias:

header("HTTP/1.0 204 No content");
header("Content-Length: 0");
header("Connection: close");

La nueva versión en App Engine:

self.response.headers['Content-Length'] = 0
self.response.headers['Connection'] = "close"
self.error(204)

Et vóilà, funciona. Como la conexión es en segundo plano, y sólo se dispara al interceptar el auto refresco (y sólo la primera vez), el usuario no notará nada.

When the [unavoidable] refresh is fired, it intercepts it, checks if it’s the refresh event, if so, it redirects the connection to a small script (in meneame.net). This script just returns a 204 http status code, so the browser does not modify the content of the page, and doesn’t try to refresh it again.

Recarga automática y depuración: diferencias prácticas

La recarga automática de una página actualiza el contenido visible de una pestaña según un intervalo establecido. La recarga automática de una aplicación local reinicia el proceso del servidor cuando cambia el código fuente.

Durante la depuración, la ejecución puede permanecer detenida en un punto de interrupción. Al igual que la última vez, tu complemento de Google Workspace no responde porque se está depurando de forma activa.

Cuando reanudas la ejecución desde el depurador de Visual Studio Code, podrás ver en la interfaz web alojada por la aplicación de ngrok en tu entorno local que la aplicación genera una respuesta con la versión actualizada de la tarjeta de vista previa.

Formas principales de pausar un script

• Un breakpoint.
• La declaración debugger.
• Un error (Si la consola esta abierta y el botón esta “activo”).

Cuando se pausa, podemos hacer “debug”: examinar variables y rastrear el código para ver dónde la ejecución funciona mal.

Hay muchas más opciones en la consola de desarrollo que las que se cubren aquí. El manual completo lo conseguimos en La información de este capítulo es suficiente para debuggear, pero luego, especialmente si hacemos muchas cosas con el explorador, por favor revisa las capacidades avanzadas de la consola de desarrolladores.

Ah, y también puedes hacer click en todos lados en la consola a ver qué pasa. Esta es probablemente la ruta más rápida para aprender a usar la consola de desarrolladores. ¡Tampoco olvides el click derecho!

tags: #recarga #automatica #cuando #depurar #en #chrome

Publicaciones populares:

• Consejos rápidos para limpiar filtros de piscina, aire acondicionado y campana
• Guía para limpiar el filtro de partículas de tu Ford Mondeo
• Face ID con mascarilla no funciona: por qué falla y cómo arreglarlo
• HiKiNS: sistema de ósmosis inversa y sus rasgos clave
• Cómo seleccionar un filtro bajo fregadero para tu cocina