Obtener seguimiento de pila en JavaScript
- Obtener seguimiento de pila con el objeto de error en JavaScript
-
Obtener Stack Trace con
Console.trace()en JavaScript - Obtener Stack Trace con una función personalizada en JavaScript
- Obtenga Stack Trace con StackTrace.js en JavaScript
Este artículo le enseña cómo obtener un seguimiento de pila en JavaScript de las siguientes maneras:
- Obtenga el seguimiento de la pila con el objeto de error
- Obtenga el seguimiento de la pila con
console.trace() - Obtenga seguimiento de pila con una función personalizada
- Obtén el seguimiento de la pila con StackTrace.js
Obtener seguimiento de pila con el objeto de error en JavaScript
Usando la propiedad stack en el objeto de error de JavaScript, puede obtener un seguimiento de la pila. Sin embargo, deberá crear el objeto de error utilizando el constructor Error.
Por lo tanto, cuando ocurre un error en su código, crea el objeto de error. Como resultado, puede imprimir el seguimiento de la pila.
Por ejemplo, tenemos la función add_num en nuestro código a continuación, que sumará dos números. Mientras tanto, add_num tiene una verificación condicional que verifica los argumentos de la función como números.
Entonces, si la verificación falla, creamos un objeto de error desde el constructor Error. Luego, imprimimos el seguimiento de la pila usando la propiedad stack.
Por lo tanto, proporcionamos una cadena como segundo argumento de la función add_num como prueba. Entonces, obtenemos un seguimiento de la pila cuando ejecutamos el código.
Código de ejemplo:
function add_num(first_number, second_number) {
if (typeof (first_number) !== 'number' ||
typeof (second_number) !== 'number') {
var error = new Error();
console.log(error.stack);
} else {
console.log(first_number + second_number);
}
}
let a = 23;
let b = '23';
add_num(a, b);
Producción :
add_num@http://localhost/stacktrace/stacktrace-1.html:11:17
@http://localhost/stacktrace/stacktrace-1.html:21:10
stacktrace-1.html:12:13
Además, también puede envolver su código en un bloque try-catch. Entonces, colocará el código que puede causar un error en el bloque try, y obtendrá el seguimiento de la pila del bloque catch.
Cuando se produce un error en el bloque intentar, puede acceder a una variable de excepción. Esta variable de excepción tiene la propiedad stack.
Código de ejemplo:
try {
let a = 23;
console.log(a - b); /* Variable b is not defined, so we get an error */
} catch (e) {
console.log(e.stack)
}
Producción :
@http://localhost/stacktrace/stacktrace-1.html:11:4
stacktrace-1.html:13:12
Obtener Stack Trace con Console.trace() en JavaScript
El objeto de la consola contiene una función trace() para imprimir un seguimiento de la pila en la consola web. Por lo tanto, puede colocar console.trace() en una sección de código donde se produjo un error.
Nuestro ejemplo a continuación es la función add_num discutida anteriormente. Sin embargo, lo hemos modificado para usar la función console.trace().
Por lo tanto, puede llamar a la función add_num con un argumento no válido para imprimir el seguimiento de la pila. Un argumento inválido es una cadena porque la función add_num solo permite números; cualquier otra cosa provoca un error.
Código de ejemplo:
function add_num(first_number, second_number) {
if (typeof (first_number) !== 'number' ||
typeof (second_number) !== 'number') {
console.trace();
} else {
console.log(first_number + second_number);
}
}
let a = 23;
let b = '23';
add_num(a, b);
Producción :
console.trace() stacktrace-2.html:11:13
add_num http://localhost/stacktrace/stacktrace-2.html:11
<anonymous> http://localhost/stacktrace/stacktrace-2.html:20
Mientras tanto, no está limitado a usar console.trace() cuando ocurre un error. Esto significa que puede usarlo para imprimir la ejecución del código.
Entonces, en nuestro ejemplo a continuación, usamos console.trace() para rastrear diferentes ejecuciones de add_num.
Código de ejemplo:
function add_numbers(a, b) {
console.trace('You called add_numbers with', a, 'and', b);
return a + b;
}
function calculate_it() {
let f = add_numbers(42, 9);
let j = add_numbers(0, 0);
return f + j;
}
function start_the_trace() {
let a = add_numbers(12, 33);
let b = calculate_it();
}
start_the_trace();
Producción :
console.trace() You called add_numbers with 12 and 33 stacktrace-2.html:10:12
add_numbers http://localhost/stacktrace/stacktrace-2.html:10
start_the_trace http://localhost/stacktrace/stacktrace-2.html:21
<anonymous> http://localhost/stacktrace/stacktrace-2.html:25
console.trace() You called add_numbers with 42 and 9 stacktrace-2.html:10:12
add_numbers http://localhost/stacktrace/stacktrace-2.html:10
calculate_it http://localhost/stacktrace/stacktrace-2.html:15
start_the_trace http://localhost/stacktrace/stacktrace-2.html:22
<anonymous> http://localhost/stacktrace/stacktrace-2.html:25
console.trace() You called add_numbers with 0 and 0 stacktrace-2.html:10:12
add_numbers http://localhost/stacktrace/stacktrace-2.html:10
calculate_it http://localhost/stacktrace/stacktrace-2.html:16
start_the_trace http://localhost/stacktrace/stacktrace-2.html:22
<anonymous> http://localhost/stacktrace/stacktrace-2.html:25
Obtener Stack Trace con una función personalizada en JavaScript
Puede definir una función personalizada que producirá un seguimiento de la pila cuando se produzca un error. Además, debe colocar la función donde se produce un error en su código.
Mientras tanto, la función funciona para que un error en su código provoque un error en la ejecución de la función. Por lo tanto, puede ver el seguimiento de la pila y dónde afectó a la función.
Tenemos una función personalizada en el siguiente código que produce un seguimiento de pila cuando ocurre un error. Por lo tanto, observará el seguimiento de la pila en la consola del navegador web.
Código de ejemplo:
function stack_trace() {
function st2(f) {
let split_string = f.toString().split('(')[0].substring(9);
let join_string = f.arguments.join(',');
return !f ? [] :
st2(f.caller).concat([split_string + '(' + join_string + ')']);
}
return st2(arguments.callee.caller);
}
function add_num(first_number, second_number) {
if (typeof (first_number) !== 'number' ||
typeof (second_number) !== 'number') {
stack_trace();
} else {
console.log(first_number + second_number);
}
}
let a = 23;
let b = '23';
add_num(a, b);
Producción :
Uncaught TypeError: f.arguments.join is not a function
st2 http://localhost/stacktrace/stacktrace-3.html:12
stack_trace http://localhost/stacktrace/stacktrace-3.html:16
add_num http://localhost/stacktrace/stacktrace-3.html:21
<anonymous> http://localhost/stacktrace/stacktrace-3.html:30
stacktrace-3.html:12:35
Obtenga Stack Trace con StackTrace.js en JavaScript
StackTrace.js es una biblioteca de JavaScript que puede emplear para obtener un seguimiento de pila en su código. Primero, StackTrace.js requiere que defina una función de devolución de llamada.
Esta función de devolución de llamada imprimirá el seguimiento de la pila en la consola de su navegador web. Mientras tanto, detrás de escena, StackTrace.js usa la propiedad stack de Error.stack.
En el siguiente código, hemos importado StackTrace.js desde CDNJS. Entonces, definimos la función de devolución de llamada como una función de flecha y recreamos la función add_num.
Sin embargo, la función add_num usa StackTrace.js para imprimir el seguimiento de la pila.
Código de ejemplo:
<head>
<meta charset="utf-8" />
<title>Stacktrace-4</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.2/stacktrace.min.js"
integrity="sha512-9fotp9F7mNA1AztobpB07lScgCKiN4i2JuRYTl8MxiHQVJs05EJqeUfPWt9OFAKD1QsIVZiNFQSdov9luOT8TA=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
</head>
<body>
<script>
var callback = function (stack_frames) {
var stringified_stack = stack_frames.map((the_stack_frame) => {
return the_stack_frame.toString();
}).join('\n');
console.log(stringified_stack);
};
function addNum(n1, n2) {
if (typeof(n1) !== "number" || typeof(n2) !== "number") {
StackTrace.get().then(callback);
} else {
console.log(n1 + n2);
}
}
let a = 23;
let b = "23";
addNum(a, b);
</script>
</body>
Producción :
_generateError (https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.2/stacktrace.js:28:)
get (https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.2/stacktrace.js:77:)
addNum (http://localhost/stacktrace/stacktrace-4.html:24:16)
http://localhost/stacktrace/stacktrace-4.html:32:9 stacktrace-4.html:19:12
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn