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

33.
35
CSS PARSER
CSSOM

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

35.
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

36.
13.
Useful Resources

37.
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

38.
Thank you
40