Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Improving Your Debugging Skills In WordPress

457 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Improving Your Debugging Skills In WordPress

  1. 1. 1
  2. 2. 1. What’s challenges you face?
  3. 3. 2. Attitude Matters
  4. 4. Attitude matters ╺ Be positive ╺ Don’t give too soon ╺ Take ownership ╺ Avoid distractions 4
  5. 5. 3. Thought Process
  6. 6. Thought process ╺ Don’t assume ╺ Analyze first ╺ Prepare steps ╺ Ruling out the problems 6
  7. 7. 4. Why WordPress Core knowledge is helpful?
  8. 8. 5. Manual Debugging?
  9. 9. 6. Using Debugging Tools
  10. 10. 7. Examples
  11. 11. 8. My Experiences
  12. 12. Frontend Debugging
  13. 13. Isolate the problem 13
  14. 14. ╺ Debugger ╺ Console log ( JS ) ╺ Echo ( PHP )
  15. 15. ╺ console.dir
  16. 16. ╺ console.table
  17. 17. ╺ Accessibility extension
  18. 18. Using good tools 18
  19. 19. Using Good Tools ╺ Syntax Highlighting ╺ Linting tools ╺ Browser Extensions 19
  20. 20. ╺ Debugging Accessibility
  21. 21. ╺ Debugging Accessibility
  22. 22. ╺ React Dev Tools
  23. 23. ╺ Throttle connection to check performance
  24. 24. ╺ Remote debugger - jsconsole.com
  25. 25. Request Related
  26. 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. 27. 10. CSS Related
  28. 28. ╺ Check what css is being applied to the element. 28
  29. 29. ╺ Add a red border 29
  30. 30. Things to keep in mind when writing css
  31. 31. Is CSS a Programming Language?
  32. 32. “CSS is declarative language and JavaScript is imperative language 32
  33. 33. 35 CSS PARSER CSSOM
  34. 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. 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. 36. 13. Useful Resources
  37. 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. 38. Thank you 40

×