Product Management Tech Tips (Part II): How to make live changes to your page without engineering resources

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:

1. Right click on the "Google Search" button and click on "inspect"
2. In the "Elements" tab, change the input value to "Strength in Numbers". Hit enter
3. 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
4. Hover over background image (both top and bottom gradients) and uncheck them (see screenshot)
5. Click on background color and type in the color "yellow"
6. 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

3 Things I didnt even know existed before I started at GA

Now that my bootcamp is over (sadly) I have finally had a moment to decompress and really think about all the things that I learned! While listing everything would be a very long article, here are couple of highlights from the later part of the career.

Backend as a Service: Holy crap, this blew my mind. With services such as Parse (Facebook) and Firebase (Google), you can push your entire back end code to the cloud! Which means you full stack app only needs client side code and everything else is taken care of. MIND BLOWN!!

Amazon run the internet: Most people think of Amazon as the undisputed leader in e-commerce and logistics. What many people dont know that Amazon also pretty much runs the internet's infrastructure without which the internet would be a sad place. The number of services that AWS provides is mindboggling and makes the ecommerce business seem like a total front for something far more dangerous.

Ionic: While I personally didnt use it, many of my classmates did and it seems really amazing. Ionic allows the developer to create an iOS app in JS without having to write in Swift/Objective C.