‫Erzähler: Lassen Sie uns nach dieser Art von schwerem
‫Theorievortrag jetzt http in Aktion sehen und
‫einige Anfragen stellen und einen
‫Blick auf die Antworten werfen, die wir mit unseren Browser-Entwicklertools erhalten haben.
‫Also verwende ich Google Chrome als Browser und
‫bin hier bei udemy. com.
‫Also geh einfach zu udemy. com, und
‫öffnen Sie dann Ihre Entwicklertools.
‫Und ich verwende dafür die Befehlsoption J auf meinem Mac, unter Windows ist es
‫wahrscheinlich Alt+Strg+J, oder klicken Sie einfach mit der
‫rechten Maustaste irgendwo auf die Seite und
‫klicken Sie dann auf Inspizieren,
‫nur für den Fall, dass Sie mit den Entwicklungstools nicht vertraut sind.
‫Dann gehen wir zum
‫Netzwerk-Tab.
‫Und dann hier auf Cache deaktivieren klicken.
‫Das ist wichtig, da Sie sonst
‫die Seite möglicherweise von Ihrem Computer laden, weil Sie
‫in udemy waren. com vor.
‫Okay, laden wir jetzt
‫die Seite neu, damit wir
‫die Netzwerkaktivität hier in diesem Netzwerk-Tab aufzeichnen.
‫Laden Sie dies also neu.
‫Und jetzt können wir hier alle Anfragen sehen,
‫die auf der Seite passieren.
‫Wie ich Ihnen bereits sagte, wird es viele Anfragen für alle Elemente
‫geben, die sich auf der Seite befinden.
‫Wenn wir hier nach
‫oben gehen, ist das erste tatsächlich Udemy. com.
‫Und wir können hier den Statuscode sehen, der 200 ist,
‫wie ich in der letzten Vorlesung
‫sagte, das bedeutet okay.
‫Es hat also alles gepasst.
‫Dann die Größe und die Zeit,
‫die zum Herunterladen dieser Ressource benötigt wurde.
‫Aber dann haben wir auch all diese anderen
‫Ressourcen hier, wie die CSS-Dateien, die Sie hier
‫sehen, einige Bilder, Java-Script-Dateien wie ich
‫hier habe.
‫Und all dies wurde tatsächlich vom Index,
‫also von der Stammseite, initiiert.
‫Okay, wir haben Udemy. com und dass
‫man dann alle diese Assets anfordern wird.
‫Das ist also der Index, also passiert es nicht im Initiator,
‫und all dies hier wurde vom Haupt-Udemy angefordert. com.
‫Wenn wir nun auf eine dieser Ressourcen klicken und wir
‫tatsächlich udemy machen. com zuerst.
‫Hier können wir einige weitere Informationen über die Anfrage und
‫die Antwort erhalten.
‫Also zuerst die Anfrage, die eigentlich ganz unten steht.
‫Und Sie werden sehen, dass die Anfrage an udemy gerichtet wurde. com, wir haben
‫eine Get-Anfrage gestellt und der
‫Pfad war nur der Root-Pfad, genau wie
‫ich es Ihnen im letzten Video erklärt habe, okay.
‫Dann haben wir eine Menge
‫Header, also bedeutet dies
‫hier zum Beispiel, dass die Seite nur mit einem gzip komprimiert wurde.
‫Hier unten haben Sie eine Kopfzeile zum Setzen einiger Cookies
‫und eine Reihe anderer
‫Kopfzeilen, über die wir später sprechen werden.
‫Dies ist also die Anfrage,
‫und dann
‫enthält die Antwort auch einen Haufen all dieser Header, okay.
‫So können wir sehen, wann die Antwort tatsächlich gesendet wurde.
‫Wir können eine Reihe von
‫Cookies und auch den
‫Statuscode hier sehen, daher kommt der 200-Statuscode.
‫Und wieder ein paar andere Header, über die
‫wir etwas später sprechen werden, okay.
‫Und das
‫gleiche gilt natürlich auch für alle anderen heruntergeladenen Assets.
‫Also die Antwort und die Anfrage hier unten.
‫Und diesmal sehen wir tatsächlich, dass die Wurzel
‫hier immer noch Udemie ist. com, also
‫das, was sie hier
‫die Autorität nennen, aber der Pfad
‫ist dann all das,
‫also dieser Ort hier, wo sich die CSS-Datei befindet.
‫Und wenn wir jetzt tatsächlich irgendwo hier auf dieser
‫Seite stöbern, sagen wir mal zu den
‫Webentwicklungskursen, na dann mal sehen was hier passiert.
‫Und hier haben wir
‫diese Seite, die die Webentwicklungsressource ist, okay.
‫Also im Grunde dieses Stück hier der URL.
‫Denken Sie daran, dass dies aus dem
‫letzten Video als Ressource bezeichnet wird.
‫Wenn wir also darauf
‫klicken, sehen wir das hier tatsächlich wieder, richtig.
‫Also
‫haben wir wieder udemy. com und /coursesdevelopment/webdevelopment.
‫Das ist also der Pfad, zu dem die Anfrage geht.
‫Hier auf der linken Seite können wir zB auch
‫Vorschaubilder liken, dieses Logo hier.
‫Wenn es sich um ein Bild handelt, können wir
‫die Vorschau sehen, und wir können die Reaktion besser sehen.
‫In diesem hier können wir zum
‫Beispiel tatsächlich die HTML-Antwort sehen, die zurückgekommen ist.
‫Anstatt also nur die Header zu sehen, wie wir es
‫hier getan haben, können wir auch
‫die Antwort sehen und eine schöne Übersicht über alle Cookies, die in
‫dieser Anfrage gesetzt wurden.
‫Wir haben jetzt noch nicht über Kekse
‫gesprochen, aber das ist wieder etwas für später.
‫Aber ich denke, es ist wichtig, dass Sie sich diesen
‫Überblick verschaffen, wie Anfragen und Antworten tatsächlich unter einer
‫Haube aussehen.
‫Genau das war also das Ziel
‫dieses Videos, ich hoffe, die Botschaft war klar und alles
‫hat Sinn gemacht.
‫Lassen Sie
‫uns nun weitermachen und über die Back-End-Entwicklung im Allgemeinen sprechen.