El código es propenso a errores. Es muy probable que cometas errores… Oh, ¿de qué estoy hablando? Definitivamente vas a cometer errores, al menos si eres un humano, no un robot.
Pero en el navegador, los usuarios no ven errores de forma predeterminada. Entonces, si algo sale mal en el guión, no veremos qué está roto y no podremos arreglarlo.
Para ver errores y obtener mucha otra información útil sobre los scripts, se han integrado "herramientas de desarrollo" en los navegadores.
La mayoría de los desarrolladores se inclinan por Chrome o Firefox para el desarrollo porque esos navegadores tienen las mejores herramientas para desarrolladores. Otros navegadores también proporcionan herramientas para desarrolladores, a veces con características especiales, pero por lo general están tratando de “ponerse al día” con Chrome o Firefox. Por lo tanto, la mayoría de los desarrolladores tienen un navegador "favorito" y cambian a otros si un problema es específico del navegador.
Las herramientas de desarrollo son potentes; tienen muchas características. Para comenzar, aprenderemos cómo abrirlos, observar errores y ejecutar comandos de JavaScript.
Abra la página bug.html.
Hay un error en el código JavaScript. Está oculto a los ojos de un visitante habitual, así que abramos las herramientas de desarrollo para verlo.
Presione F12 o, si está en Mac, luego Cmd + Opt + J.
Las herramientas de desarrollador se abrirán en la pestaña Consola de forma predeterminada.
Se parece algo a esto:
El aspecto exacto de las herramientas para desarrolladores depende de su versión de Chrome. Cambia de vez en cuando pero debería ser similar.
Aquí podemos ver el mensaje de error de color rojo. En este caso, el script contiene un comando "lalala" desconocido.
A la derecha, hay un enlace en el que se puede hacer clic a la fuente bug.html:12 con el número de línea donde se produjo el error.
Debajo del mensaje de error, hay un símbolo > azul. Marca una "línea de comando" donde podemos escribir comandos de JavaScript. Presione Enter para ejecutarlos.
Ahora podemos ver errores, y eso es suficiente para empezar. Volveremos a las herramientas de desarrollador más adelante y cubriremos la depuración con más profundidad en el capítulo Depuración en el navegador.
Entrada multilínea
Por lo general, cuando colocamos una línea de código en la consola y luego presionamos Enter , se ejecuta.
Para insertar varias líneas, presione Shift + Enter . De esta manera se pueden ingresar largos fragmentos de código JavaScript.
La mayoría de los demás navegadores utilizan F12 para abrir herramientas de desarrollo.
La apariencia de ellos es bastante similar. Una vez que sepa cómo utilizar una de estas herramientas (puede comenzar con Chrome), podrá cambiar fácilmente a otra.
Safari (navegador de Mac, no compatible con Windows/Linux) es un poco especial aquí. Primero debemos habilitar el “menú Desarrollar”.
Abra Preferencias y vaya al panel "Avanzado". Hay una casilla de verificación en la parte inferior:
Ahora Cmd + Opt + C puede alternar la consola. Además, tenga en cuenta que ha aparecido un nuevo elemento del menú superior llamado "Desarrollar". Tiene muchos comandos y opciones.
Las herramientas de desarrollo nos permiten ver errores, ejecutar comandos, examinar variables y mucho más.
Se pueden abrir con F12 para la mayoría de los navegadores de Windows. Chrome para Mac necesita Cmd + Opt + J , Safari: Cmd + Opt + C (primero es necesario habilitarlo).
Ahora tenemos el entorno preparado. En la siguiente sección, nos ocuparemos de JavaScript.