Skip to content

Update markdown syntax in debugging chapter Closes #308 #315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 2, 2025
Merged

Update markdown syntax in debugging chapter Closes #308 #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions en/miscellaneous/debugging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ chapter: 19
pageNumber: 122
description: In programming, errors can occur while writing code. It could be due to syntactical or logical errors. The process of finding errors can be time-consuming and tricky and is called code debugging.
---

# Debugging

In programming, errors can occur while writing code. It could be due to syntactical or logical errors. **Code debugging** is the process of identifying, isolating, and fixing errors, which can be time-consuming and tricky.
Expand All @@ -11,18 +12,19 @@ Fortunately, most modern browsers come with built-in debuggers. These debuggers

## The console.log() Technique

One of the simplest and most widely used debugging methods is using the `console.log()` function. It helps you track the flow of your code and inspect the values of variables at specific points in execution.
One of the simplest and most widely used debugging methods is using the `console.log()` function. It helps you track the flow of your code and inspect the values of variables at specific points in execution.

```javascript
function calculateTotal(price, taxRate) {
const tax = price * taxRate;
console.log('Tax calculated:', tax); // Output for inspection
console.log("Tax calculated:", tax); // Output for inspection
const total = price + tax;
return total;
}

calculateTotal(100, 0.2);
```

Use `console.log()` to:

- Check if a function is being called.
Expand All @@ -42,6 +44,7 @@ A breakpoint is a spot in your code where execution will pause, allowing you to
Modern browsers offer developer tools with debugging capabilities.

### How to Set Breakpoints

1. Open the Sources panel in DevTools.
2. Navigate to your script file.
3. Click on the line number where you want execution to pause.
Expand All @@ -52,9 +55,10 @@ Once paused, you can:
- **Step into** – dive into a function call.
- **Step out** – exit the current function.
- **Resume** – continue execution until the next breakpoint.
Breakpoints are non-intrusive and can be added/removed without changing your code.
Breakpoints are non-intrusive and can be added/removed without changing your code.

## Browser Developer Tools

Modern browsers come equipped with powerful developer tools that aid in debugging JavaScript, inspecting HTML and CSS, and monitoring network requests. Here's a brief overview of some essential tools:

**Chrome DevTools:** Google Chrome's developer tools offer a wide range of features for debugging web applications.
Expand All @@ -71,6 +75,7 @@ Browsers provide a set of developer tools that allow you to inspect HTML, CSS, a
We can access them by right-clicking on a web page and selecting "Inspect" or by pressing `F12` or `Ctrl+Shift+I`/ `Cmd + Option + I` (Mac).

### Key Panels in Developer Tools

- **Console:** Displays logs, errors, and allows executing JS in real time.
- **Elements / Inspector:** Lets you browse and edit the HTML and CSS.
- **Sources:** Where you debug JavaScript using breakpoints.
Expand All @@ -83,7 +88,7 @@ We can insert the debugger statement in the code to create breakpoints programma

In the DevTools, you can **watch** variables or expressions. This is helpful when debugging complex logic or tracking a variable over time.

- Use the **Watch** panel to track expressions like user.name or cart.length.
- Use the **Watch** panel to track expressions like `user.name` or `cart.length`.
- View **Local**, **Closure**, and **Global** scopes to inspect available variables.

### Stack Trace and Call Stack
Expand All @@ -92,7 +97,7 @@ When paused at a breakpoint (or after an error), you can inspect the Call Stack

- It shows the series of function calls that led to the current point.
- Clicking on a frame lets you inspect variables in that context.
Understanding the call stack is vital for fixing unexpected behaviors caused by incorrect function flows.
Understanding the call stack is vital for fixing unexpected behaviors caused by incorrect function flows.

## Common Debugging Strategies

Expand All @@ -102,4 +107,3 @@ Understanding the call stack is vital for fixing unexpected behaviors caused by
- **Search for error messages**: JavaScript errors often contain helpful information.
- **Check browser compatibility**: Not all browsers behave identically.
- **Use linters**: Tools like ESLint can catch many common bugs before you run your code.

