Editar JavaScript en el navegador
Puede editar y guardar cambios en los archivos de código fuente de JavaScript utilizando navegadores. Por lo general, los desarrolladores necesitan depurar el código en tiempo de ejecución. Con la ayuda de las herramientas de desarrollo del navegador, podemos editar fácilmente nuestros archivos almacenados locales y depurar nuestro código.
Este artículo analizará la función de las herramientas para desarrolladores en navegadores populares como Google Chrome y Mozilla Firefox y cómo usar esa función para editar nuestros archivos JavaScript.
Editar JavaScript en Google Chrome
Google Chrome proporciona la forma más eficiente y excelente de realizar cambios en el código JavaScript. También podemos asociar una carpeta con el espacio de trabajo de la herramienta para desarrolladores de Google Chrome.
Realizamos algunos pasos para usar esta función. Obtenga una mejor comprensión de las herramientas para desarrolladores siguiendo los pasos a continuación.
-
Herramientas de desarrollo de lanzamiento
Cargue el archivo JavaScript local/servidor en Google Chrome. Vaya a
menú>>más herramientasdonde verá la opción Herramientas de desarrollador o presione la tecla de acceso directo (F12) para abrir las herramientas de desarrollador. -
Pestaña Fuente
Navegue por la pestaña de origen y examine el explorador de archivos para determinar qué archivo estamos buscando para realizar cambios. Podemos editar y hacer cambios en nuestro archivo, pero perdemos todos los cambios si actualizamos o recargamos nuestra página.
Si está preocupado, no hay problema, ya que podemos guardar nuestros cambios en los siguientes pasos.
-
Asociación de carpetas con el espacio de trabajo
Agregue una carpeta al espacio de trabajo haciendo clic en la pestaña Sistema de archivos, Google Chrome le pedirá confirmación y debemos permitir el permiso de acceso. Con un solo clic, podemos abrir archivos de nuestro sistema desde el explorador.
-
Editar y Guardar
Finalmente, ahora podemos editar nuestro código y guardar los cambios presionando las teclas CTRL + S, luego actualice el navegador.
Editar JavaScript en Mozilla Firefox
Mozilla Firefox nos proporciona otros complementos para editar el JavaScript dentro del navegador para lograr la misma funcionalidad.
Examinaremos cómo funciones como Firebug pueden depurar código JavaScript en unos pocos pasos. También podemos ver los errores de sintaxis resaltados.
-
Instalar el complemento Firebug
Primero, necesitamos instalar el complemento Firebug desde los temas adicionales dentro del menú. Desde el menú, navegue hasta el complemento y busque por nombre ‘Firebug’ e instálelo.
-
Crear y abrir página para editar
Podemos escribir nuestro código JavaScript en Word Pad, Notepad, etc.
Necesitamos cargar nuestra página HTML creada y abrir la consola de Firebug para crear un archivo HTML. Luego navegue a la pestaña del script para ver el código JavaScript de la fuente de esa página.
-
Depuración de puntos de interrupción
Para terminar la ejecución del código, podemos usar breakpoint; también podemos especificar el alcance del código para visualizar los errores. Esto es muy útil para la depuración.
-
Actualizar variables modificadas
Podemos hacer clic en el botón Pasar por encima; Firebug actualiza todas las variables hasta que terminamos la ejecución del punto de interrupción. Mire los valores que muestra la consola Firebug en Watch Window.
-
Ver/Cargar cambios
Finalmente, vuelva a cargar la página para ver los cambios del archivo y presione la tecla de atajo CTRL + R.