Tools · Web testing tools · 19 / 23
Preserve log, so a navigation does not eat the evidence
By default the Network list clears when the browser navigates. Harbor Ledger’s Save note button navigates away while a POST is still in flight, and the row vanishes unless Preserve log is on. The canceled POST is the bug.
Why the list you need disappears
Harbor Ledger’s note form sits on the invoice page. The handler in the lab’s app.js starts POST /api/notes and then sends the window to /invoices without waiting. From the clerk’s side the button “does nothing”: the list appears, and the note is not there. From the Network panel’s default side, the evidence is destroyed by the navigation, because a new document clears the recording.
Preserve log is the checkbox at the top of the Network panel that keeps the old rows. Turn it on before the click. The same checkbox is the one you want for any bug that ends in a redirect: a sign-in that hops, a save that returns you to a list, a logout that lands on the front page.
Read the word the status column actually uses
Clear the list, leave Preserve log on, type a lab-only note such as “checked April retainer,” and click Save note once. The row to find is POST /api/notes. The status is the browser’s canceled, not a number. Select it. The response pane is empty or incomplete, which matches an abort. Below that row, or above it depending on timing, the document request for /invoices completed with 200. That pair is the story.
Do not write “the server returned 0” or “the server returned 499” unless the pane shows that code. The honest sentence is: the click started a POST, the page navigated, and the browser canceled the POST. Then check the lab’s data. The note should be absent. If the note is present, the request completed far enough to be stored and the UI still threw the response away, which is a slightly different bug and still visible in this same row.
Preserve log: on Clear log, then one click POST /api/notes (canceled) GET /invoices 200 document GET /api/invoices 200 fetch
Confirm you are looking at this click
Preserve log keeps every earlier experiment too. A canceled row from five minutes ago looks exactly like the one you just caused. Clear the list, perform one click, and read only the new rows. If you need a marker, type a different note text each time and, after the fix exists, search the completed POST’s body for that text.
The fix, in an app you own, is in the click handler: wait until the POST finishes, then navigate, and show the failure if it fails. After you change app.js, repeat the same ritual. The row should become a completed POST with a real status, and the note should appear on the list. That before-and-after is the whole debugging loop.
Worked case: prove the save never landed
Sign in as Avery. Open invoice 1042. Turn Preserve log on. Clear the Network list. Save a note whose text you have not used before. Capture the canceled row in your note form: method, path, the word canceled, and the next document URL. Then reload the invoice list and see that the text is absent. Optionally look at the lab’s own log and see that no POST arrived. Two missing things, the UI and the server, plus one canceled row, are enough.
Leave Preserve log on for the rest of the DevTools lessons in this set. The initiator lesson uses the same click to show which line navigated. If you turn the checkbox off, that lesson’s evidence will vanish for the same reason this one did.
Diagram
The click, the POST, the navigation, the empty list
- Click
Save note runs the handler in app.js. A POST to /api/notes starts.
- Navigate
The same handler sets the page to /invoices before the POST finishes.
- Clear
With Preserve log off, the navigation clears the Network list. The POST is gone.
- Keep
With Preserve log on, the POST remains, status canceled, and the new document load is below it.
The list after Save note
What you see. The invoice list’s document and its API call. No POST.
What you conclude. The button did nothing, or the server ignored you.
What happened. The POST was canceled and then wiped from the list.
What you see. POST /api/notes, status canceled, then the document for /invoices.
What you conclude. The navigation aborted the save. The server may never have stored the note.
What you change. The handler should wait for the POST, then navigate.
Preserve log: on Action: click Save note on the invoice page Expected row: POST /api/notes Status word: (canceled) Next row: document GET /invoices Checked: the note text is not on the server afterward
Check yourself
1. Save note leaves you on the invoice list, and the Network list shows only the list page. Preserve log was off. What do you know?
2. With Preserve log on, the row says POST /api/notes and the status column says canceled. What happened?
3. How do you keep the next attempt from mixing with this one?