Practical Lab: Browser Internals Exploration

Objective

Look inside your own browser while it loads a page: its processes, the requests it makes, the protocol it uses, the storage it keeps and the work it does to draw. You only look. Nothing here changes settings.

Time: 30 minutes
You need: Windows, and Chrome or Microsoft Edge (both use Chromium). Firefox has similar tools, but menu names differ.

Safety rules for this lab

• Do not log in to anything. Use public pages that need no account, such as a news site or https://example.com.
• Do not paste anything you do not understand into the Console, and never paste secrets or text from strangers.
• Cookies shown in the Application tab can be login keys on sites where you ARE logged in. Do not copy or share them. Look at a site where you are logged out.
• Menu names and layout differ between browser versions. If you do not find something, use the search box in DevTools (Ctrl + Shift + P) or the browser's own help.

What to Open

Part 1: Which Browser Am I Running? (version page)

Type edge://version or chrome://version and press Enter. Read only. Write down:

1. Browser name and version: ________________
2. Operating system: ________________
3. Profile Path (compare with Section 5.2; hedge, it can differ): ________________
4. Command Line (look for flags; do not copy it anywhere): ________________

Close that tab. Do not use any other chrome:// or edge:// pages in this lab.

Part 2: The Browser's Own Task Manager (Section 1)

1. Open three tabs: https://example.com, a news site, and a video or map site (do not log in).

2. Press Shift + Esc. The browser's Task Manager opens.

3. Find rows for Browser, GPU Process, and one row per Tab. You may also see rows for extensions and utility or network processes (names differ).

4. How many rows do you see? ________________

5. Which row has the most Memory footprint? ________________

6. Is there a GPU Process row? ________________

Optional safe test: Right-click the column header and add Process ID. You will use it in Part 3.

Do not click End process on the Browser row. You may end a tab row for a page you do not need; that tab will show a "crashed" page and the others will carry on. That is crash containment (Section 1.2). You can close that tab afterwards.

Part 3: Windows Task Manager (Chapters 9 and 11)

1. Press Ctrl + Shift + Esc. On the Processes tab, find your browser group (for example "Microsoft Edge (18)").

2. Expand it and count the entries.

3. Open the Details tab and sort by Name. Find the many msedge.exe or chrome.exe lines.

4. Right-click any column header, choose Select columns, and tick Command line (this is read-only). Look for --type=renderer, --type=gpu-process and --type=utility.

5. How many chrome.exe / msedge.exe processes? ________________

6. Match two PID numbers from Part 2 to rows here: ________________

7. Which --type= values did you find? ________________

8. Does the process with no --type= flag have the lowest PID or the longest runtime? (It is the main browser process.) ________________

Untick Command line afterwards if you wish (that only changes the display).

Part 4: DevTools Network Tab (Section 4)

1. Open a new tab with https://example.com (or any public page). Press F12. Click the Network tab.

2. Reload with F5. Rows appear: one per file requested.

3. Right-click the column headers and tick Protocol (it may be hidden by default).

4. Click the first row (the page itself). In the right panel see the Headers tab: the Request URL, Request Method (GET), Status Code (200), and the request and response headers.

5. Click the Timing tab: find bars such as DNS Lookup, Initial connection, SSL (TLS) and Waiting for server response. (A repeat visit may show no DNS or SSL time because the connection was reused.)

6. Look at the waterfall column: it draws each request as a bar on a timeline.

7. Protocol of the main page (h2, h3, http/1.1): ________________

8. Status code of the main page: ________________

9. Content-Type (response header): ________________

10. Number of requests and total transferred (shown at the bottom): ________________

11. Timing: DNS Lookup ____ ms, Initial connection ____ ms, SSL ____ ms, Waiting ____ ms

12. Does any row say "(disk cache)" or "(memory cache)" under Size? ________________

Now tick Disable cache (this only applies while DevTools is open) and reload; compare the numbers in 15. Untick it afterwards.

Try a larger public site and filter by type (Img, JS, CSS). Click a row of an image and look at its Cache-Control header.

Part 5: Elements and Console (Sections 2 and 3)

Elements tab. Click Elements. This is the live DOM tree (Section 2.1), with the page's CSS rules beside it in the Styles pane and the final values under Computed. Hover over a node: the matching box lights up on the page. Do not edit anything on pages you care about; edits here are temporary and vanish on reload, but keep to just looking.

Console tab. Click Console. Type each of these harmless, read-only commands and press Enter:

document.title
location.origin
location.protocol
navigator.userAgent
document.cookie.length
performance.getEntriesByType("navigation")[0].duration

(The old performance.timing also works in many browsers but is marked as deprecated; getEntriesByType is the newer way. Output names can differ by version.)

18. document.title shows: ________________
19. location.origin shows (compare with Section 6.1): ________________
20. navigator.userAgent mentions which words (Chrome, Edg, AppleWebKit...)? ________________
21. Page load duration (ms): ________________

Notice that document.cookie.length counts only cookies not marked HttpOnly (Section 5.1).

Part 6: Application Tab (Section 5)

Click the Application tab (you may need the >> menu if hidden). In the left list open:

• Local storage and Session storage: click the site name and look at the key and value pairs. (Many sites keep few or none. Do not copy values.)
• Cookies: select the site. Look at Name, Domain, Expires, and the columns HttpOnly, Secure, SameSite.
• IndexedDB and Cache storage: expand them and see whether the site uses them.
• Storage (top of the list): a bar shows how much space this site uses.

22. How many cookies does the site hold? ________________
23. Do any have Secure ticked? HttpOnly? ________________
24. Does the site use localStorage? IndexedDB? ________________
25. Open a second tab of the same site: is Session storage identical or empty? (Section 5.4) ________________

Do not click "Clear site data" unless you are fine with being logged out of that site; on a public logged-out page it is harmless (undo: simply load the page again).

Part 7: Performance Tab (Sections 2 and 3)

1. Click Performance. Press the Record and reload button (a circular arrow icon), wait for the page to load, and it stops by itself.

2. Look at the timeline. The Main row is the main thread (Section 3.2). Long bars are tasks. The tool flags long tasks (over about 50 ms) with a red corner.

3. Click a task and open the Summary or Bottom-Up view: how much time was spent on Scripting, Rendering and Painting?

4. Roughly how long was the longest task? ________________

5. Which category used most time (Scripting, Rendering, Painting, Loading)? ________________

What Should Happen

• Parts 2 and 3 show one browser, many processes with the same program name.
• Part 4 shows each page as many requests, with a protocol such as h2 or h3 and Timing parts that match Section 4.
• Part 5 shows the DOM and your page's origin.
• Part 6 shows the storage places of Section 5.
• Part 7 shows main-thread work in the same stages as Section 2.

Interpretation Guide

Follow-Up Questions

1. Why does closing one tab not close the others, even though they are the same program (Section 1.2)?
2. Why do a few sites in your Network tab show h3 while others show h2?
3. A page loaded 80 requests. Why is that not necessarily slow (think of Section 4.3)?
4. What would you look at in the Application tab to see whether a site recognises you between visits?
5. Name three facts from this lab that you could not have learned by only looking at the page.