Depurar código JavaScript con la instrucción debugger

Escrito por el 18/05/2018, actualizado el 19/05/2018.
javascript planeta-codigo programacion
Enlace permanente Comentarios

JavaScript

Los navegadores web utilizan la palabra clave sentencia debugger; como punto de ruptura para iniciar el depurado de un código JavaScript. En vez de poner el punto de ruptura desde el navegador utilizando la herramienta de depuración para desarrolladores con esta instrucción se puede poner en el código fuente donde se desee, de esta forma se evita buscar entre los múltiples recursos que haya cargados en la página e ir a la línea en la que se desea iniciar la depuración poniendo un punto de ruptura.

Suponiendo que se desea poner un punto de ruptura en un código JavaScript hay que editar el archivo JavaScript de código fuente e incluir la sentencia debugger; como en el siguiente caso. Cuando el navegador ejecute esa sentencia iniciará, tiendo las herramientas de depuración abiertas, el depurador.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Debugger</title>
    <script type="text/javascript">
        window.onload = function() {
            var date = new Date();
            debugger;
            var node = document.createTextNode(date);
            var element = document.getElementsByTagName("h1")[0];
            element.parentNode.insertBefore(node, element.nextSibling);
        }
    </script>
</head>
<body>
    <h1>JavaScript Debugger</h1>
</body>
</html>

Debugger.html

Con la herramienta de depuración abierta se pueden poner expresiones de inspección, nuevos puntos de ruptura e ir paso a paso en la ejecución del código JavaScript. Esta sentencia para iniciar la depuración es lo mismo que añadir un punto de ruptura inspeccionando los recursos de JavaScript de la página pero quizá resulta más cómodo.

Referencia:

MDN debugger

Depurar código JavaScript con la instrucción debugger

Transpiling de ECMAScript 6 a 5, Uglify y ESLint con Gulp

Introducción al JavaScript de ECMAScript 6

Usar una imagen de fondo aleatoria al cargar una página web

Añadir botones selectores de opciones a select múltiple de bootstrap-select

Componente select múltiple en Apache Tapestry

Componente select de Apache Tapestry con funcionalidades adicionales usando bootstrap-select