The Network panel on a page you are debugging

Open the panel, then load the page

Use the lab browser, the same spare profile you would trust with a proxy, and open DevTools on http://127.0.0.1:3000. Select Network. The list is empty until something happens, and it stays empty of the previous load if you opened DevTools late. Reload the invoice page. The list fills from top to bottom in time order: the document, the stylesheet, the script, and the fetch that asks for the invoice JSON.

This is the browser’s own view. You do not need Burp running to see it, and you should try it once with the proxy off so you know which tool is showing you the row. Both tools should agree on method, path, and status. If they do not, you are looking at two different loads, and the timestamps will say so.

The columns that answer the first question

Name is the path. Status is the HTTP status, or a browser word such as canceled, which the next lessons dwell on. Type distinguishes a document from a script from a fetch. Size and time matter when the bug is “slow” or “blank for ten seconds,” and they are distractions when the bug is “wrong owner.” Start with name, status, and type. Add a column when the question needs it. Initiator is one of those columns, and it has its own lesson.

Click the JSON row once. The side panel opens on that request. Leave the side panel for the request-and-response lesson. In this lesson the skill is the list: you can point at the row the screen depended on, and you can see whether it happened once.

• Name: /api/invoices/1042
• Status: 200
• Type: fetch or xhr
• Account: Avery, in this profile
• URL in the address bar: /invoices/1042

A filter you can say out loud

Chrome’s filter box has a small language. method:GET keeps reads. -url:static hides the folder. 127.0.0.1 keeps you honest if the browser ever talks to somewhere else. You can combine them in one box. Firefox’s Network filter is a substring, so /api/invoices is the equivalent for this lab, and the minus syntax will not do what Chrome does. Write down which browser you used.

A filter that hides the row you need is the most common way to “lose” a bug. If the list looks too clean, clear the box and look again. The recording is still there. Preserve log, in the next lesson, is the matching habit for navigations that wipe the list.

# Chrome filter box
127.0.0.1 method:GET -url:static

# Firefox filter box
/api/invoices

Worked case: the invoice page’s shopping list

Reload http://127.0.0.1:3000/invoices/1042 as Avery with the Network panel open and the proxy either on or off, noted which. Without a filter, write the names in order. Then apply the filter and write what remains. You want the document and GET /api/invoices/1042 still identifiable, and the static files either listed or explicitly hidden by a filter you wrote down.

If you see two fetches for the same API path, do not collapse them. Two rows are a fact about the script, and they are the kind of fact this panel is for. Note both statuses. The initiator lesson is how you find out which line of app.js sent each one. For now, the duplicate is enough of a finding to keep.