If you are like most Product Managers you probably have your suite of favorite tools that you use to manage the entire product development lifecycle. I don't need to list everyone of them but the most commonly used and recommended tools include products in the following categories:
- Maintaining product vision and roadmap (e.g. Google Docs)
- Brainstorming (e.g. Popplet, Mural.ly)
- Creating flow diagrams (e.g. Lucidchart)
- Creating wireframes (e.g. Balsamiq, Omnigraffle)
- Building a prototype (e.g. Invision)
- Managing feature backlog (e.g. JIRA, Trello)
- Analytics (e.g. Google Analytics, Heap)
The above are all great tools for what they are supposed to do. However, there is one tool that I find incredibly useful, requires no additional downloads as it comes built-in (FREE) with the browser, and will 100% help you win major credibility with your engineering team. It is great for a number of use cases such as:
- Iterating on an existing page and simulating across devices
- Debugging, triaging, and routing bugs
- Keeping tabs on your site's performance
Yes, you probably guessed what it by now: I am talking about the Chrome Dev Tools. The best part is that you need ZERO engineering resources to get a lot out of even the basic features. All other browsers have their own versions of Dev Tools but for the sake of this discussion I will focus on Chrome as I find it the most intuitive to use.
As a PM, anytime you are playing around with your site, I would recommend to keep your dev tools open. The easiest way to open Dev Tools is with the shortcuts (Ctrl+Shift+I for Win or Cmd+Opt+I for Mac). Once open you will see a number of tabs. While a developer may use most of the tabs, as a PM with moderate technical skills, I mostly live in Elements and Console for basic iteration and debugging needs and Network and Sources tabs for more advanced troubleshooting and performance management.
Intro to the Elements tab (Use Case: Real Time Product Iteration)
Have you ever wondered what you as a PM would do if you could give Google.com a facelift? Well, what if Google was actually a purple background and if you could move around the furniture a bit to see what it looked like. Well, with the dev tools, you can do that quite easily without any engineering resources and with a rudimentary understanding of basic HTML and CSS.
What if Google were purple?
I will show you how to do it in my next post but until then, see if you can figure out how to replicate the above!