FireFox Developer Tools is a Firefox add-on that lets you dynamically examine or modify the content and styling of web pages. It comes pre-installed with the FireFox browser. To open it, right-click an element and choose Inspect Element. The Chrome Web Inspector tool behaves the same way, and comes conveniently built-in with Chrome. You can launch both by hitting F12 while in your browser. The slides below show a few different views that you'll see in the Chrome DevTools browser add-on (you may see extra features, but can close out of any you don't see on the following slides for now).
Chrome DevTools Source Tab
On both Chrome and FireFox, you'll see a tab that shows all of your source files in the current directory,
relative to the file path you have in your browser's file path (where URL's are). Below is a screenshot
that is similar to what you would see when clicking on the aboutme.html file from the
previous slides.
Modifying the HTML in the Browser (Elements Tab)
One handy way to quickly test the effects of changing HTML tags is to edit the HTML directorly in the browser. When clicking on the "Elements" Tab in Chrome, you can do so by right-clicking on the HTML you're looking at and choosing the option to edit HTML (this may be worded differently between Chrome, FireFox, and other browsers). Then the HTML will be editable - after making any changes (new tags, changing tags, etc.) you should see the effects on your page immediately!
Modifying the CSS in the Browser (Elements Tab)
In addition to being able to view/modify HTML in the browser, you can also edit styles on the page. This is especially helpful when testing different color combinations, fonts, layout methods, etc. You will likely find the styles pane especially useful in this class! In Chrome and many other browsers, the "Styles" pane offers auto-complete features so you can learn more about different style attributes without referring to Google so often.
Final Words on Using Your Browser Development Tools
As you may find, there are many features offered by browser development tookits. Don't worry about understanding all of them - many you won't need to use in this class, and we'll introduce the ones that are helpful when we learn how to integrate JavaScript to add behavior to our webpages. For now, focus on getting familiar with the Elements and Styles panes, and play around a bit! You may find some neat CSS styles along the way which can be particularly useful for debugging homework assignments or finding inspiration for you creative project pages. Ask on Piazza if you run into any questions, but don't forget to first refer to your browser's official documentation of the dev tools as your primary resource!