Project 4- Using Developer Tools to see How the Website Works Return to your Food Fusion website. Our goal is to gain a better understanding of how this website is performing in terms of speed and screen size responsiveness. You should have already completed Project 3 before this one. As you complete the tasks, youll save your screenshot images into a Chapter2/project/images folder. Then create an HTML page called index.html inside the chapter2/project/ folder, and insert all your screenshots, including paragraphs above each one with the Screenshot name. (Replace X with the correct letter from the instructions below. Or, even better, put the images in

elements with the titles in

elements. Setup Use the appropriate URL to access your Project 3 index.html page from the web server, using the Chrome browser. Open the Chrome Developer Tools (Right-click on page Inspect). Step 1. Examine index.html page elements using Elements tab. Using the Element Selector option, select the nav element on your page. Use the Styles tab to temporarily modify the nav element by making its background green and text color orange. You may have to add a style rule here, with the + button. Take a screenshot that shows the modified page on the left, with the Developer Tool code on the right. Label it Screenshot A.

Step 2. View the index page as it would appear on various devices, using the Device toolbar. Take the following screenshots:

Screenshot B - index page viewed as on iPhone 5, showing the device frame, in portrait mode

Screenshot C - index page viewed as on Nexus 6P, showing the device frame, in landscape mode (rotated)

Screenshot D - index page viewed on custom Responsive screen, sized at 300px wide by 500 px tall

Step 3. Examine the network requests associated with retrieving your breakfast.html page. Still showing the index page, select the network tab in Developer tools and clear any results. Take the following screenshots

: Screenshot E - initial network screen empty, showing no data

Screenshot F - network screen after choosing the Breakfast menu option from the index page. The network screen should now show all the requests associated with retrieving the breakfast page. Screenshot G - network screen showing breakfast.html data, sorted by size, with largest response at the top - if the size is cached you should clear you cache.

Screenshot H - network screen showing breakfast.html data, sorted by time, with longest response time at the top

Step 4. View the request sent when you click the survey.html Submit button. Change pages to the survey page. Fill out the survey. Clear the data from the network tab, and then click the survey Submit button. The network screen should show the request. Doubleclick on the main request to view the details, specifically the Query Parameters section. Screenshot I - Query parameters section of the Request, showing your form parameters and the values you selected.