▶ TECH TALK
Hidden Elements: Chrome DevTools for Non-Developers
by Dana DeFebbo
Chrome DevTools has often been characterized as a web developer’s best friend, but the average person unlikely even knows what it is. This month I will show you how to take advantage of Chrome DevTools even if you are not a developer.
Chrome DevTools is a set of tools built into the Chrome browser that allows you to view and edit the code being rendered on the site you are viewing. Web developers use this tool to debug code, test out code without permanently changing the original code, identify layout issues, etc.
You can access DevTools by either right clicking anywhere on a webpage and selecting Inspect from the menu, or you can click on the Chrome menu in the top right of Chrome and select More Tools > Developer Tools. The last way to open DevTools is with the keyboard shortcuts. On Windows use F12 or Ctrl + Shift + I and on a Mac use Cmd + Opt + I.
Once opened it will look something like this:
A closer view of the DevTools:
DevTools is a text editor and can be completely edited to make changes on the page. These changes are only happening in your browser and they are only visible to you. Once refreshed, the page will revert back to the original code.
So how it this helpful to a non-developer? If you work in a library where you create content for the library’s website, do design or user experience, but don’t have much to do in terms of the coding behind it, you can use these DevTools to experiment with how you would like things to look and provide examples to your web developer without needing access to the actual code.
Change content on page
You can change pretty much anything on the page from the font size, color, text, layout, etc.
When you open DevTools, you can double click on any element and enter your own value for it. You can even delete code, rearrange it and change the text. You can see in the examples below, I was able to edit the logo text from Informed Librarian Online to Dana’s Princess Palace. I was also able to change the colors on the page from red to purple.
If you are new to learning HTML and CSS, using DevTools to look at and modify existing web sites is a great way to practice your coding skills as well as see examples of how other people have accomplished a specific look with HTML and CSS.
View web page in various device sizes
You can use DevTools to view what a website looks like in various mobile formats without needing an actual mobile device. DevTools can emulate various screen sizes, so you can see what a site looks like on a Galaxy 7 Edge or a iPhone 6 Plus. To access this feature, open DevTools and then click on the devices button (highlighted in yellow below).
This is an example of what the Informed Librarian site looks like on an iPhone 6 Plus.
This feature is really helpful to letting you know if your site is properly formatted for mobile devices.
Bonus trick: Reveal a masked saved password
If you have ever had Chrome save your password for an online account and got used to not typing it in to the point that you have forgotten what your password is, there is a way to reveal what is behind those little asterisks.
To reveal your password, you would place your cursor in the password field at the end of the asterisks, right click and select Inspect. This will take you to the place in the code where the field is. In the HTML code in the DevTools, you will see a line that says <input type =”password”. Double click on the word password and change it to text. It will look like this: <input type = “text”. Then hit enter and on the page, the password will be revealed. This trick has helped me a number of times when I’ve had to log into something on a different browser for testing purposes and my password was not saved on the other browser.
About the author:
Dana DeFebbo is currently the Web Services Librarian at the Tarlton Law Library at the University of Texas at Austin School of Law. She received her MSIS for the State University of New York at Albany and has worked in academic libraries for the past 11 years.