12 changes: 9 additions & 3 deletions es/miscellaneous/debugging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ chapter: 19
pageNumber: 152
description: En programación, pueden ocurrir errores al escribir código. Podría deberse a errores sintácticos o lógicos. El proceso de encontrar errores puede llevar mucho tiempo y ser complicado y se denomina depuración de código.
---

# Depuración

En programación, es común que ocurran errores mientras se escribe el código. Estos pueden ser errores sintácticos o lógicos. La depuración de código es el proceso de identificar, aislar y corregir estos errores, lo cual puede ser un proceso complicado y que consume tiempo.
Expand All @@ -16,7 +17,7 @@ Una de las formas más simples y populares de depurar código es utilizando la f
```javascript
function calcularTotal(precio, porcentajeImpuesto) {
const impuesto = precio * porcentajeImpuesto;
console.log('Impuesto calculado:', impuesto); // Salida para inspección
console.log("Impuesto calculado:", impuesto); // Salida para inspección
const total = precio + impuesto;
return total;
}
Expand Down Expand Up @@ -44,6 +45,7 @@ Un punto de interrupción es una línea en tu código donde la ejecución se det
Los navegadores modernos ofrecen herramientas para desarrolladores con capacidades de depuración.

### Cómo establecer puntos de interrupción

1. Abre el panel Sources en las DevTools.
2. Navega hasta tu archivo de script.
3. Haz clic en el número de línea donde quieres que la ejecución se detenga.
Expand All @@ -70,10 +72,12 @@ Los navegadores modernos vienen equipados con potentes herramientas de desarroll
**Safari Web Inspector:** Web Inspector de Safari es un sólido conjunto de herramientas para depurar y crear perfiles de aplicaciones web.

### Acceso a las herramientas del navegador

Los navegadores ofrecen herramientas para inspeccionar HTML, CSS y JavaScript. Podemos acceder a ellas:
Haciendo clic derecho sobre la página y seleccionando "Inspeccionar" o presionando `F12` o `Ctrl + Shift + I` / `Cmd + Option + I` (Mac)

### Paneles clave en las herramientas del navegador

- **Console (Consola)**: Muestra registros, errores y permite ejecutar JavaScript en tiempo real.
- **Elements / Inspector**: Permite examinar y modificar el HTML y CSS del documento.
- **Sources**: Lugar donde se depura JavaScript usando puntos de interrupción.
Expand All @@ -83,17 +87,19 @@ Haciendo clic derecho sobre la página y seleccionando "Inspeccionar" o presiona
Podemos insertar la instrucción debugger directamente en el código para crear un punto de interrupción de forma programada. Cuando el código encuentra debugger, se pausará la ejecución y se abrirán las herramientas de desarrollo del navegador (si están abiertas).

### Expresiones de vigilancia y alcance (Watch & Scope)

En las DevTools puedes vigilar variables o expresiones. Esto es útil cuando depuras lógica compleja o haces seguimiento de una variable a lo largo del tiempo.

- Usa el panel Watch para seguir expresiones como usuario.nombre o carrito.length.
- Usa el panel Watch para seguir expresiones como `usuario.nombre` o `carrito.length`.
- Examina los alcances Local, Closure y Global para inspeccionar las variables disponibles en cada contexto.

### Rastreo de pila y Call Stack

Cuando el código se detiene en un punto de interrupción (o tras un error), puedes inspeccionar el panel de Call Stack:

- Muestra la secuencia de funciones llamadas que llevaron hasta el punto actual.
- Al hacer clic en un marco (frame), puedes examinar variables en ese contexto.
Entender la pila de llamadas es esencial para corregir comportamientos inesperados producidos por un flujo de ejecución incorrecto.
Entender la pila de llamadas es esencial para corregir comportamientos inesperados producidos por un flujo de ejecución incorrecto.

## Estrategias comunes de depuración

Expand Down
Loading