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, 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, will cover DevTools demo around following Topics:

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

Whether stepping through JavaScript, Debugging CSS, Testing REST API calls, or auditing page performance, the window of Chrome’s DevTools is there to help.

Whether I’ll be speaking or not at WordCamp Mumbai is not sure as its always hard for Organizers to Select sessions amongst so many awesome topics maintaining Attendees Flow of learning. I’ll make sure to post these tricks here on my blog.

[Update – 06-04-2018]

I had One hour Session at WordCamp Mumbai 2018, it was great experience for me, Thanks to Organizing team and Attendees. I’m yet to write detailed post about these tricks but you can find code demonstrated at my Github Repo. Please refer Notepad Point.txt (it has the flow we used in session)and Codes folder (for actual codes).