Lab 2: Browser DevToolsWinter 2023
This lab seeks to help introduce you to the Mozilla Firefox GUI, Developer Tools, and basic HTML and JavaScript. As in the previous lab and project, you will set up Docker for use and then learn how to open the Firefox GUI, explore webpages with Developer Tools, and use the Web Console.
Useful Links
- Docker setup guide
- Starter code
- Autograder
- Firefox Developer Tools Documentation
- HTML Documentation
- JavaScript Document Methods
Setup
If you haven’t already, follow our Docker guide to learn how to set up Docker on your computer. This will be useful both for this lab as well as for the remaining projects and labs.
To get the code for this lab, create a repo using the GitHub template. Make sure to make this repoistory is private. Clone the repoistory onto your system, then open it in VS Code. If you successfully set up Docker, you should be greeted with a pop-up in the bottom right asking you to reopen the directory in the development container; do so now.
Tasks
This lab contains five exercises. The first task involves understanding how to use the docker container for Firefox. Tasks 2 and 3 involve the use of Firefox’s Development Tools. Task 4 requires you to create and open an HTML file in the Firefox GUI, and task 5 exposes you to different JavaScript Document methods. The next three tasks require the utilization of functionality provided by the Firefox GUI.
Opening the Firefox GUI
After opening the Lab 2 folder that you cloned in VS Code’s Remote-Containers,
it is important to understand how to access the Firefox GUI. Let’s take a look at
the docker-compose.yml
file in the .devcontainer
directory. Observe that the Firefox
GUI will be served on either port 3880 with localhost or port 3881 with VNC. To access the GUI,
open your web browser and type http://localhost:3880
, or vnc://localhost:3881
in the search bar; you should observe the following:
Task Navigate to the second tab that
is titled “Firefox Privacy Notice”.
Copy the URL of the tab into the file privacytab.txt
in VS Code.
privacytab.txt
is now ready to be submitted to the autograder.
Copying and Pasting From Your Local Machine to the GUI
noVNC, the VNC Client allowing you to view the Firefox GUI in your browser, provides some useful features that will come in handy for the Web Project. Look for the collapsible tab on the right side of the Firefox GUI. When you expand it, it should provide the following options:
One tool of particular importance is the clipboard. The clipboard allows you to copy from your local machine to the Firefox GUI; when you want to be able to copy and paste from your local machine to the GUI, copy whatever you want locally, open the clipboard tool and paste whatever it is you copied. You can now paste that content in your GUI.
Firefox Page Inspector
Part 1: Find the Secret String
A Web Inspector or a Browser Inspector is part of the Development Tools suite. It helps to identify and locate what’s inside the web page in a browser. With the Web Inspector, we can explore and manipulate the browser’s code to see the screen’s sudden changes. This is also popularly referred to as “inspecting an element”. The inspector shows the CSS, HTML, and JavaScript of the web page so that the developer or the tester can analyze the web page and use the browser developer tools’ features to run checks, observe network activity, and see what information the website is caching, among other things.
Project 2 requires the use of Firefox’s Page Inspector for a host of reasons, so it’s important to familiarize yourself with how to access it. To open the Firefox GUI Page Inspector, right-click on a webpage and click ‘Inspect’.
Task Navigate to the EECS 388 Lab 2 Spec in the Firefox GUI. The webpage has a secret message embedded in the HTML that you can see through the Page Inspector. Copy the secret message to
inspector_message.txt
.
Hint: The Hidden Message is contained in an HTML comment underneath the ‘Find the Secret String’ subheading in the Lab 2 spec. Highlight the Part 1: Find the Secret String
subheading, right click, and then click Inspect.
inspector_message.txt
is now ready to be submitted to the autograder.
Part 2: Open an HTML File in the Firefox GUI
As you saw in previous assignments that leverage docker,
your assignment files are stored in the /workspaces/ASSIGNMENT_NAMEandNUMBER
directory.
Parts of project 2 will require you to open files located in your directory,
so we’ll walk through how to open files in the GUI.
Task To open a file, press and
hold CTRL + o
, this should open an ‘Open File’ window. From here, click
‘Other Locations > Computer > workspaces > lab2 > part2.html’. After this, click ‘open’ to
open part2.html
in the GUI. Now, copy the path of the file that you see in the browser’s
search bar into filepath.txt
.
filepath.txt
is now ready to be submitted to the autograder.
*Hint: it should begin with file:///...
Part 3: Edit a Script Tag and Fetch the Cookie
HTTP Cookies are an essential part of the modern internet. They let websites remember you, your website logins, shopping carts and more. However, if a webpage is misconfigured, they can be used to carry out dangerous attacks.
We can set cookies on a webpage through HTML <script>
tags.
Task Open the part3.html
file in VS Code.
Fill in document.cookie
with the string “eecs388”
What you’ve done is changed the name of a cookie that will be stored by the webpage.
We can view the cookies a webpage stores in our browser using the Development Tools suite.
To do this, first open part3.html
in the Firefox GUI just as you did in the last task.
After doing this, open Dev Tools, and navigate to the ‘Storage’
tab. Observe the available tabs below:
Task Once on the Storage tab of the Development Tools suite,
navigate to ‘Cookies’ on the sidebar. Find the cookie with a value equal to ‘eecs388’.
Now, open cookie.txt
in VS Code. Fill in the information about the cookie you created in
the respective fields of cookie.txt
.
cookie.txt
is now ready to be submitted to the autograder.
The Firefox Web Console and Element Selection
An important feature of modern web browsers is the Web Console. It logs information associated with a web page: network requests, JavaScript, CSS, security errors and warnings as well as error, warning and informational messages explicitly logged by JavaScript code running in the page context. Additionally, it enables developers to interact with a web page by executing JavaScript expressions in the context of the page. This means that instead of having to go back to the source script each time, we can execute JS in the browser and watch what is returned in real-time.
In this task, you’ll be using the Firefox GUI’s Web Console to interact with
elements contained in part4.html
. To do this, we’ll utilize an important
paradigm of web programming: the Document Object Model (DOM).
The Document Object Model (DOM) connects web pages to scripts or programming
languages by representing the structure of a document—such as the HTML
representing a web page—in memory. DOM methods allow programmatic access
to the tree. With them, you can change the document’s structure, style,
or content.
To access the DOM, we can use the Document
interface, which serves as the
entry point to a web page’s content. Useful DOM methods can be found on the
Document() Interface methods page.
part4.html
is a short page that contains information on US states, cities and
counties. Please open this page in the Firefox GUI. After the page has loaded,
open the Development Tools suite and navigate to the Console tab. Here, you will write
commands to target specific parts of the HTML content.
Task Write a command that returns all elements with
the class name state
. It should return an HTMLCollection
of length 3.
After ensuring your command’s correctness, copy your command into command1.js
after let answer =
.
Task Write a command that returns all <h1>
elements.
It should return an NodeList
of length 3.
After ensuring your command’s correctness, copy your command into command2.js
after let answer =
.
Task Write a command that returns the third child element of the counties div
.
It should return a div
of class ‘county’, and the heading of thatdiv
should be Suffolk County.
After ensuring your command’s correctness, copy your command into command3.js
after let answer =
.
Hint: to access the children of the div
with the id ‘counties’, use the .children
property
command1.js
, command2.js
, and command3.js
are now ready to be submitted to the autograder.
Submission
Submit the following files to the Autograder by the deadline:
privacytab.txt
inspector_message.txt
filepath.txt
cookie.txt
command1.js
command2.js
command3.js