In a world increasingly run by software, failures can be caused by bugs. Failure to find and fix bugs quickly has a financial, personal and reputational cost to an organisation. It can impact on product delivery time as well. A large portion of developer’s time is spent in debugging. However, when was the last time we worked on improving our debugging skills? This is one of the rarely discussed topics. So let’s spend some time in improving our debugging skills, that can help us make it simpler to quickly find and fix critical bugs, so that we can deliver to ever-shortening deadlines and boosts overall productivity.

1. 1

2. 1.
What’s challenges you
face?

3. 2.
Attitude Matters

4. Attitude matters
╺ Be positive
╺ Don’t give too soon
╺ Take ownership
╺ Avoid distractions
4

5. 3.
Thought Process

6. Thought process
╺ Don’t assume
╺ Analyze first
╺ Prepare steps
╺ Ruling out the problems
6

7. 4.
Why WordPress Core
knowledge is helpful?

8. 5.
Manual Debugging?

9. 6.
Using Debugging Tools

10. 7.
Examples

11. 8.
My Experiences

12. Frontend Debugging

13. Isolate the problem
13

14. ╺ Debugger
╺ Console log ( JS )
╺ Echo ( PHP )

15. ╺ console.dir

16. ╺ console.table

17. ╺ Accessibility extension

18. Using good tools
18

19. Using Good Tools
╺ Syntax Highlighting
╺ Linting tools
╺ Browser Extensions
19

20. ╺ Debugging Accessibility

21. ╺ Debugging Accessibility

22. ╺ React Dev Tools

23. ╺ Throttle connection to check performance

24. ╺ Remote debugger - jsconsole.com

25. Request Related

26. Request Related
╺ Checking network tab
╺ Checking request headers response, type of error codes we
get
╺ If its ajax request ,check the name.
26

27. 10.
CSS Related

28. ╺ Check what css is being
applied to the element.
28

29. ╺ Add a red border
29

30. Things
to keep in mind when
writing css

31. Is CSS a Programming
Language?

32. “CSS is declarative language and
JavaScript is imperative
language
32

35. 35
CSS PARSER
CSSOM

36. JavaScript Related
╺ Add the breakpoints in the browser itself
╺ Navigate through each breakpoint.
╺ Check which event is being applied to the element.
36

37. Build Related -
Webpack, Babel,
Node
╺ Module not found
╺ Sometimes check the node and npm version you are using.
╺ Print the value of the variables and return values of functions,
and check line by line.
37

38. 13.
Useful Resources

39. Useful Resources
╺ https://jvns.ca/blog/2019/06/23/a-few-debugging-resources/
╺ https://jvns.ca/blog/debugging-attitude-matters/
╺ https://newrelic.com/
╺ https://frontendmasters.com/courses/chrome-dev-tools/
39

40. Thank you
40