Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Don't Be Afraid of the JavaScript Stack Trace

Don't Be Afraid of the JavaScript Stack Trace

At some point, your code will not work. You could spend hours trying to google for a solution. Instead, use the JavaScript stack trace to find the problem. A beginner-friendly overview of the JavaScript stack trace and tips on how to use it.

Da526e4b5901b3a2759cf234285c6488?s=128

Jennifer Bland

March 08, 2019
Tweet

More Decks by Jennifer Bland

Other Decks in Programming

Transcript

  1. Don’t Be Afraid of the Javascript Stack Trace Jennifer Bland

  2. Jennifer Bland Sr. Software Engineer | Google Developers Expert jenniferbland.com

    codeprep.io
  3. 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
  4. Background Terminology • Call Stack • Heap • Queue •

    Concurrency Model
  5. Call Stack

  6. Heap • mostly unstructured region of memory • memory allocation

    to variables and objects happen here • finite in size
  7. 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
  8. What is the Stack Trace? • what functions were called

    • in what order • from which line and file • with what arguments
  9. Stack Trace Demo

  10. 5 Levels of Logging • debug • info • log

    • warn • error
  11. None
  12. None
  13. Chrome

  14. Firefox

  15. console.table() • display objects as a table • click on

    headers to sort • works with objects of objects
  16. console.trace

  17. None
  18. 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
  19. Debug • find & locate the code for a particular

    function
  20. Why Do Error Occur? •EvalError •InternalError •RangeError •ReferenceError •SyntaxError •TypeError

    •URIError •MyCustomError
  21. window.onerror() window.onerror = function(message, file, line, col, error) { //

    send crash information back to your servers console.log(error.stack); }
  22. error event window.addEventListener("error", function(error) { // send crash information back

    to your servers console.log(error.stack); }
  23. 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