MTH 4380 Labs

Lab 2: Browser DevTools

Fall 2026 ·

This lab seeks to help introduce you to Developer Tools and basic HTML and JavaScript.

Useful Links

Setup

Tasks

You will write your answers for Part 1 in submit.toml. You will write your answers for Part 2 in the task<N>.js files.

Part 1: Page Inspector

Find the Secret String

This lab aims to introduce you to your browser's Developer Tools. In most browsers, these can be accessed with a right click, then selecting ‘Inspect’. If this option is not visible, it may need to be activated in your browser settings.

The Developer Tools of each browser are slightly different, so refer to the documentation for DevTools in Chrome, Firefox, Safari, Edge, or the other browser of your choice.

A Web Inspector or Browser Inspector is part of the Developer Tools suite. It helps you identify and locate what is inside a web page. With the Web Inspector, we can explore and manipulate the browser's view of the page and watch the screen change. This is popularly called “inspecting an element”. The inspector shows the CSS, HTML, and JavaScript of the page so that a developer or tester can analyze it, run checks, observe network activity, and see what information the site is caching, among other things.

Later projects require the page inspector for a number of reasons, so it's important to familiarize yourself with how to access it. To open it, right-click on a webpage and click ‘Inspect’.

Task 1 Navigate to the MTH 4380 Lab 2 Spec in the browser. The webpage has a secret message embedded in the HTML that you can see through the Page Inspector. Copy the secret message into submit.toml.

Hint: The hidden message is contained in an HTML comment underneath the ‘Find the Secret String’ subheading in the Lab 2 spec. Highlight the Find the Secret String subheading, right click, and then click Inspect.

Fetch a Cookie

HTTP cookies are an essential part of the modern internet. They let websites remember you, your logins, your shopping carts, and more. However, if a webpage is misconfigured, they can be used to carry out dangerous attacks.

Task 2 Open lab.mth4380.tech/mungle in your browser. We can view the cookies a webpage stores in our browser using the Developer Tools suite. Open DevTools and navigate to the ‘Application’ tab to find the site cookies (the cookies may be in a different tab, such as ‘Storage’, depending on your browser). On the Application tab, select ‘Cookies’ in the sidebar. Find the cookie named mth4380. Copy the information about that cookie into submit.toml. When asked to provide a binary cookie attribute, simply put true or false.

Change a Cookie's Value

Cookies are stored in your browser and are sent with HTTP requests to the server that set them. Since they are stored on your browser, they can be modified by the client. This can be useful for testing, but it can also allow attackers to induce behavior that the server did not intend.

Task 3 Modify the cookie from the previous task to have value isawesome and the path set to /cookie. Then make a request to lab.mth4380.tech/cookie. If successful, you should get back a secret password. Copy the secret password into submit.toml.

Part 2: The 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 messages explicitly logged by JavaScript running in the page. It also lets developers interact with a page by executing JavaScript expressions in the context of the page. Instead of going back to the source script each time, we can run JS in the browser and watch what is returned in real time.

In this part you will use the Web Console to interact with elements contained in part2.html. To do this, we'll use an important paradigm of web programming: the Document Object Model (DOM). The DOM connects web pages to scripts or programming languages by representing the structure of a document, such as the HTML of a web page, in memory. DOM methods give programmatic access to that tree. With them, you can change the document's structure, style, or content.

To access the DOM, we use the Document interface, which serves as the entry point to a web page's content. Useful DOM methods are listed on the Document interface methods page.

part2.html is a short page with information on US states, cities, and counties. Open it in your browser. After the page has loaded, open the Developer Tools suite and go to the Console tab. There you will write commands that target specific parts of the HTML content.

Task 4 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 task4.js after let answer =.

Task 5 Write a command that returns all <h1> elements. It should return a NodeList of length 3. After ensuring your command's correctness, copy your command into task5.js after let answer =.

Task 6 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 that div should be Suffolk County. After ensuring your command's correctness, copy your command into task6.js after let answer =.

Hint: to access the children of the div with the id ‘counties’, use the .children property.

Part 3: Local Files in the Browser

HTML is the standard language for creating and structuring web pages, and nearly every page you visit is written in it. You can verify this by visiting a website, opening the page inspector, and viewing the page source; this is the HTML your browser uses to build what you see on screen.

Interpreting, rendering, and displaying HTML is one of the browser's most important jobs, and it is not limited to the internet: you can also use your browser to view HTML files stored on your computer. This is useful for testing and debugging, and for viewing pages you are building without uploading them to a server.

Task 7 Create an HTML file that contains the text local files are great! and save it as task7.html. You can verify your file by opening it in your browser and making sure the text is displayed correctly.

To view the file in your browser, open a new tab and press Ctrl/Cmd+O to open a file chooser, then find your HTML file and open it. Alternatively, enter file://(...) in the URL bar, replacing (...) with the full path to the file, such as /path/to/lab2/task7.html.

If you are using WSL and your file lives in the WSL filesystem, enter the path like this: file://wsl.localhost/<wsl-name>/(...).

To find <wsl-name>, run wsl -l -v in PowerShell and use the value in the NAME column where the STATE column says ‘Running’. For example, given the following output, the path is file://wsl.localhost/Ubuntu/(...):

PS C:\Users\YourUsername> wsl -l -v
NAME      STATE           VERSION
Ubuntu    Running         2

Submission

Submit the following in a .zip through gradescope: