Debugging Javascript - Munich Frontend Developers 13.5.2020

0 likes123 views

The document discusses techniques for debugging JavaScript code. It covers fundamental debugging concepts like reproducing issues, using the browser's developer tools, and JavaScript debugging tools like console.log and breakpoints. It also discusses non-technical debugging methods such as writing down the problem, assumptions and steps taken; taking breaks; and talking through the problem with someone else. The overall document provides an overview of debugging strategies and tools that can help locate and fix issues in JavaScript code.

Technology

Debugging
Javascript
Munich Frontend Developers :: 13.05.2020 :: @hamatti

JuhisHi, I’m
Developer Advocate @ Futurice
Founder of Turku ❤ Frontend
@hamatti :: hamatti.org
From Helsinki, "

FUNDAMENTALS
Munich Frontend Devs @hamatti

FUNDAMENTALS
Munich Frontend Devs @hamatti
TOOLS & TECHNIQUES

NON-TECHNICAL METHODS
FUNDAMENTALS
Munich Frontend Devs @hamatti
TOOLS & TECHNIQUES

STOP & BREATHE
Munich Frontend Devs @hamatti

REPRODUCE LOCATE
Munich Frontend Devs @hamatti

REPRODUCE LOCATE FIX
Munich Frontend Devs @hamatti

https://twitter.com/JenMsft/status/1256007715425382400/Munich Frontend Devs @hamatti

FROM END TO START
Munich Frontend Devs @hamatti

TOOLS & TECHNIQUES
Munich Frontend Devs @hamatti

CONSOLE.__
Munich Frontend Devs @hamatti

console.log
Munich Frontend Devs @hamatti

Template literals
Munich Frontend Devs @hamatti

Multiple values with template literals
Munich Frontend Devs @hamatti

Object Property Value Shorthand
Munich Frontend Devs @hamatti

console.table
Munich Frontend Devs @hamatti

console.trace
console.count
console.group
https://developer.mozilla.org/en-US/docs/Web/API/Console
+
Munich Frontend Devs @hamatti

BROWSERS’
DEVELOPER TOOLS
Munich Frontend Devs @hamatti

DOM Inspector
Styles
Debugger
Network requests
Performance
Accessibility
Framework extensions
Munich Frontend Devs @hamatti
BROWSERS’ DEVELOPER TOOLS

Google Chrome
Munich Frontend Devs @hamatti
https://developers.google.com/web/tools/chrome-devtools
https://developer.mozilla.org/en-US/docs/Tools
Mozilla Firefox
BROWSERS’ DEVELOPER TOOLS

debugger
continue until next breakpoint
Munich Frontend Devs @hamatti

debugger
continue until next breakpoint
call function without
stepping into it
Munich Frontend Devs @hamatti

debugger
continue until next breakpoint
call function without
stepping into it
step into a function
Munich Frontend Devs @hamatti

debugger
continue until next breakpoint
call function without
stepping into it
step into a function
step out of a function
Munich Frontend Devs @hamatti

debugger
continue until next breakpoint
call function without
stepping into it
step into a function
step out of a function
next line
Munich Frontend Devs @hamatti

debugger
continue until next breakpoint
call function without
stepping into it
step into a function
step out of a function
next line
turn breakpoints off
Munich Frontend Devs @hamatti

breakpoints
Munich Frontend Devs @hamatti

conditional breakpoints
Munich Frontend Devs @hamatti

DOM breakpoints
Munich Frontend Devs @hamatti

NON-TECHNICAL METHODS
Munich Frontend Devs @hamatti

BRAIN DUMP
Munich Frontend Devs @hamatti

Munich Frontend Devs @hamatti
WRITE DOWN

1. WHAT IS THE PROBLEM?
Munich Frontend Devs @hamatti
WRITE DOWN

1. WHAT IS THE PROBLEM?
2. WHAT ARE YOUR ASSUMPTIONS?
Munich Frontend Devs @hamatti
WRITE DOWN

