If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Depurar páginas web con la consola del navegador

Aprende cómo depurar tus páginas web en Khan Academy usando console.log() y las Herramientas de Desarrollador de Chrome.

¿Quieres unirte a la conversación?

¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.

Transcripción del video

una de las habilidades más útiles que puedes tener como desarrollador web es la capacidad de depurar tus propias páginas web usando las herramientas disponibles como las herramientas del desarrollador que facilita el navegador en la actualidad cada navegador cuenta con herramientas del desarrollador así que en teoría deberías aprender cómo usarlas todas pero también es bueno saber cuál navegador tiene las herramientas más poderosas y empezar a depurar con ese navegador en este momento es chrome al menos para mí pero eso podría cambiar en el futuro ok entonces abramos las herramientas del desarrollador de chrome existen varias maneras en los que podemos hacer eso me gusta descubrir cuál es el atajo del teclado para mi navegador y el sistema operativo y usarlo porque es la forma más rápida así que en mac el atajo es comando opción y trans aquí tenemos nuestras herramientas del desarrollador otra manera de hacerlo es presionando el botón derecho y luego inspeccionar y eso abrirá las herramientas del desarrollador abrirá la consola de html así que tendrás que presionar sobre lo que quieres usar pero también es muy rápido y finalmente existe la forma larga la cual consiste en ir al menú ir a más herramientas y luego ir a herramientas del desarrollador y eso también abrirá las herramientas esta es una forma segura pero es más larga así que en realidad recomiendo que busques el atajo del teclado y que lo practiques una y otra vez hasta que lo recuerdes ok atajo del teclado para abrir genial entonces tenemos muchas herramientas aquí abajo pero hay una que es la que vamos a usar y esta que les voy a mostrar es la consola de javascript esta consola nos muestra todas las advertencias y errores relacionados con las solicitudes de http los archivos de css y de javascript además muestra cualquier cosa que desconectamos así que para demostrarlo usaré console punto log para desplegar un mensaje fíjense que está desplegando un montón de errores de sintaxis como con solís modify cndh eso es porque estoy escribiendo despacio en este entorno de tiempo real que constantemente evalúa el código nuevo así que me muestra todos los errores mientras tecleo eso es algo que debes considerar cuando estés usando la consola en khan academy con tus páginas web puedes ignorar todos estos mensajes que están aquí hasta que termines de teclear y ver en realidad cuál es el error o tal vez no hay error listo la consola me saludo muy lindo de su parte muy bien hay muchísimas cosas que puedes hacer con las herramientas del desarrollador de tu navegador definitivamente debes explorar las pero esto debería ser suficiente para ayudarte a hacer una depuración simple mientras avanzas en este curso