How to use Chrome dev tools when you don’t have access to a designer | John’s Tips 2024W6

Need to quickly edit the design of a UI but don't have a designer? Here's how you can with Chrome Dev tools

Proposing an idea you have for a software product always has more impact when you supply it with a mocked up image of how you expect it to look.

The problem with this is that you may not have access to a designer, or if you do, the idea you have may be in the very early stages, and it might not be the best use of the designers time. If, like myself, you are a PM and you need to do a case study for a job interview, then providing tailored screenshots of your idea will definitely gain you points in the interview process.

The main method I use in these scenarios to help increase the impact of my idea is to by using Chrome dev tools to edit the HTML of an existing User Interface. This has its limitations of course, but can prove extremely useful in a pinch.

I’ll use Prime Video as my example — my idea is simply to move the continue watching section to the top of the page just under the header image, so I don’t have to scroll all the way down to find it after I’ve logged in.

• First, open the page in question and go to the dev tools. You can open the correct tab in the dev tools directly by using the below shortcuts
  - For Mac: Command + Shift + C
  - For Windows: Control + Shift + C
  - Can also be found through the 3 dot menu on the top right of chrome, then More Tools, then Developer tools

• This is what you will end up with. If your dev tools opens as a popup or stuck to the right or left of the screen, I would suggest clicking the buttons highlighted in red to stick it to the bottom of your screen.

• Next you’ll want to click the “Select an element” arrow (circled below) and select the piece of the page closest to the part you want to change. This might not be exact, but we can refine it in the next step. I’ll pick the “Continue Watching” title.

• If all you want to do is edit some text, then this is as far as you need to go. All you need to do here is double click the Continue watching text (circled at the bottom above), input your own text and then hit Enter (Return) and your changes will be saved to the UI for you to screenshot. Don’t refresh the page or you will lose your changes.

• For our example, that’s not enough. We want to move this entire row, which includes the images of the shows I’m watching.

• So, next you need to hover your mouse over the elements box, and maybe scroll up or down until you find the highlighted piece of the screen matches everything you wish to move. You’ll ideally want the highest item in the nested list for Continue watching (notated by the arrows in the below screenshot)

• Next, right click this element, and edit as HTML.

• Use the Select all shortcut (Command + A/Control + A) to select all of this text, and then cut (Command + X/Control + X) the highlighted text. If you use copy and not cut, the original element will remain on the screen where it used to be.

• Next you need to repeat the scrolling and hovering in the elements box like you did in the earlier step, and find the place on the UI just below where you want to insert the piece you’ve just copied. If you choose the element above where you want it to go, you’ll have to scroll to the bottom of a bunch of text to paste what you’ve just copied.

• Finally, paste the cut text in the text box that opens up. For your own sanity, hit enter(return) a couple of times in the text box like I have, so you can easily paste the HTML Text. New blank lines like this are ignored by chrome, so don’t worry about adding too much.

• Click the mouse in the whitespace on the outside of the box to save your changes, and you are done!

Now for the finished product — no more scrolling!

If only the folks at Amazon would care a little bit more about user experience, and less about trying to push other shows on people.

For my past tips check out my weekly list tip here, or check out the hashtag #JohnsTipOfTheWeek on LinkedIn.