1. WHAT IS THE PROBLEM?
2. WHAT ARE YOUR ASSUMPTIONS?
3. WHAT HAVE YOU TRIED?
Munich Frontend Devs @hamatti
WRITE DOWN

TAKE A BREAK
Munich Frontend Devs @hamatti

TALK TO
A RUBBER DUCK
Munich Frontend Devs @hamatti

humanetechguides.com/debugging
Munich Frontend Devs @hamatti

Thanks!
juhis@futurice.com
@hamatti in Twitter
hamatti.org
Munich Frontend Devs @hamatti

More Related Content

Similar to Debugging Javascript - Munich Frontend Developers 13.5.2020 (10)

PDF

An Intense Overview of the React EcosystemRami Sayar

PDF

An Overview of the React EcosystemFITC

PDF

Front-End Developer's Career RoadmapWebStackAcademy

PDF

Run around Chrome Inspector Tiang Cheng

PPTX

React JSSoftware Infrastructure

PPTX

ReactJSFatih Şimşek

PDF

Getting started with dev tools (4/10/17 DC)Daniel Friedman

PPTX

Improving Your Debugging Skills In WordPressImran Sayed

PDF

Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...Prasid Pathak

PPTX

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Conference

An Intense Overview of the React EcosystemRami Sayar

An Overview of the React EcosystemFITC

Front-End Developer's Career RoadmapWebStackAcademy

Run around Chrome Inspector Tiang Cheng

React JSSoftware Infrastructure

ReactJSFatih Şimşek

Getting started with dev tools (4/10/17 DC)Daniel Friedman

Improving Your Debugging Skills In WordPressImran Sayed

Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...Prasid Pathak

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Conference

More from Juha-Matti Santala (20)

PDF

Debugging Django @ HelPy, Juha-Matti Santala 24.5.2022Juha-Matti Santala

PDF

Learning Rust - experiences from a Python/Javascript developerJuha-Matti Santala

PDF

Contemporary Documentation @ PyAmsterdam, 2021-03-10Juha-Matti Santala

PDF

Contemporary Documentation @ sthml.jsJuha-Matti Santala

PDF

Contemporary Documentation, Django Day CopenhagenJuha-Matti Santala

PDF

Debugging Python - Python Users Berlin 14.5.2020Juha-Matti Santala

PDF

HelsinkiJS: 11ty + Ghost: Static Sites with Great Editor UXJuha-Matti Santala

PDF

PyCon Estonia: Contemporary DocumentationJuha-Matti Santala

PDF

Contemporary Documentation - HelsinkiJSJuha-Matti Santala

PDF

Contemporary Documentation - TampereJSJuha-Matti Santala

PDF

The Art of Side ProjectsJuha-Matti Santala

PDF

“Graphical Perception and Graphical Methods for Analyzing Scientific Data” - ...Juha-Matti Santala

PDF

PyCon CZ 2019 Lightning Talk: 7 Days to OstravaJuha-Matti Santala

PDF

I teach, therefore I learnJuha-Matti Santala

PDF

Inspiration, Learning and Experimentation in CodepenJuha-Matti Santala

PDF

You should have FOMO: What you're missing out if you're still using Python 2.7Juha-Matti Santala

PDF

OuluES Human Accelerator: Dream WorkshopJuha-Matti Santala

PDF

Minimum Viable Product: the workshopJuha-Matti Santala

PDF

Stockholm syndrome: or how I learned to love the editorJuha-Matti Santala

PDF

Happy Little Accidents - The Art of Debugging Juha-Matti Santala

Debugging Django @ HelPy, Juha-Matti Santala 24.5.2022Juha-Matti Santala

Learning Rust - experiences from a Python/Javascript developerJuha-Matti Santala

Contemporary Documentation @ PyAmsterdam, 2021-03-10Juha-Matti Santala

Contemporary Documentation @ sthml.jsJuha-Matti Santala

Contemporary Documentation, Django Day CopenhagenJuha-Matti Santala

Debugging Python - Python Users Berlin 14.5.2020Juha-Matti Santala

HelsinkiJS: 11ty + Ghost: Static Sites with Great Editor UXJuha-Matti Santala

PyCon Estonia: Contemporary DocumentationJuha-Matti Santala

Contemporary Documentation - HelsinkiJSJuha-Matti Santala

Contemporary Documentation - TampereJSJuha-Matti Santala

The Art of Side ProjectsJuha-Matti Santala

“Graphical Perception and Graphical Methods for Analyzing Scientific Data” - ...Juha-Matti Santala

PyCon CZ 2019 Lightning Talk: 7 Days to OstravaJuha-Matti Santala

I teach, therefore I learnJuha-Matti Santala

Inspiration, Learning and Experimentation in CodepenJuha-Matti Santala

You should have FOMO: What you're missing out if you're still using Python 2.7Juha-Matti Santala

OuluES Human Accelerator: Dream WorkshopJuha-Matti Santala

Minimum Viable Product: the workshopJuha-Matti Santala

Stockholm syndrome: or how I learned to love the editorJuha-Matti Santala

Happy Little Accidents - The Art of Debugging Juha-Matti Santala

Recently uploaded (20)

PDF

Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdfPriyanka Aash

PDF

Hyderabad MuleSoft In-Person Meetup (June 21, 2025) SlidesRavi Tamada

PDF

A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdfPriyanka Aash

PPTX

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

PDF

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

PPTX

Securing Account Lifecycles in the Age of Deepfakes.pptxFIDO Alliance

PDF

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

PDF

Using the SQLExecutor for Data Quality Management: aka One man's love for the...Safe Software

PDF

Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019

PDF

From Manual to Auto Searching- FME in the Driver's SeatSafe Software

PDF

Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash

PDF

WebdriverIO & JavaScript: The Perfect Duo for Web Automationdigitaljignect

PDF

Python Conference Singapore - 19 Jun 2025ninefyi

PDF

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

PDF

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

PDF

The Future of Product Management in AI ERA.pdfAlyona Owens

PDF

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

PDF

Agentic AI for Developers and Data Scientists Build an AI Agent in 10 Lines o...All Things Open

PDF

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

PPTX

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdfPriyanka Aash

Hyderabad MuleSoft In-Person Meetup (June 21, 2025) SlidesRavi Tamada

A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdfPriyanka Aash

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

Securing Account Lifecycles in the Age of Deepfakes.pptxFIDO Alliance

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

Using the SQLExecutor for Data Quality Management: aka One man's love for the...Safe Software

Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019

From Manual to Auto Searching- FME in the Driver's SeatSafe Software

Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash

WebdriverIO & JavaScript: The Perfect Duo for Web Automationdigitaljignect

Python Conference Singapore - 19 Jun 2025ninefyi

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

The Future of Product Management in AI ERA.pdfAlyona Owens

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

Agentic AI for Developers and Data Scientists Build an AI Agent in 10 Lines o...All Things Open

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

Debugging Javascript - Munich Frontend Developers 13.5.2020

1. Debugging Javascript Munich Frontend Developers :: 13.05.2020 :: @hamatti

2. JuhisHi, I’m Developer Advocate @ Futurice Founder of Turku ❤ Frontend @hamatti :: hamatti.org From Helsinki, "

3. FUNDAMENTALS Munich Frontend Devs @hamatti

4. FUNDAMENTALS Munich Frontend Devs @hamatti TOOLS & TECHNIQUES

5. NON-TECHNICAL METHODS FUNDAMENTALS Munich Frontend Devs @hamatti TOOLS & TECHNIQUES

6. FUNDAMENTALS Munich Frontend Devs @hamatti

7. STOP & BREATHE Munich Frontend Devs @hamatti

8. REPRODUCE Munich Frontend Devs @hamatti

