Ga naar hoofdinhoud

Kijken wat de browser doet

Het diagram van je eerste verzoek tekende zes stappen. Wat er tussen browser en server over de lijn gaat, kan je browser je laten zien. Elke browser heeft daarvoor een paneel dat bezoekers nooit openen, maar dat jij vanaf nu elke les gebruikt: de ontwikkelaarstools.

De ontwikkelaarstools openen​

Druk op F12. Werkt dat niet, klik dan met de rechtermuisknop ergens op de pagina en kies Inspecteren. Er schuift een paneel naast of onder de pagina, met bovenin een rij tabbladen. Vier daarvan gebruik je in deze cursus:

Ontwikkelaarstools, tabblad Netwerk geopend
NaamStatusTypeGrootte
  • Elementen: de HTML zoals de browser hem nu heeft.
  • Console: uitvoer en fouten van JavaScript.
  • Netwerk: elk verzoek dat de browser stuurt, met het antwoord.
  • App: wat de browser voor deze site bewaart, zoals cookies. Firefox noemt dit tabblad Opslag.

De namen staan hier in het Nederlands met het Engels erachter, want Chrome en Edge wisselen daarin. Deze les gaat over Netwerk. Console en Elementen krijgen later een eigen les in de uitbreiding over JavaScript, Console en Elementen, en App komt bij de uitbreiding over cookies.

Het tabblad Netwerk​

Kies Netwerk. De lijst is leeg: het tabblad ziet alleen wat er gebeurt terwijl het open staat. Herlaad de pagina en er verschijnt één regel:

Ontwikkelaarstools, tabblad Netwerk geopend
NaamStatusTypeGrootte
127.0.0.1200document152 B

Die regel is stap 2 en stap 5 uit het diagram in één: het verzoek dat de browser stuurde, en het antwoord dat terugkwam.

  • Naam is het adres dat de browser vroeg. Voor / staat er de naam van de server.
  • Status is het cijfer waarmee de server antwoordde. 200 betekent: gevonden, hier is het.
  • Type zegt wat voor antwoord het was. document is een pagina.
  • Grootte is hoeveel bytes er over het netwerk gingen.

Kijk nu naar de terminal waar fastapi dev draait. Daar staat dezelfde gebeurtenis, van de andere kant:

▕  127.0.0.1:52344 - "GET / HTTP/1.1" 200
▕  127.0.0.1:52344 - "GET /favicon.ico HTTP/1.1" 404

Zo ziet het eruit in de terminal van VS Code. Start je de server in een ander venster, dan kan er INFO: vooraan staan en OK of Not Found achter de statuscode. Het is dezelfde regel.

De tweede regel heb je niet zelf gedaan. De browser vraagt bij een nieuwe site uit zichzelf om /favicon.ico, het icoontje voor op het tabblad. Jouw server heeft er geen, dus antwoordt hij met 404: niet gevonden. Er is niets mis; in Netwerk zie je dit verzoek meestal niet eens.

Het is één verzoek, en je ziet het twee keer: in Netwerk wat de browser stuurde en terugkreeg, in de terminal wat de server binnenkreeg en antwoordde. Zie je iets in de terminal en niet in Netwerk, of andersom, dan weet je aan welke kant het misgaat.

Eén verzoek van dichtbij​

Klik op de regel. Rechts opent een venster met tabbladen. Bij Headers staat wat er over de lijn ging, in drie regels die je herkent:

Verzoek-URL:      http://127.0.0.1:8000/
Verzoekmethode:   GET
Statuscode:       200 OK

In een Engelse browser heten ze Request URL, Request Method en Status Code.

De methode is de get uit @app.get("/"). Bij Reactie (Response) staat wat de server terugstuurde: de JSON die FastAPI van de dictionary uit je return maakte.

Als de lijst leeg is​

Soms staat er in Netwerk niets, en de volgende keer wel. Dat ligt bijna altijd aan een van deze vier dingen:

  • Je opende het tabblad na het laden. Netwerk ziet alleen wat er gebeurt terwijl het open staat. Herlaad met het tabblad open.
  • Je ging naar een andere pagina. Bij elke nieuwe pagina, ook na een formulier dat je doorstuurt, begint de lijst opnieuw. Wil je zien wat er vóór de overstap gebeurde, zet dan bovenin het vinkje Logboek behouden (Preserve log) aan.
  • Er staat nog een filter aan. Onder de knoppen staat een rij soorten: Alle (All), Fetch/XHR, Document (Doc), Css (CSS), JavaScript (JS) en meer. Chrome onthoudt welke je het laatst koos, ook de volgende dag. Staat Fetch/XHR aan, dan zie je geen pagina's. Klik op Alle, en maak het zoekvak links ernaast leeg.
  • Opnemen staat uit. Helemaal links staat een rondje, en zolang dat rood is neemt Netwerk op. Is het grijs, dan heb je erop geklikt of per ongeluk Ctrl+E gedrukt. Klik erop en herlaad.

Testen​

  1. Open de ontwikkelaarstools met F12 en kies Netwerk
  2. Herlaad http://127.0.0.1:8000 en klik op de regel die verschijnt
  3. Vind de methode en de statuscode bij Headers, en je JSON bij Reactie
Gaat er iets mis?

Blijft de lijst leeg? Loop de vier oorzaken bij Als de lijst leeg is langs. Zie je geen tabblad Netwerk? Het paneel is te smal en verbergt tabbladen achter » rechts in de rij. Meer oplossingen staan op Er gaat iets mis.

Controleer je server

Laat je server draaien en typ in een tweede terminal python controleer.py eerste-server. Het script kijkt of alles uit dit hoofdstuk werkt; je downloadt het op Project checken.

Opdrachten​

Opdracht 1: Predict - Hoeveel regels?​

Je typt http://127.0.0.1:8000/info in de adresbalk en drukt op Enter, met Netwerk open.

Voorspel
Hoeveel regels komen erbij in de lijst?
Kies wat jij denkt. Bij het goede antwoord zie je de uitleg.

Opdracht 2: Run​

Klopte je voorspelling uit opdracht 1? Ga met Netwerk open naar /info en klik op de regel. Welke statuscode staat er bij Headers, en welke JSON bij Reactie?

Opdracht 3: Investigate - Een adres dat niet bestaat​

Ga naar http://127.0.0.1:8000/bestaat-niet. Kijk in Netwerk én in de terminal.

Antwoord

De regel is rood en heeft status 404. Bij Reactie staat {"detail":"Not Found"}: FastAPI vond geen functie voor dit pad. De terminal logt dezelfde regel, met 404 aan het eind. Het verzoek is dus wel aangekomen; de server had er alleen geen antwoord op.

Opdracht 4: Investigate - De server staat uit​

Stop je server met Ctrl+C in de terminal. Herlaad de pagina met Netwerk open.

Antwoord

De regel is rood en er staat geen statuscode, maar (mislukt) of (failed), vaak met net::ERR_CONNECTION_REFUSED erbij. Er was geen server om te antwoorden, dus er is ook geen status. In de terminal staat niets: het verzoek is er nooit aangekomen. Dat is het verschil met de 404 van hiervoor. Start je server daarna weer met fastapi dev main.py.