Don’t Be Afraid of the
Javascript Stack Trace
Jennifer Bland
Slide 2
Slide 2 text
Jennifer Bland
Sr. Software Engineer | Google
Developers Expert
jenniferbland.com
codeprep.io
Slide 3
Slide 3 text
3 Truths 1 Lie
• I saw the only Gold Medal won by
Great Britain
• I saw the only medal won by Mongolia
• I was an Olympic Torch Runner
• I attended the Opening Ceremony
Heap
• mostly unstructured region of memory
• memory allocation to variables and objects happen here
• finite in size
Slide 7
Slide 7 text
Queue
• list of messages to be processed and the associated
callback functions to execute
• messages executed by call stack
• message processing ends with stack is empty
Slide 8
Slide 8 text
What is the Stack Trace?
• what functions were called
• in what order
• from which line and file
• with what arguments
Slide 9
Slide 9 text
Stack Trace Demo
Slide 10
Slide 10 text
5 Levels of Logging
• debug
• info
• log
• warn
• error
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Chrome
Slide 14
Slide 14 text
Firefox
Slide 15
Slide 15 text
console.table()
• display objects as a table
• click on headers to sort
• works with objects of objects
Slide 16
Slide 16 text
console.trace
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Why use console.trace()
• easier than writing a series of console.log
• remember to remove only one line for production
• shows file where it was called
• shows line number where it was called
Slide 19
Slide 19 text
Debug
• find & locate the code for a particular function
window.onerror()
window.onerror = function(message, file, line, col, error) {
// send crash information back to your servers
console.log(error.stack);
}
Slide 22
Slide 22 text
error event
window.addEventListener("error", function(error) {
// send crash information back to your servers
console.log(error.stack);
}
Slide 23
Slide 23 text
3 Truths 1 Lie
• I saw the only Gold Medal won by
Great Britain
• I saw the only medal won by Mongolia
• I was an Olympic Torch Runner
• I attended the Opening Ceremony