No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
18H
8M
29S

Debugging

12/13
Recursos

Debugging es el t茅rmino para solucionar bugs. Los bugs (鈥渂ichos鈥 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 鈥淚nspeccionar鈥 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.

Herramientas de desarrollador de Chrome

En el panel de informaci贸n, existe un apartado 鈥淪cope鈥 que muestra el *scope/ de cada variable correspondiente al punto donde la ejecuci贸n se detuvo.

Secci贸n de Scope de las DevTools de Chrome

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.

Breakpoints en un c贸digo JavaScript

Closures en debugging

Si el c贸digo tiene closures, aparecer谩n en el panel 鈥淪cope鈥.
scope_closure05.PNG

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:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

les comparto un recurso de como realizar debugging desde visual stuio code.
https://www.youtube.com/watch?v=YpFR8Q2lVDU&t=10s

鈥-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(鈥減ass鈥)

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:
鈥楽i se帽oor, si se帽or!鈥 馃槮
jajaja