9. REPRODUCE LOCATE Munich Frontend Devs @hamatti

10. REPRODUCE LOCATE FIX Munich Frontend Devs @hamatti

11. REPRODUCE LOCATE FIX Munich Frontend Devs @hamatti

12. https://twitter.com/JenMsft/status/1256007715425382400/Munich Frontend Devs @hamatti

13. FROM END TO START Munich Frontend Devs @hamatti

14. TOOLS & TECHNIQUES Munich Frontend Devs @hamatti

15. CONSOLE.__ Munich Frontend Devs @hamatti

16. console.log Munich Frontend Devs @hamatti

17. console.log Munich Frontend Devs @hamatti

18. Template literals Munich Frontend Devs @hamatti

19. Template literals Munich Frontend Devs @hamatti

20. Multiple values with template literals Munich Frontend Devs @hamatti

21. Multiple values with template literals Munich Frontend Devs @hamatti

22. Object Property Value Shorthand Munich Frontend Devs @hamatti

23. Object Property Value Shorthand Munich Frontend Devs @hamatti

24. With CSS Munich Frontend Devs @hamatti

25. With CSS Munich Frontend Devs @hamatti

26. console.table Munich Frontend Devs @hamatti

27. console.table Munich Frontend Devs @hamatti

28. console.trace console.count console.group https://developer.mozilla.org/en-US/docs/Web/API/Console + Munich Frontend Devs @hamatti

29. BROWSERS’ DEVELOPER TOOLS Munich Frontend Devs @hamatti

30. DOM Inspector Styles Debugger Network requests Performance Accessibility Framework extensions Munich Frontend Devs @hamatti BROWSERS’ DEVELOPER TOOLS

31. Google Chrome Munich Frontend Devs @hamatti https://developers.google.com/web/tools/chrome-devtools https://developer.mozilla.org/en-US/docs/Tools Mozilla Firefox BROWSERS’ DEVELOPER TOOLS

32. DEBUGGER Munich Frontend Devs @hamatti

33. debugger Munich Frontend Devs @hamatti

34. debugger Munich Frontend Devs @hamatti

35. debugger continue until next breakpoint Munich Frontend Devs @hamatti

36. debugger continue until next breakpoint call function without stepping into it Munich Frontend Devs @hamatti

37. debugger continue until next breakpoint call function without stepping into it step into a function Munich Frontend Devs @hamatti

38. debugger continue until next breakpoint call function without stepping into it step into a function step out of a function Munich Frontend Devs @hamatti

39. debugger continue until next breakpoint call function without stepping into it step into a function step out of a function next line Munich Frontend Devs @hamatti

40. debugger continue until next breakpoint call function without stepping into it step into a function step out of a function next line turn breakpoints off Munich Frontend Devs @hamatti

41. breakpoints Munich Frontend Devs @hamatti

42. conditional breakpoints Munich Frontend Devs @hamatti

43. DOM breakpoints Munich Frontend Devs @hamatti

44. NON-TECHNICAL METHODS Munich Frontend Devs @hamatti

45. BRAIN DUMP Munich Frontend Devs @hamatti

46. Munich Frontend Devs @hamatti WRITE DOWN

47. 1. WHAT IS THE PROBLEM? Munich Frontend Devs @hamatti WRITE DOWN

48. 1. WHAT IS THE PROBLEM? 2. WHAT ARE YOUR ASSUMPTIONS? Munich Frontend Devs @hamatti WRITE DOWN

49. 1. WHAT IS THE PROBLEM? 2. WHAT ARE YOUR ASSUMPTIONS? 3. WHAT HAVE YOU TRIED? Munich Frontend Devs @hamatti WRITE DOWN

50. TAKE A BREAK Munich Frontend Devs @hamatti

51. TALK TO A RUBBER DUCK Munich Frontend Devs @hamatti

52. humanetechguides.com/debugging Munich Frontend Devs @hamatti