Developing WordPress Frontend with Chrome Developer Tools

This is a proposed outline for WordCamp Mumbai 2018 Speaker Application.

I’m yet to post about my talks at WordCamp Kanpur and Ahmedabad; both are in the draft along with a long list of heading items that need detailing. So instead of putting topics in the draft and piling them up, I decided to publish and continue as a series of blog posts.

Intended Audience: Designers / Developers
Level of Understanding: Beginner / Intermediate

The audience may already be familiar with the basic features of the Chrome Developer Tools: the DOM inspector, styles panel, and JavaScript console. But there are a number of lesser-known features that can dramatically improve workflows.

This session will be demo-based and will cover DevTools demos around the following topics:

  • Console Tricks for Debugging
  • Event Listeners
  • Accessibility checks
  • Workspaces for quick local development
  • Network throttling for testing your web app with low-speed users
  • Performance tuning of a web page
  • and some tricks from the Animation, Sensors & Rendering tabs of DevTools.

Whether stepping through JavaScript, debugging CSS, testing REST API calls, or auditing page performance, Chrome’s DevTools window is there to help.

Whether I’ll be speaking or not at WordCamp Mumbai is not certain, as it’s always hard for organizers to select sessions among so many awesome topics while maintaining the attendees’ flow of learning. I’ll make sure to post these tricks here on my blog.


[Update – 06-04-2018]

I had a one-hour session at WordCamp Mumbai 2018; it was a great experience for me. Thanks to the organizing team and attendees. I’m yet to write a detailed post about these tricks, but you can find the code demonstrated at my GitHub repo. Please refer to Notepad Point.txt (it has the flow we used in the session) and the Codes folder (for actual code).