Best IT Recipes

Individual stack traces in Google Chrome Developer Tools?

I want to customize the elements that appear in the strack trace panel on the Scripts tab of the Google Chrome tools. In particular, I want to filter out elements in a stack trace and add more descriptive names to some stack trace elements without having to rename my objects and functions.

I found the V8 Stack Trace API in http://code.google.com/p/v8/wiki/JavaScriptStackTraceApi , but overriding Error.prepareStackTrace seems to have no effect.

+1
javascript google-chrome v8 chromium
May 28 '11 at 19:05
source share
3 answers

The description on this page is certainly a bit complicated, here's how to do it:

Error.prepareStackTrace = function(error, stack) { return stack; }; var someObj = { someMethod : function () { crash(); } } function bar(barArg) { someObj.someMethod(); }; function foo(fooArg) { bar("barArgString"); }; function getTrace(e) { var stack = e.stack; var trace = ""; for (var i = 0; i < stack.length; i++) { var frame = stack[i], func = frame.getFunction(); trace += "\r" + frame.getThis() + "." + frame.getFunctionName(); } return trace; } try { foo("fooArgString"); } catch (e) { alert("trace from catch(): " + getTrace(e)); }

This will show:

 trace from catch(): [object Object].someObj.someMethod [object Window].bar [object Window].foo [object Window].

The last frame is a global region (without a function name).

Essentially your overriding of the prepareStackTrace () method causes error.stack to become what you return from prepareStackTrace (). The trick is that the second argument to prepareStackTrace () is an array of CallSite objects — objects that support getThis (), getFunctionName (), etc.

The above code overrides prepareStackTrace () so that it returns an Array of CallSite object (the "stack" parameter above), so that if you try .catch Error, Error.stack will contain a CallSite array instead of the usual stack trace in string form . Another approach would be to process CallSite objects inside your prepareStackTrace () replacement and return your alternative stack trace as a string.

Please note that CallSite objects are really very successful. Try making frame.toString () or just trying to warn (frame) (implicitly this includes toString ()) and it crashes and the Chrome developer tools show no errors.

+6
Jun 08 2018-12-12T00:
source share

Here is the code that helped:

 <head> <script> Error.prepareStackTrace = function() { return "MyStackObject"; } try { throw new Error(); } catch (e) { console.log(e.stack); } </script> </head>
+1
Jan 28 2018-12-12T00:
source share

The documentation has moved here: https://github.com/v8/v8/wiki/Stack-Trace-API

Just put this at the top of your javascript code, it formats a beautiful stack trace:

 Error.prepareStackTrace = function(error, stack) { var trace = ''; var max_width = 0; for (var i = 0; i < stack.length; i++){ var frame = stack[i]; var typeLength = 0; typeLength = (frame.getTypeName() !== null && frame.getTypeName() !== '[object global]') ? frame.getTypeName().length : 0; typeLength = typeLength.length > 50 ? 50 : typeLength; functionlength = frame.getFunctionName() !== null ? frame.getFunctionName().length : '<anonymous>'.length; functionlength = functionlength > 50 ? 50 : functionlength; if (typeLength + functionlength > max_width) max_width = typeLength + functionlength; } for (var i = 0; i < stack.length; i++) { var frame = stack[i]; var filepath = frame.getFileName(); var typeName = ''; if (frame.getTypeName() !== null && frame.getTypeName() !== '[object global]') typeName = frame.getTypeName().substring(0, 50) + '.'; var functionName = '<anonymous>'; if (frame.getFunctionName() !== null) functionName = frame.getFunctionName().substring(0, 50); var space = ''; var width = max_width - (typeName.length + functionName.length) + 2; space = Array(width).join(' '); var line = ' at ' + typeName + functionName + space + filepath + ' (' + frame.getLineNumber() + ':' + frame.getColumnNumber() + ')\n'; trace += line; } return trace; };

Here is a test example:

 function A() { B(); } function B() { C(); } function C() { throw new Error('asd'); } try { A(); } catch (e) { print(e + '\n' + e.stack); }
0
04 Oct '16 at 13:47 on
source share


More articles:


All Articles