NOTE: This post is the second part in a multi-post series designed for web product managers who'd like to have a bit more technical chops to do more for their product with less without learning how to code. The background post describing what the dev tools are can be found here:
Let's say that you are the Product Manager for Google.com, which at the time of writing this post looks like this:
You and your designer are experimenting with an idea that would require changing the "Google Search" button to match the color of the Golden State Warriors. The background color would be gold and the text is midnight blue. Instead of "Google Search" lets try to change the label to "Strength in Numbers". You are also wondering what it would look like on an iPhone 5 as many of your users have small handsets.
You could go to your front end engineer and distract them from their current workflow and have them make the changes on their local environment. Alternatively, you could make the changes yourself directly from dev tools to see how it would look like in just a few seconds!
This is how you would do it:
- Right click on the "Google Search" button and click on "inspect"
- In the "Elements" tab, change the input value to "Strength in Numbers". Hit enter
- Go over the the Styles tab. Looks like the background color uses css properties background-image and background-color. Background color is easier to modify
- Hover over background image (both top and bottom gradients) and uncheck them (see screenshot)
- Click on background color and type in the color "yellow"
- Click on the "device toolbar" on the dev tools toolbar (next to "Elements") and select iPhone 5
Real time DOM changes
How your changes would look on the web
iPhone 5 in portrait mode
iPhone 5 in landscape mode
Looks quite nice actually! In most cases, it will require a bit of figuring out to understand how the DOM is structured but you should be able to use the up and down arrows to traverse the DOM.
This is a relatively basic use of the "Elements" tab but if you are interested in learning more, definitely play around with it more and of course look out for detailed and advanced tutorials on the web.
If you find this helpful, feel free to leave some comments below.
Next Up: How to use the JS console to triage and route bugs