Editando JavaScript al vuelo sin recargar la página • JnjSite.com

JavaScript, editando el código al vuelo sin recargar la página..

Ya estoy por aquí de nuevo, compartiendo un howto o truco para programar con JavaScript al vuelo, sin recargar la página. A fecha en que escribo este post, sólo he encontrado esta funcionalidad en uno de los navegadores más usados. Estoy hablando de Google Chrome, que te permite editar al vuelo el JavaScript, en el inspector de código fuente.

El poder editar los códigos fuentes sin recargar la página es algo habitual entre los navegadores, pero no con JavaScript. Normalmente los navegadores te permiten editar los fuentes HTML y CSS. Pero Google Chrome ha llevado a otro nivel esta funcionalidad, permitiendo además el editar el código JavaScript, de cualquier página web, al vuelo y sin recargar la misma web para aplicar los cambios.

Utilidad de esta funcionalidad

Al principio da igual, porque mientras que vamos construyendo una página web, recargamos la página completa para verificar que lo nuevo en JavaScript funciona.

Pero cuanto mayor se hace un programa JavaScript, igual nos interesa construir en una función concreta, que se usa en una parte del programa, después de haber realizado 4-5 pasos. Si para cada nueva edición del paso 6 que estamos construyendo, tenemos que recargar la página, ejecutar los pasos 1-2-3-4-5 y entonces probamos el nuevo paso 6.. esto lo hace aburrido cuando llegamos a programas muy grandes.

Podemos entonces construir en el navegador el JavaScript y probar directamente el paso 6, saltándonos todos los pasos anteriores.

Caso de uso, editando la funcionalidad de un botón

Imaginemos entonces que estamos en un programa JavaScript en esta web:

<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <button onclick="loadDataIntoObject()">Load data</button>
    <button onclick="testFunction()">Test the function</button>
    <script src="./app-test.js"></script>
</body>

</html>

Ahora estamos haciendo esos pasos 1-2-3-4-5, simulados con la función loadDataIntoObject(). Y ahora queremos construir la función testFunction() sin recargar el resto de la información. En el fichero app-test.js tenemos:

'use strict';

let anObject = new Object();

function loadDataIntoObject() {
    for (var i = 0; i < 100; i++) {
        anObject['variable' + i] = i;
    }
}

function testFunction() {
    let stringVar = '';

    for (var i = 0; i < 100; i++) {
        stringVar += anObject['variable' + i] + ', ';
    }

    console.log('This is a test: ' + stringVar);
}

Ya podemos entonces editar la función y darle al botón para probar testFunction() mientras que construimos sin tener que hacer todos los pasos previos. Como en la imagen siguiente: