From 21eadab58b5b70835616f3d53cfb68f675495d6f Mon Sep 17 00:00:00 2001 From: 992manav Date: Thu, 2 Oct 2025 17:23:55 +0530 Subject: [PATCH] Fix markdown syntax in Debugging chapter #308 --- en/miscellaneous/debugging.md | 16 ++++++++++------ es/miscellaneous/debugging.md | 12 +++++++++--- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/en/miscellaneous/debugging.md b/en/miscellaneous/debugging.md index f2283cd3..eaca6950 100644 --- a/en/miscellaneous/debugging.md +++ b/en/miscellaneous/debugging.md @@ -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. @@ -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. @@ -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. @@ -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. @@ -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. @@ -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 @@ -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 @@ -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. - diff --git a/es/miscellaneous/debugging.md b/es/miscellaneous/debugging.md index ffedd218..1fb4b581 100644 --- a/es/miscellaneous/debugging.md +++ b/es/miscellaneous/debugging.md @@ -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. @@ -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; } @@ -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. @@ -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. @@ -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