Tools · Web testing tools · 20 / 23
The initiator column: which line sent this request
Initiator names the parser, a redirect, or a script location for each Network row. On the canceled note save it points at app.js, which is how you know the navigation and the POST came from the click handler and not from the browser’s address bar.
Turn the column on
The Initiator column is not always visible. In Chrome, right-click the Network header row and enable Initiator. In Firefox, the Initiator or Cause column is the same idea: who asked for this URL. Reload the invoice page once so you can see the quiet case. The document’s initiator is your navigation. The script and the stylesheet say parser. The invoice JSON says the script, because app.js fetches it.
That quiet case is the control. When you click Save note, the new rows should not all say parser. If they do, you are looking at the wrong load, or the page is a full form submit rather than the script you thought. The column corrects the story before you edit a file.
Open the stack for the canceled POST
With Preserve log on, click Save note and select the canceled POST. The initiator link points into /static/app.js. In this lab the click handler is the function that calls fetch on /api/notes and then assigns window.location to /invoices. The line number in your build is the one the tool shows. Follow that, not a number remembered from this page, if the lab has moved.
The following document request for /invoices should point at the location assignment in that same function. Two initiators, one function, one bug: the function does not wait. A fix that only changes the API will not stop the browser from aborting the request. A fix in the handler will.
POST /api/notes status: (canceled) initiator: script /static/app.js stack: the Save note click handler GET /invoices status: 200 initiator: script /static/app.js same handler, location assignment
Do not confuse this with a redirect
If a row’s initiator says redirect, open the previous row and read Location. The server chose the next URL. Harbor Ledger’s lost note is not that pattern. The server does not get a chance to redirect, because the browser cancels the POST during the navigation the script started. The initiator word is the difference between “the app sent me here” and “the script left.”
Extensions and the browser itself can also appear as initiators. A row whose initiator is an extension is not a Harbor Ledger bug. Disable extensions in the lab profile, which should have been bare anyway, and repeat the click. The lab profile exists so the initiator list stays short.
Worked case: name the function, then wait for it
Capture one Save note click with Preserve log and the Initiator column. Write three lines: the POST’s initiator file, the document’s initiator file, and whether they are the same function. Open the function and find the fetch and the location assignment. Change the lab’s script so the location assignment happens after the fetch succeeds, which is an edit you are allowed to make because you own the app. Reload and click again.
The confirmation is a Network list, not a feeling. POST /api/notes completes with a real status. Its initiator is still app.js. The document for /invoices comes after, also from app.js, and the note text shows on the list. If the POST is still canceled, the location assignment is still winning the race, and the initiator stack is where you look next.
Diagram
Each row has a cause
- Document
The first HTML request is initiated by the navigation you typed or by a script assigning location.
- Subresource
The stylesheet and the script are initiated by the parser reading the document.
- Fetch
POST /api/notes is initiated by a function in /static/app.js.
- Line
The initiator link opens that line. In this lab build the click handler is the function that both fetches and navigates.
Where the POST came from
Evidence. The button says Save note, so the server must be failing.
Miss. You never look at who aborted the request.
Fix. You edit the API.
Evidence. The POST’s initiator is /static/app.js, in the click handler.
See. The same function assigns window.location to /invoices.
Fix. You change that function so the navigation waits for the POST.
POST /api/notes initiator: /static/app.js (click handler) status: (canceled) GET /invoices initiator: /static/app.js (location assign in that same handler) status: 200 GET /static/app.css initiator: parser
Check yourself
1. POST /api/notes is canceled and its initiator is /static/app.js. What does that tell you?
2. The GET /invoices that follows is also initiated by app.js, from a location assignment in the click handler. Where is the bug?
3. The stylesheet row says initiator parser. Should you change app.css to fix the lost note?