Informed Librarian Online -- A Bit of Bytes -- www.informedlibrarian.com
Hidden Elements: Chrome DevTools for
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
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
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
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.
Copyright 2017 by Dana
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.