- Examine the developer tools
- Use the developer tools to locate and inspect elements
- Use the developer tools to edit HTML
By now, you're pretty familiar with HTML structural elements, and how they
relate to each other on the page. You might even feel pretty comfortable writing
your own valid HTML. But much of the time as developers, we'll be jumping in on
projects that are already in progress. We'll need a way to view existing HTML
and CSS, and potentially a way to play around with elements on live pages to see
how we might potentially adjust things. Luckily for us, most browsers have those
kinds of tools already built in, called developer tools
, or dev tools
for
short. In this lesson, we'll look at the dev tools
on Google
Chrome.
The Developer tools that browsers provide you are a great way to experiment with HTML and CSS, and immediately see how those changes are rendered in the browser.
For this lesson, please open the Wikipedia page for Alan Turing in Chrome.
Once the page is open, right click on the title of the page — the header
containing his name. You should get a list of options. We want to click on the
one that says Inspect
. This is going to bring up a window at the bottom of the
page that contains all of the HTML that makes up the Wikipedia page.
If you hover over elements, you should see different colored boxes appear over different parts of the page. We're going to hover over the HTML until we find the section that contains the title of the page ("Alan Turing"). It should look something like this:
<h1 id="firstHeading" class="firstHeading">...</h1>
There should be a drop down arrow next to the first <h1 ...>
If you don't
already see the text nested under that <h1>
, click on the arrow to expose it.
Right click that text and select Edit as HTML
.
A new window will pop up in Dev Tools where we can actually go in and type. Try deleting "Alan Turing" and replacing it with "Puppies Puppies Puppies." Once you're done, just click outside of the text window, and take a look back at the header in the browser. It should now say "Puppies Puppies Puppies."
If you refresh the page, your text will disappear. We're just editing HTML in our own web browser, not on Wikipedia's web server. Feel free to scroll around on the page and play with all sorts of different HTML elements and see what happens.
Now, right click on Alan Turing's picture and choose "Inspect". Right click on
the image tag in the HTML and again select Edit as HTML
. Let's replace the
entire <img>
tag with another image from a website. For example, you might
change it to this:
<img src="http://images2.fanpop.com/image/photos/9400000/Aaaaaawwwwwwwwww-Sweet-puppies-9415255-1600-1200.jpg" alt="Puppies">
Your puppy image should now be displaying on the page, but it's pretty big.
Let's add an attribute to our <img>
tag to set the image's size. It should
look like this:
<img src="http://images2.fanpop.com/image/photos/9400000/Aaaaaawwwwwwwwww-Sweet-puppies-9415255-1600-1200.jpg" width="200" alt="Puppies">
This attribute sets the width of the image to 200px and adjusts the height accordingly. Much better!
Feel free to play with other HTML elements and watch things change on the page.
If you want to attempt to change any of the styles of the page, take a look at the right-hand column. CSS, which stands for Cascading Style Sheets, manages all the styles of your page (think background color, font size, placement of different items on the page, etc).
Feel free to play around, check and uncheck boxes, change colors, change pixels. It's okay if you "mess things up". Just refresh the browser and it will all go back to how it was!