Steps:

1. Open either Google Chrome or Mozilla Firefox.
2. Find and navigate to a simple webpage, one that looks like something a beginner would make -- text, a few links, a few images, etc. Make note of the URL, and include this in your admin log.
3. Open the Developer Tools.
4. In a separate window/tab, open either....
   • This page: https://developer.chrome.com/devtools
   • Or this one: https://developer.mozilla.org/en-US/docs/Tools
   and read it. (Skim over parts that you do not understand.) Make note of what parts you do and do not understand, and include this in your admin log.
5. On that page, there will be links to information on the Elements and Network portions of the Developer Tools. Navigate to those links and read them. (In Firefox, it's Inspector, instead of "Elements".) Make note of what parts you do and do not understand, and include this in your admin log.
6. Go back to the tab/window from Step 2.
7. In the Elements tab, look at different elements of the page. You can expand or collapse elements, as elements are nested within one another.
8. Go to the Network tab and reload the page. Look at a few (3-5) different request/response pairs, and save the text from those.

Upon Completion:

• Check out another aspect of Developer Tools that you and your lab partner find interesting.
• In your logs, complete the entries for this lab, which should include the following discussion questions, along with your answers:
  1. Briefly describe the Elements/Inspector and Network components of the Developer Tools and explain what they tell us.
  2. Which aspects of networking can we examine in the Developer Tools? How do you know this? (By "aspects of networking", I mean things like application, presentation, session, transport, etc. The layers of the OSI and TCP/IP models.)
  3. Choose one of the request/response pairs you documented above and tell me...
     • (From the Request headers), the values for the "accept" and "accept-encoding" headers
     • (From the Response headers), the value for the "content-type" header
     Elaborate a bit. What are these values telling us? (You can look this up on Google) Which OSI layer does this concern, primarily?
  4. Which application protocol(s) are we using here? How do you know?
  5. Which aspects of networking can we not examine in the Developer Tools? Where would we need to look for these instead?
  6. Other than Elements and Networking, which aspect of Developer Tools did you examine and why?
  7. Which parts were easiest to understand, and why?
  8. Which parts were hardest to understand, and why?
  9. Some students find themselves wondering how the activities in this lab pertain to the rest of the material in this class. What do you think?
  10. What are some of the main questions that you have about the material in this lab, moving forward?