les comparto un recurso de como realizar debugging desde visual stuio code.
https://www.youtube.com/watch?v=YpFR8Q2lVDU&t=10s
Bienvenida
Bienvenida al Curso de Closures y Scope
Tipos de scope en JavaScript
Global Scope
Function Scope
Block Scope
Reasignación y redeclaración
Strict Mode
Closure
¿Qué es un Closure?
Playground: Crea un Closure para Sumar
Practicando Closures
Playground: Closure para Almacenar Datos de Mascotas
Hoisting
¿Qué es el Hoisting?
Debugging
Debugging
Cierre
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.
Antes: $249
$219/año
Paga en 4 cuotas sin intereses
Termina en:
1D
18H
8M
29S
Debugging
12/13Recursos
Debugging es el término para solucionar bugs. Los bugs (“bichos” en inglés) son errores en la aplicación, saber cómo solucionarlos de manera eficiente es clave para tu desarrollo como profesional.
Todo navegador dispone de Dev tools o herramientas de desarrollador, que es un conjunto de características del código de la página web, una de estas es el debugging.
La consola del navegador es importante para ver qué está pasando con el código generado. La consola se muestra con la combinación de teclas F12 / Ctrl + Shift + I / Cmd+Opt+I o clic derecho e “Inspeccionar” en tu navegador preferido (de preferencia Google Chrome).
Código de ejemplo
El código de ejemplo que se usará en las Dev Tools será el siguiente:
var a = "Hello global"
function hello() {
let b = "Hello function"
if(true) {
let c = "Hello block"
}
}
hello()
Palabra reservada debugger
La palabra reservada debugger sirve para detener la ejecución del programa, pero solo funciona si el panel de las herramientas de desarrollo está abierto. Este panel te mostrará información sobre el código hasta la línea del debugger.
Ejecuta el código de prueba que contenga la palabra reservada debugger en la consola de tu navegador, puedes hacerlo en una página en blanco tan solo poniendo about:blank como una URL.
var a = "Hello global"
function hello() {
let b = "Hello function"
if(true) {
let c = "Hello block"
debugger // <---- Palabra reservada para debbuging
}
}
hello()
Al momento de ejecutar el código te aparecerá el panel de debugging.
En el panel de información, existe un apartado “Scope” que muestra el *scope/ de cada variable correspondiente al punto donde la ejecución se detuvo.
Breakpoints
Los breakpoints son puntos donde la ejecución del programa se parará. Para activarlos se debe dar clic en la línea de código que se desea parar.
Closures en debugging
Si el código tiene closures, aparecerán en el panel “Scope”.
Para concluir, deberías aprender a utilizar las herramientas de desarrollo web para ser más eficiente, y de esta forma encontrar de manera eficiente la causa de un error o un comportamiento no deseado que provocaría un bug.
Contribución creada por Andrés Guano.
Aportes 17
Preguntas 1
Ordenar por:
“-utilizas para todo console log?”
yo: jaja si soy
Curso de Debugging con Chrome DevTools de Platzi: https://platzi.com/cursos/devtools/
una extensión de VSCode muy conocida, pero a alguien le puede servir: Error Lens.
Existe un curso de debug que da el profe degranda ❤️
debugger
The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.
Examples
Using the debugger statement
The following example shows code where a debugger statement has been inserted, to invoke a debugger (if one exists) when the function is called.
function potentiallyBuggyCode() {
debugger;
// do potentially buggy stuff to examine, step through, etc.
}
When the debugger is invoked, execution is paused at the debugger statement. It is like a breakpoint in the script source.
Por si ocupan hice un micro-post acerca de este tema: https://dev.to/ulisesserranop/debugger-vs-consolelog-1jme
Dev Tools
para mi ha sido suficiente por ahora con debugger;
:000000
Yo nunca me equivoco 🗿
okno xd
De (depurar) bug (error) ing (ando)
Estaria brutal que trajeran un curso de debuggear pero con las herramientas que nos brinda VsCode,.
Esto me ahorrara muchos console.log(“pass”)
Código de la clase:
var a = 'Hello';
function hello(){
let b = 'Hello World';
const c = 'Hello World!';
debugger;
}
hello();
Yo en las preguntas del inicio:
‘Si señoor, si señor!’ 😦
jajaja
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.