Moin und herzlich willkommen zur Folge 40 von einfach komplex.
Ich weiß nicht, ob ihr schon gesehen hat, aber wir sind
natürlich schon auf Platz 16 der Technology Spotify Technology
Podcast Charts angekommen. Das ist super cool.
Also mal vielen Dank, dass ihr immer zuhört und uns so treu
seid, hätte mir gedacht und wir versuchen natürlich ja die
Qualität des Contents aufrechtzuerhalten und deshalb
geht es heute um die Chrome Developer Tools.
Burkhard hat gesagt, die sollte man eigentlich kenne, ich kenne
die auch schon so ein bisschen. Ich glaube, ich weiß maximal ja
5% 10% was man machen kann. Burkhard, Warum muss man sie
dann unbedingt kennen und warum sind die so cool?
Ja, ich glaube, vielleicht kennen viele den Chrome als
Browser. Also morgen erstmal von meiner
Seite aus, aber egal und eigentlich was so richtig krass
ist an dem Chrome ist eigentlich total versteckt, hat glaub ich
normal der normale irgendwie noch nie gesehen.
Man kann f 12 drücken und ich hab gerade geguckt ich sitz
heute vorm Rechner aber ich ich brauch das jetzt die Developer
von der Nase um diese Folge zu machen.
Ja, wir sitzen hier ganz anders als sonst.
Muss man dafür. Habe der Ton ist auch in Ordnung
heute aber werden genau inspect ist glaube ich genau.
Man kann also mit Rechtsklick wohl auch auf die Webseite gehen
und dann kommt n Menü und. Also wenn nicht gerade die
Webseite den Rechtsklick abholt, kann man auf Inspect drücken.
Ich glaube, das ist der richtige Knopf und aber das gleiche wie f
12 drücke f 12 und dann kommt man in so einem geheimnisvolle
Welt der Developer Tools. Der Name sagt eigentlich alles,
ich glaube es ist das Tool, ist halt ja Brot und Butter für alle
die irgendwie Frontend Entwicklung machen im im Browser
und man kann damit richtig richtig richtig richtig viel
machen ja also und das wollen wir heute mal ein bisschen
leuchten nur dann wirklich nur die Taschenlampe oben drüber
halten, daraus könnte man locker 56 folgen machen wenn die
reingeht. Vielleicht können wir ja mal ein
Thema speziell anleuchten. Wollte irgendwas könnt ihr ja
schreiben, wir gehen mal so oben drüber, so dass wir überhaupt
dieses Ding da vorstellen, was da los ist.
So, ja das ist der Plan. Das klingt gut und und warum
Chrome vielleicht das im Hintergrund?
Ich hab mal geschaut, Burkhard, das ist das, konnte man sich
denken, der berühmteste oder am meisten genutzte Browser
weltweit, und zwar mit 63%, mit weitem Abstand vor vor Safari,
die so knapp 20% haben und dann weit abgeschlagen kommen viele
andere kleinere Browser was ich Edge und Firefox und sonstwas.
Also Chrome ist einfach extrem relevant.
Ja, für uns alle und wenn es geht ja 16 Menschen auf der Welt
benutzen einfach Chrome. Ja, und das ist ja nicht so,
dass also es gibt soweit ich war jetzt fast in allen Browsern so
ne Art sind developer Tools, dann mindestens Konsole, die
sind natürlich alle unterschiedlich in der
Mächtigkeit, aber es ist ja hier an der Stelle, wenn ich Frontend
entwickelt vielleicht gar nicht ultra relevant, ob das jetzt die
Chrome developer Tools sind oder irgendwelche anderen, weil ich
einfach, also das ist einfach so richtig analysiert, sehr
objektiv einfach das was ich da irgendwie auf diese Webseite
ändere. Und ich kann mir meine CSS und
des und weiter alles super angucken und auch hin und her
spielen. Und das ist ja auch richtig für
ne. Also würde ich dann
typischerweise in kurz oder irgendwie und dann ist das
trotzdem Funktionabel in Safari oder was weiß ich für Internet
Explorer na Internet Explorer vielleicht.
Gibt es gar nicht mehr. Ich Internet Explorer ist
mindestens abgekündigt, das ist jetzt.
Nehmen wir den ja genau, Edge heißt der heißt ja auch unter
Entwicklern liebevoll Internet explodiere nicht gut.
Du, ich weiß nicht, ob sie jetzt rein passt oder besser später.
Erzähl mal, wie wir das dann genau aussieht, wie man das denn
jetzt programmiert. Wie bezieht man jetzt sag ich
mal diese developer Tools? 1 seine in seinen Alltag, der
der Programmierung und der Entwicklung.
Oder sollen wir das lieber besprechen, wenn du das bisschen
genauer vorgestellt hast? Nö, können wir schon mal eisern.
Also ich hab hier 3 Bildschirme vor mir und ich habe also wenn
ich am Frontend arbeite, dann habe ich immer links, quasi dass
das entstehende Frontend, das direkt von und dass man jetzt
auch wie funktioniert das wir haben FÜPS gehabt.
Also ich habe meinen Visual Studio in der Mitte.
Im Screen ist der Code und dieser Code wenn man REACT zum
Beispiel nutzt das richtig schön, da läuft quasi ein
lokaler Web Server im in der Entwicklungs Umgebung, wenn ich
quasi direkt starte dieses ganze Investment als Entwickler
Development Modus natürlich und der spielt mir quasi das
Frontend so wie ich es haben möchte direkt in meinen in
meinen Browser rein, dann unter local host natürlich dann auch
nicht auf dem Server deployed und dann habe ich meinen rechten
Schirm habe ich meistens f 12 gedrückt und zieht diese
developer Tools voll screen. Nach rechts, also links, habe
ich die Anwendung. Entsteht in der Mitte habe ich
den Code und rechts über Tools. Krass, ist ja alles gleich
sehen, dann kann ich alles sehen und das coole ist, wenn ich den
Code einfach verändern n bisschen und zum Beispiel NCSS
Anweisungen anders mache oder irgendwas anderes anfährt oder
Irgendsowas und speichere in Visual Studio Code das auch so
cool mit React das halt quasi direkt live die Anwendung neu
lädt. Also ich seh da sofort eine neue
Seite quasi im Browser und kann mir auch angucken in den
developer Tools was halt tatsächlich passiert ist ne also
dann hast du das eine ist dein Quellcode, das andere ist so
wird so sieht es aus. Für den User und das dritte
Developer Tools zeigen die an inhaltlich.
Was hat der Browser tatsächlich verstanden, gerendert und
gemacht und so weiter und ultra wichtig ja weil also.
Ich nehme ein Beispiel, wo ich das andauernd benutze, wenn wir,
wenn wir also wenn man im Browser was schön darstellt,
dann machst du das typischerweise auch schon
gesprochen, das mit der Sprache CSS ja, also da kannst du die
ganzen Margin Skala, Speck, ground und so weiter
Transparency S und so weiter alles einstellen, ne?
Das kannst du natürlich im Code immer wieder machen.
Ja, und dann speicherst du immer wieder, immer neu und das ist
schon alleine das, obwohl das schnell geht, ist auch immer
noch irgendwie fusselig, ja weil du nicht weißt wie es aussieht,
jetzt kannst du auch wir machen die Looks gehen und du hast
gemacht im Code sag ich mal und dann kannst du diese Elemente
herauspicken, tatsächlich was da angezeigt wird wenn n Knopf ist
oder der Text auf dem Knopf und dir genauer angucken warum sieht
er so aus wie der aussieht ja was ist das CSS was der Browser
jetzt dahin geladen hat ja und dann kannst du das sogar live
manipulieren ja und? Du siehst halt in Echtzeit
direkt, wie sich das verändert hat.
Also krasses Beispiel, man kann da sonst auch machen, aber du
kannst quasi die normale Seite, jeder kennt die Google
Startseite mit dem Search Element.
Ja da könntest du hingehen, machst die f 12 ja und dann
drückst du die richtigen Knöpfe und dann kannst du komplett
dieses input Element was n weißen Hintergrund hat
typischerweise einen roten Hintergrund haben lassen und so
weiter was ich damit sagen will, du kannst ja ultra schnell
angucken was muss ich müsste ich im Code tippen damit es so
aussieht wie ich es haben möchte und dann geh ich schnell wieder
zurück das Ausprobieren der Tools Tickets quasi fest in den
Code rein und dann ist toll. Nur ein ganz kleines Beispiel
von dem, was man damit alles machen kann.
Perfekt, perfekt. Ich hab da immer so rumgespielt
und Webseiten wird verändert, das ist echt cool, weil es liegt
quasi daran, weil der Code ja nicht kompiliert ist.
Also irgendwie ja lesbar ist im Browser durch die Tools und dann
kann ich ihn einfach verändern. Du sagst Grad die ganze Zeit CSS
ich bin mir nicht ganz sicher schon behandelt haben und da
wiederhole nochmal was es. Genau.
CS heißt Cascading Style Sheets und ist ja quasi die.
Die Sprache oder die? Ja, die Art und Weise, wie ich
Elemente HTML Elemente typischerweise an Maler und
aussehen lasse, also Style Style ganz genau.
Ja, also man kann, man könnte sagen, wenn man jetzt mal, wenn
man ein Beispiel zieht, man könnte sagen, ich hab.
Ein Dokument, ja, das hat besteht nur aus Text.
Also früher war das so bei den Emails, die hatten ja keinen
Highlight, der pure blanke Text, ja einfach eine Schriftart, die
da gerade ist. Arial oder Irgendsowas eine
Schriftgröße und dann gibt es nur den textuellen Inhalt, das
ist quasi das HTML, eine moderne Seite wo ich mir nur den Rot die
Rohinformationen angucken würde, furchtbar wirklich furchtbar
aussah. Und, und jetzt fange ich an,
aber jetzt nehme ich das Cascading Style Sheets Krams
dazu und kann quasi jedes einzelne Element sehr akkurat
anmalen, aussehen lassen, Fonds ändern, also alles was dick
Schriftgröße, Drehungen, Animationen und so weiter ich
kann extrem viel sehr sehr viel machen mit CS und das ist
gewachsen und das am Anfang noch nicht so viel, jetzt gibt es s
3, da kann ich ganze Knöpfe durch die Gegend fliegen lassen
und so weiter und da habe ich noch keinen, das hab ich nicht
programmiert, ist quasi ne Mark Language.
Ja und jetzt mal das Beispiel zurückgekommen habe ich so n
Text und zum Beispiel in Word. Ja, da geben sie auch den roten
Text, aber dann fängst du den an zu stylen.
Ne, also du fügst page breaks ein, du machst irgendwas fett,
du hast andere Header sizes als für die für den normalen Text
und dann auf einmal so Dokument auch gut auszusehen und so
ähnliches Analogie ist halt quasi HTMCS.
SOK perfekt ja, gute Wiederholung dann verstanden wie
das benutzt. Ich habe noch eine Frage und
zwar hast du ja gesagt, das ist für die Entwicklung ergibt ja
auch Sinn, da nutzt es auch, kann man die auch nutzen wenn
man wenn man Backend entwickelt oder ist es auch Anwendungsfall?
Ja, klar, irgendwie gehört das zusammen.
Also also wir machen ja Single Page Applications, das heißt,
und das kann ich dann auch sehen, das heißt, haben wir
schon mal gesagt, das heißt, wenn man loslegen mit der
Anwendung, also im Browser die entsprechende URL eingibt, dann
lädt sich nicht nur HTML und CSS hin, für die eine Seite und auch
nicht vor gerendert aus dem Aus dem Server, sondern ich Krieg
javascript Code runtergeladen und der fühlt sich aus und der
manipuliert im Prinzip dann im Klienten, also ohne Server
Interaktion, die die ganzen Elemente und so weiter und auch
das alles kann nicht nachvollziehen.
In der Tools ja. Insofern es ist natürlich auf
jeden Fall schon für die für die Anzeige ne, also n Browser
developer Tool, aber es hat. Irgendwie inhärent auch was mit
dem Backend zu tun, auch wenn neue Daten rein fliegen.
Ist ja so, ich reagiere ja mit meinem Freund auf die Daten, die
aus dem Backend kommen ja wenn du wenn ich meinen Freund nicht
ändern würde, ich sag mal was ich aus der Datenbank
irgendwelche irgendwelche adress Informationen die im Detail
anzeigen will und ich verändere Cheri ändere quasi den Browser
nicht, ja dann habe ich die Daten zwar geladen auf dem
Client aber keiner kann sich sehen ne also insofern ist das
Connected so ja und auch genau das kann man sich alles gut
angucken mit dem Development. O.
Perfekt, dann hab ich verstanden und geh mal rein.
Was kann man da so sehen? Also vielleicht nochmal
wiederholen, um das selbst mal anzurufen, jetzt vielleicht für
die wirklichen krassen Laien, die uns zuhören, auf irgendeine
Website gehen, beliebige Website tatsächlich.
Egal. Und dann einfach mal f 12 auf
der Tastatur drücken oder Rechtsklick und ja Element
untersuchen oder sowas kann man glaube ich einen.
Ich hab auf Englisch eingestellt r int wahrscheinlich wie bei.
Untersuchen, was auf Deutsch irgendwas genau und dann ist man
da drinne. Ja so und nun geht was macht man
da? Jetzt ja genau und ich würde
sagen, also wir hatten ja die Folge, das ist halt komplex, ich
les n bisschen vor. Ich muss sagen, ich hab ich hab
jetzt hier auf Englisch also nehmt es mir nicht übel, müsste
live übersetzen oder gerät sagt mir wie es auf Deutsch heißt
laut wahrscheinlich. Auf Deutsch?
Nee, das ist alles elements Console.
Dann ist das sogar gleich. Ja, ich habe, aber ich weiß
nicht verschiedene Einstellungen ich verschiedene Nutzer in
Chrome ich auch, das ist toll aber auch jetzt das ist nicht so
relevant, es geht hier um den Inhalt, ich hätte jetzt
vorschlagen wir gehen einfach von also die Details sind so
aufgebaut, dass du oben hast du ein riesiges Menü, also quasi ne
von links nach rechts und ich würde mit euch einfach mal
komplett durch diese ganzen Dinge durchgehen und einmal nur
ganz kurz anreißen was da los ist.
Dann haben wir unsere typische Zeit im voll und wir können das
auch echt nur anreißen. So, ja und aber ich glaube dann
so Idee was so los ist und was ich versteckt hab.
Und dann gleich ganz links ist so ein Symbol.
Das sieht aus, da ist so ein Pfeil in so einem gepunkteten
Kasten, ne. Also wenn man die f wenn das F
aufgemacht hat ja und und vielleicht auch mal wenn ich f
12 drücke, beziehen sich die developer Tools auf die Seite
auf der ich f 12 gedrückt hab. Ich kann auch mehrere Seiten
gleichzeitig angucken, also ich kann ne andere Seite aufmachen
und auch f 12 drücken, dann krieg ich ein zweites Desktop
Fenster so ja also immer ist bezieht sich immer auf das was
ich gerade hab ja OK wichtig so wenn ich jetzt diesen Pfeil
anklicke in diesem in diesem in diesem gepunkteten Boxen, das
ist das inspect Element, das ist cool, wenn nicht dann wenn er
aktiv ist wird bei mir hinterlegt und dann auf die
Seite rüber gehe ich gerade angucke.
Dann merkt man schon, wie Chrome irgendwie diese ganzen Elemente,
die so erkennt, alles kleinteilige markiert und so
weiter. Das ist Ultra schnell.
Ich mach das gerade in meinem meinen Posteingang.
Typischerweise jetzt immer auf Fokussieren zum Beispiel.
Also ich bin jetzt bei eigene Webseite heissen.com und da zum
Beispiel auf den Knopf jetzt Demo vereinbaren, hab ich jetzt
gerade live so und jetzt passiert da hin und wenn ich
jetzt klicke, dann ist quasi dieser Modus aus wieder und er
hat was gemacht und und dann bin ich quasi in dem Tab Elements.
Ja und da sehe ich jetzt das HTML.
Der Seite hier ja, und er markiert die Stelle im HTML, die
jetzt relevant ist für diesen selektierten Teilbereich der
Seite. Ja, in diesem Fall A Class
Button, HF und so weiter und hier wenn man wenn man will kann
man bei gut gemachten Webseiten kann man hier so ein bisschen t
auch lernen. Ja AF ist zum Beispiel der
Klassiker ist e Link so A ist halt n ist das Link Symbol ja
und dann sehe ich sogar jetzt jetzt sehe ich sogar was da
drinne steht AHF und dann seh ich wohin geht es HTPS Kalender
Punkt Punkt Google. Und es gibt schon Inside, also
wenn man da drauf drückt und dass ich jetzt gemacht habe, ich
gucks mir news, da sehe ich schon OK, das leitet mich auf
die Kalender Funktion von Google hin, ist genau das.
Ja wir haben halt wir haben halt n Kalender Dingsda integriert wo
man sich n Termin buchen kann man hin und krasser Weise könnte
ich könnte ich dieses alles auch manipulieren ja ich könnte zum
Beispiel und das ist aber nur gültig für mich ja nicht für den
Server so ja ich könnte hier die Links manipulieren und das und
so weiter ja. Aber was wichtiger ist, als ich
hier in diesem Element bin. Und immer noch ne.
Also. Du meinst die Elements, den
Elements Tab? Elements, Tab ja, und dann habe
ich irgendwie ein so ein so ein ich.
Ich kann immer einzelne HTML Elemente hier markieren, ja und
dann rechts ist per Default kommen die Styles ich weiß nicht
ob du das siehst. Ja, seh ich.
Voll unübersichtlich. Da muss man also, da hab ich am
Anfang auch überhaupt nicht durchblickt, das ist auch ein
bisschen krass. Jetzt muss man wissen, dass
cascading Style das Wort cascading heißt, quasi, dass das
ne Hierarchie hat, ja, ich kann halt quasi ganz globale Styles
setzen und die immer feiner Ausdifferenzieren, je nachdem wo
ich gerade bin. Kontextuell in meinem HTML, weil
HTML ist ja auch nichts anderes als dies in D, in A und so
weiter das ist ja geschachtelt. Ja, und diese Schachtelung, die
nicht im TSS auch haben und deswegen sieht das so
kompliziert, dass das quasi fängt irgendwie ganz unten an
mit dem allgemeinen ganz runter scrollen, Styles sind quasi
allgemeinsten Styles die gesetzt sind, HTML für alles was HTML
ist macht das ja und dann streicht er auch wenn das
definiert wurde, ja sind quasi die die die die die Mega
defaults und dann wird es nach oben immer feiner und die auch
nicht durchgestrichen typischerweise ich jetzt hier
Punkt Button. Ja, das ist eine s klasse.
Wir gehen heute nicht auf CSS sein, ne ja, aber es reicht
schon zu spielen so weil das Ding ist so cool, man sieht halt
schon du kannst jeden Style anwählen und auswählen mit einer
Check Box kommt davor und wenn du die Ausmachst dann ist halt
quasi ich hab jetzt mal Background Color abgewählt und
schon ist der Button nicht mehr sichtbar ist noch der Text der
war vorher ein grüner schöner Button jetzt Demo vereinbaren w
background color D selektiere ich der Background und da steht
noch jemand vereinbaren weiß orangen Hintergrund voll kacke
ja oder ich geh hinten auf die Farbe Background color das jetzt
quasi eine Farbe im CSS und ne beliebige andere Farbe und
gucken wir mal wie es aussieht so ja.
Dann kann ich die kann ich mal mit Farben spielen.
Irgendwann mal bisschen. Spielen auf und genau.
Dann gibt es Sachen, die Margins und Farben, also Abstände,
Farben, puddings, alles was es zu bieten hat, kann nicht
jemanden manipulieren, ne? Genau.
Und vielleicht sage ich auch ganz, ganz oben.
Ich weiß nicht, ob das sieht. Element, Punkt, Style ist n Grau
hinterlegt und übrigens wer n bisschen aufgepasst hat hier
sind wir wieder so ne Art Java also Jason die Folge von Jason
hilft immer wieder das sind alles so Kleine dargestellt,
dass ohne Jason Objekte so mit den Klammern und so SK Value
immer ne es ist immer irgendeinen Key der bedeutet was
und der sagt Halt was die Konfiguration ich sehe es auch
so Element Style macht da quasi riesen Objekt auf und das ist
alles da quasi nee nee also pass auf Element also es ist so dass
CSS funktioniert, so dass das typischerweise in so Klassen
angelegt ist. Das sind quasi Files, die im
Server hinterlegt werden, die dann hier eingeladen werden und
Element Style. Das nennt man inline Styling,
das hat immer, deswegen steht das ganz oben, das hat die
höchste Priorität, das überschreitet alles was
irgendwie defaults da ist. Ja ganz oft ist das nicht
gesetzt, gute Praxis, dass man das nicht so oft einsetzt, weil
das für die Browser anstrengend ist, sag ich mal immer dieses
inline Styling auszuwerten, aber wenn ich da irgendwas
reinschreibe, dann wird das alles überbügeln was irgendwo n
stand. Ja da kann ich genau das gleiche
schreiben, also die gleichen Regeln, aber das heißt quasi das
direkt an diesem Element inline bitte vorgenommen zu werden hat
ja und ich muss nicht irgendeine Klasse überschreiben.
OK, also. Perfekt.
Gut, OK, aber jetzt haben wir schon lange nicht aber elements,
das wichtigste wahrscheinlich einer der wichtigsten, ist der
wichtigsten Dinge, also kannst du einfach klicken, Elements und
dann machst du das ja. Also jetzt mal kurz, ich benutze
das auch manchmal die Dev Tools manchmal so Webseiten ja wurde
irgendwas hast. Also wenn die schlecht gemacht
sind, dann hast du kannst du quasi einfach visuell mal von
Banner wegklicken. Ja, manchmal hast du so n so n
graues Ding da, dann kannst du mal ins Bett gehen und dann
setzt du den zum Beispiel Party auf 0 oder sowas oder sagst
Invisible kann ja mal gucken, kannst CS Sachen einfach.
Wegmachen ne und dann kannst du da was dahinter steht, was man
eigentlich nicht soll. Doch lesen ne guys wir gehen,
wir gehen mal zum nächsten Tab nee wir gehen zum nächsten
Knopf, der ist ganz cool also neben das sind ja 2 Icons wir
haben jetzt das Insekt angeguckt, jetzt geh mal
daneben, das sieht aus wieso ne wie ne wie Mobiltelefone und
Desktop ist auch genau das was es sein soll Mega Monster super
cool zum entwickeln ne da drauf klickst dann kommt bei mir
direkt in das glaube ich unterschiedlich das iphone 12
Pro an jetzt jetzt ist quasi also was ich mache was macht die
Taste die tut so als wäre jetzt meinen Browser.
Ein Mobiltelefon? Ja, und zwar ein beliebiges ja,
und da steht ganz oben. Also jetzt guck ich quasi nicht
in die sonder die Webseite, jetzt ist unsere unsere Webseite
heise.com auf einmal so geändert wie sie aussehen würde im iphone
12 und da steht da oben die Menschen das iphone 12 Pro einer
Schweizer Feil stehen anklicke sehe ich ne ganze Set von
aktuellen Smartphones. Nicht mehr ganz aktuell, aber.
Stimmt, man kann bei Edit kann man, bei edit kann man noch
welche hinzufügen und so weiter da kann ich mir aber echt viel
angucken. I Pads wie es aussieht und so
weiter Mega Monster wichtig, weil jetzt simulieren die Tools
richtig echt. Wie, was quasi dieser Code
erfahren würde, wenn es denn auf diesem Device wär.
Ich muss mir also nicht mehr irgendwie alle i Pads der Welt
und Telefone mit allen ihren Radius da auf den Tisch legen,
kaufen teuer KX irgendwie so ne und dann seh ich mal wissen,
würde also responsive Design mache ich damit ja das ist so
der das Password dabei lassen es beenden.
Genau. Und ich kann übrigens noch
drehen, das ist auch ganz geil, der ganz rechts jetzt auf der
Webseite bei mir in diesem Modus ist auch so ein kleines Ding, da
kann ich auch die gedrehte Variante mir angucken, ja auch
so ein kleines Gadget so also die Dev tools sind völlig
überladen, also man ist optisch völlig überfordert und aber
jedes einzelne Element hat Vollmacht, also das ist echt n
ja ziemlich krasses Ding so OK ich krieg das wieder weg, also
aus diesem Modus raus, so dass ich diese Webseite wieder ganz
normal sehe, ich hier gerade und jetzt gehe ich von elements, das
haben wir gerade besprochen auf den nächsten Reiter Konsole
Konsole auf Englisch ja. So, hier sehe ich jetzt bei
unserer Webseite gar nichts, was ganz cool ist.
So ja, also das ist eigentlich clean.
Ja, also was ist die Konsole wenn.
Das kennt ihr vielleicht ja, wenn man Software schreibt, dann
kann man ja, wenn man normales Programm schreibt, dann in
verschiedenen Sprachen irgendwie Print, Prince Out, Print Line,
das heißt jede Programmiersprache anderes
Befehl, wie ich quasi ja textuelle Informationen raus
machen. Ja, das ist oft so Debug ging
Informationen ne. Irgendwas ne Ausgabe letzte.
Ausgabe einfach ne Ausgabe im Code in Java Script ist das
Konsole Punkt log typischerweise und wenn ich n Konsole Punkt log
mache, dann wird quasi ja das was da irgendwie an der Stelle
wo eine vorbeikommt wird eingerichtet.
Das ist, das kann ich halt nehmen, wenn ich, wenn ich die
Buggy zum Beispiel, ich komme irgendwo an der Stelle vorbei im
Code, dann würdet, dass mir hier angezeigt werden, alle kommen so
Logs stehen hier, das sind quasi noch die Bug Nachrichten der
Entwickler, wenn man so will, ja.
Ich finde produktive, sehr saubere Webseiten sollten da nur
noch ganz minimal, wenn überhaupt irgendwas bringt.
Jetzt frage, ich habe ja dort schon mal rote Nachrichten
gesehen und sind farblich kennzeichnen manchmal orangene,
ich meine auch weiße genau, ich hätte jetzt gedacht, also ich
hab jetzt gerade offen ist tatsächlich nichts.
Dachte es gibt immer. Ich dachte, das ist einfach so.
Hey nee, ich OK, ja das ist voll der Sache der Entwickler, wenn
man kann voll ab. Also Shut up gibt es auch ja
genau, du hast natürlich recht weiß und so weiter es gibt die
Konsole log habe ich gerade ein bisschen vereinfacht
dargestellt, gibt es in verschiedenen Stufen, also man
kann auch Konsole Punkt Info schreiben im Code und wann und
error genau und wenn n Fehler passiert und also entweder weil
ich den Fehler rausbringe oder weil ich den nicht abfangen Code
dann wird das hier in der Konsole auch angezeigt mit roten
Dingern und ganz viele also es ist also ich finde jetzt gerade,
dass wir, aber man muss ja nicht selber programmiert da auch n
paar. Wir benutzen hier einen CRM für
unsere Webseite, die haben das sehr gut gemacht.
CMS. C.
Entschuldigung, genau danke. Gerit haben das ja gemacht da
einfach ist einfach gar nichts. Ja und aber viele Seiten haben
irgendwie dann r und so, das heißt nicht, dass die Anwendung
komplett, dann wird hier das nicht geladen ist, immer
komplexe Dinosaurier so ne Webseiten ne, aber jetzt will
ich dazu noch eine Sache sagen, dass ich zwar nicht, aber ich
hab einen blinkenden Cursor wahrscheinlich auch ja und ich
habe jetzt hier Zugriff auf also ich kann hier quasi javascript
auch einschreiben und n paar Sachen auswerten und so weiter
jetzt muss man wissen, es gibt ein mächtiges Objekt.
Das heißt, es ist das Windows Objekt.
Damit komme ich auf die ja auf alle Funktionalitäten zu, damit
die mir der Browser zur Verfügung stellt.
Programmatisch also in meinem Code, aber jetzt auch in den
Tools ja nicht, wir machen nur eine Sache wir jetzt Windows
einfach schon jetzt bin ich auf diesem Windows Objekt.
Und da geh ich jetzt mal hin und schreibe Punkt.
Also Windows Punkt komme ich nächstes Level und hat ich mal
Navigator ein der Windows Navigator.
Nein, du machst ja schon komplett Return Navigator und
jetzt hab ich hier ne Zeitung bekommen.
Das ist die Auswertung von diesem Befehl.
Guck mal, das geht hier bei uns. Doch jetzt geht es bei mir
nicht. Ich hab es genau, ich habe es,
musste nochmal zurück nicht so und jetzt kann ich das Ausklappt
was da kommt nur so einen Kleinen hinzugeben, vielleicht
habt ihr schon was von Tracing gehört oder irgendwas ne wir
haben ja die viele Webseiten wollen ja irgendwie wissen wer
war der User der bei mir war und deswegen werden ja viele Cookies
gesetzt ne und dann irgendwie personalisierte Werbung
einzuspielen und so weiter ja der Winter Navigator und
vielleicht habt ihr schon gibts ohne Cookies ja so eine Art
fingerprinting oder sowas Sensor Ring ja ein Beispiel machen kann
der Windows Punkt Navigator. Ich könnte jetzt auch die App
aufrufen. Innen drin ne ganz normal.
Das sind alles Sachen die der. Die der der Webseiten Betreiber
über mich wissen kann. Öffentliche Informationen.
K den Kram hier Navigator, den bringe ich jetzt mit in meinem
Browser. Genau, und den kann er auslesen.
Ja, weil die Funktion Navigator aufrufen kann mit der Website
und nach Hause schicken, seine Datenbank ja und da steht schon
eine ganze Menge drin. Ich weiß nicht wie, aber n
Mozilla, hier stehen erstmal die Informationen mit welchem
Browser bin ich unterwegs auf welchem Betriebssystem ja ich
hab Mozilla Nets Cape Version 50 Linux x 8664 schon drin, dass
ich Linux bin mein Clip Board hätte ich jetzt irgendwas im
Clip Board also in der Zwischenablage kannst du
auslesen ja. Pass auf, bei mir steht gerade
lustigerweise ipad, weil ich gerade in sozusagen.
Im device ipad angucke. Ja, genau das ist ja dann auch
richtig. Genau.
Also ich bin ja am Rechner, aber ich tue so, als hätte ich i.
Chrome, ja. Ja genau, weil du noch diesem
Device Modus an hast, was ja und dann spannende Sachen wie zum
Beispiel Device Memory ja, da steht.
Also das heißt tatsächlich, wieviel Arbeitsspeicher hat das
Gerät mein Laptop gerade an dem ich hier sitze bei mir ist 8
Gigabyte 8 steht da einfach nur so geolocation und so wenn du
das hättest du jetzt auch noch auslesen wo du gerade bist hab
ich nicht GPU Informationen über die GPU Hardware Concurrency und
so weiter und sofort da gibt es richtig viele Sachen languages.
Wie mein Keyboard z ist und dann auch noch interessant Media
Devices. Da kannst du genau rausholen
welche Media Devices hast du und so weiter ja welche Kamera von
welchem Typ und so weiter weil das wichtig ist um die um
später. Es gibt ja viele Web Apps wo du
mit der Kamera irgendwie interagieren.
Genau da muss aber nochmal zu stimmen, dass das dann auch
benutzt werden. Zustimmen.
Aber was ich sagen will, diese Hardware Informationen.
Also wenn das jetzt alles zusammen ziehst ne und daraus
quasi einen Hashmat haben wir schon besprochen diese ganzen
Informationen und machst quasi kryptographischen Kita raus,
dann wird ja schon ziemlich unique.
Ja, also damit kannst du schon vielleicht nicht so 100% da aber
zu einer großen Prozentzahl. Da steht drin wie
Arbeitsspeicher hast du noch wie Festplattenspeicher hast du noch
ne, was hast du für Kameras verbaut und welche Version von
welchen Browser, auf welchen Betriebssystemen?
Und dann kannst du schon ziemlich einen ich wollte nur
sagen, dass das so solche Sachen werden genutzt um Tracking zu
machen ohne Cookies ja also wir sind nie ganz anonym unterwegs
im Netz, wenn wir nicht ja bin ich kein Experte, müssen viele
Experten, dass auch Änderungen immer wieder so ne darauf genau,
aber das ist halt, man kann ja sehen was was zurzeit gerade los
ist. Da muss man nur diesen Navigator
aufdecken, das ist nur eine der Möglichkeiten, da gibt es noch
mehr. Also das Ding.
Der Befehl war auf Konsole gehen oder auf Konsole und dann
window. Punkt Navigator und dann Enter
oder Return kommt der ganze Kram ganz genau.
Mir ist gerade aufgefallen, wir klicken hier die ganze Zeit rum,
hätten bestimmt viele Mausklicks in der Aufnahme, der
wahrscheinlich ein bisschen darüber hinweg, genau lass mal
weiter bevor wir sind schon irgendwie bei der halben Stunde
Aufnahme. Ich hab jetzt hier Recorder
Performance Insights mit so einer mit so einem echt ich hab
jetzt erstmal sources ich weiß ich hab in meinem Browser n
bisschen das Experiment Tools von Google die ich eingeladen
hab die Räder hab ich schon auch ganz am Ende steht das andere
OKOK lassen wir weg wir machen direkt bei Sources weiter und.
Auch nur ganz kurz hier, weil das ist so heftig.
Hier ist quasi. Also hier werden quasi nochmal
die die die die die Quellcode so gut es Development Google
Developer Tools kann hingezeigt ja also die Quellcode,
javascript und alles so geladen ist durch die Seite und da kann
ich auch ein bisschen gewissen, nämlich durch Navigieren und so,
das braucht richtig Expertenwissen, ich kann INDEX
JS lesen und das ist auch. Also auch nicht so aufbereitet,
dass lesen kann. Und so lassen wir deswegen auch
weg. Aber da also was das Macht ist
nicht quasi, kann auf die Quellen gucken.
Ja richtig so ne, also genau. OK, weiter Netzwerk ist der
nächste Tab Network bei mir ganz wichtig, benutze ich ganz oft.
Auch ganz cool, dass das funktioniert.
Am besten, wenn man, wenn man einmal auf dieses Schild, also n
verboten Schild das nicht clever Icon drückt, dann ist alles weg
von Netzwerk und wenn ich dann die Seite neu lade, also auf der
Seite Refresh mache raus Refresh, dann fühlt sich dieses
Netzwerk Dings wieder relativ komplett und komplexe Sache,
aber ich hab quasi ne Tabelle und da steht dein Name bei mir
jetzt hier heißen wir.com fängt jetzt gerade an Index JS Project
CS hier wird jedes einzelne fürzchen sag ich mal.
Was irgendwie geladen wird, aufgelistet.
Also alles, was übers Netzwerk geht, ja.
Ja, ich sehe gerade, dass das unser Gif, was wir drauf haben,
viel zu groß ist. Muss ich mal.
Kleiner machen genau das ist zum Beispiel auch was ne und dann.
Also hier kannst du gucken was wird alles quer geladen und so
weiter hier gucke ich gerne mal beiseite, so von einer Behörde
oder Irgendsowas das sollte ziemlich sauber sein und auch im
besten Fall was ihr aus der Domain geladen werden, wo ich
halt quasi die Website aufrufe, also hier würde auch auffallen
wenn ich jetzt irgendwie Party javascript Code irgendwie quer
rein laden von Google Analytics oder irgendwas steht hier alles
ja hier kann sich nicht verstecken mehr.
Und was ich eigentlich noch interessanter als die einzelnen
Dinger, die kannst du nochmal klicken und gucken.
Die Request Response Sachen und so weiter da kann man echt ins
Detail gehen. Ist übrigens oft eine Fangfrage,
kann hiermit machen manchmal fragen wir haben sogar die haben
gesagt ja gibt uns doch mal was wir im Header Request Header
mitschickt da steht irgendwie das Stichwort oder irgendwas ja
an dieser Stelle kann man. Das auch so, ja.
Genau an dieser Stelle kann man auch klicken und dann sowas
anzeigen lassen. Ne führt zu weit kürzlich auch
hier ab, was ganz wichtig ist, wenn man unter der Tabelle
direkt diese Zeile anguckt. Unauffälliges Ding.
Da steht, sorry, da steht jetzt bei mir 56 requests, 139,
Kilobyte, transfert, 18,9, MB Resources.
Das voll nicht unwichtig, denn das sagt jetzt quasi wieviel,
also wie groß ist der Quatsch, den ich mir jetzt bei jedem
Refresh runterladen muss und dass die Webseite angezeigt wird
hier bei unserer Webseite sind nur 139 Kilobyte, es hat extrem
wenig, ja im ersten Schuss so ja, also 256 Requests werden 100
Kilobyte erstmal runtergezogen Third.
Weil das jetzt auch gedacht, ich müsste, wenn ich das jetzt
machen würde, ich drücken und ich glaube, dass das gilt, was
wir drauf haben. Ich bin gerade so schön weiter
House wo hinkommen denk ich mal das das wird angeprangert, dass
das Gift zu groß ist. Ja so jetzt hab ich Meer
draufgedrückt auf dem gleichen Netzwerk jetzt hier 18,4
Megabyte Transfer das ist das ist quasi so ungefährliche Größe
die jemand runtergeladen bekommt in seinen Klienten wenn er
unsere Website aufmachen. Das erste Mal quasi.
Beim ersten Mal ja, beim zweiten Mal ist dann halt die sind halt
90% von Cash und dann sind sie noch ein Kilobyte ne.
Dass dieses Casting Krams, wenn man jetzt selber Entwickler ist,
dann hat man nicht so ein super Gefühl für.
Ich bin irgendwie n dings und so weiter aber muss nochmal schien,
dass die Anwendungen nicht zu groß wird, wenn irgendwas von
300 oder irgendwas Megabyte, dann weißt du OK das ist krass
so ja dann also wenn du Mobiltelefon hast mit 3 g, dann
bist du irgendwie gestorben ja plus und das muss ich auch sagen
wir dann noch ganz wichtig als Entwicklertool jetzt gucken wir
mal kurz in dieser gleichen Netzwerk Tab ganz nach oben, da
steht no throttling. Wenn man da drauf klickt.
Da kann man die Netzwerk Presets einstellen.
Vorher haben wir tun so als wären wir i pad oder oder
Telefon. Hier kann ich sagen ich tu mal
so als hätte ich nur 3 g ja Netz geschwindigkeit ja, kann also
quasi so tun als hätte ich ein schlechtes Internet.
Voll wichtig, weiter leider noch relevant, ne.
Ja, aber ich meine, wenn du natürlich App baust, gerade so
wie wir, wenn wir bauen, dann können wir nicht davon ausgehen,
dass jeder irgendwie immer 4 g oder 5 g.
Meine ich ja leider, leider noch relevant nicht.
So genau in Deutschland, vor allen Dingen ja stimmt und dann
mal auf 3 G gedrückt und dann nochmal neu.
Dann merkt man schon, wie das alles ein bisschen zäher wird.
So ja, und wer sich so langsam mal hin rappelt und kann man
auch sehr cool mal, das ist nämlich die hohe Kunst, hat auch
schon mal seine Anwendungen so optimiert, dass man erst mal was
sieht, dann vielleicht der wichtigste hinten rein geladen
wird, aber dann schnell schnelle Display Rendering Time hat quasi
ja, da gibt es so mehrere Sachen, also Time die Zeit des
Ersten sichtbar Machens der Seite ist wichtig und dann gibt
es noch einen zweiten Benchmark ist wann ich das erste Mal
irgendwie mit der Maus interagieren so das kann man
optimieren da und vor allen Dingen auch unter schlechten
Netzwerk. OK.
Bei der Performance kommt bei mir dann.
Performance Ja, Performance Memory Application Security
kommt alles. Noch so nächstes.
Genau die machen wir jetzt. Performance Performance, Ich
komm ja müsst ihr euch mal rein denken, das sind so komplexe
Charts hier, also die werden die quasi aufgemalt, hier noch ein
bisschen dargestellt, der macht quasi Screenshots zu jederzeit
ne nachladen, das kann ich ja auch nochmal schriftlich machen,
dann wird. Und hab das vorher geklärt.
Dann wird quasi die ganze Performance aufgezeichnet und
dann sieht man quasi auch das, was man noch nicht sieht in der
Seite und so weiter und dann nach wieviel Millisekunden sehe
ich was? Das alles zum das ist alles
jetzt für die Entwickler. Ne.
Wir Entwickler sind ja daran interessiert unsere unseren
Seiten Aufbau möglichst schnell machen, die User Experience zu
optimieren, das kann ich hiermit angucken, cool gut.
Memory lass dich gleich mal ganz weg.
Also da steht auch noch mal drin.
Wieviel memory wird jetzt runtergeladen worden, wieviel
braucht die Anwendung insgesamt zur Laufzeit und so weiter viel
interessanter für jetzt jetzt vielleicht die oder irgendwas
und auch wirklich mal nutzbar ist Application der Tab.
Da bin ich jetzt und jetzt kommt es drauf an, was ich für eine
Webseite hab. Ich hab mal ganz oben steht
Manifest. 1. Manifest muss zum Beispiel jede
progressive Web haben, wenn ich die als, also wenn ich ne ne
Seite als Web App installieren kann, hat die typischerweise
Manifest mit Icons und so weiter jetzt bin ich gerade hier bei
uns auf der Homepage, die kann man jetzt nicht als App
installieren, soll sie auch nicht.
Ja Homepage steht da halt nix da.
Genau. Und dann aber spannend ist ja
der der nächste Reiter Links Storage K siehst du das?
Ja ich hab die Service workers noch dazwischen ja genau Service
workers, dass ich auch mal kurz aus Service hier kann man jetzt
Servers angucken, das sind quasi das sind das sind ja die.
Brauchen wir nicht nur die Applikation?
Da da ne aber application geht es halt um die um um was macht
die Application also was macht die Dinge Storage was sind da
lässt die quasi für kleine Hundehäufchen auf meinem
Rechner, das kann ich hier sehen ne und hundehäufchen können.
Können Anwendungen auf viele Arten heutzutage hinterlassen
und die Arten der Hundehäufchen Hinterlassung ist unter Storage
zu sehen. Ne Kekse hab ich genau Kekse
genau da hab ich jetzt local storage und Session Storage
Local Storage ist quasi ein ein Browserbasierter also im Browser
Speicher der der quasi Informationen über Page Load
hinweg hält, also alles was im Local Storage steht.
Bleibt erhalten, auch wenn ich die Seite komplett zu mache ich
nächstes mal wieder reinkomme ist noch.
Da Unterschied zwischen 18 b und n paar Kilo bytes was?
Nicht? Ja genau, es gibt so viele
Caches und so weiter und da kommen normalerweise ja, da
kommen die Sachen drin rein, die halt, das ist eigentlich so wie
Cookies, ja andere Art des Cookies werden Sachen
reingesetzt damit du ne ich sag mal was du hast zum Beispiel
deine App n bisschen konfiguriert.
Du hast zum Beispiel Spotify bist du hast zum Beispiel den
Slider verändert, dass du mehr von dem Menü siehst oder
irgendwas wird typischerweise im Lokal.
Deutscher MT festgehalten und wenn du das nächste Mal in
Spotify reinkommst, siehst du aus wie das letzte Mal verlassen
hast. Ja.
Das ist ein ganz typischer Anwendungsfall für sowas, oder
du hast auf Xing umgeschaltet, dann soll das ja, willst du
nicht jedes Mal wieder von Light of Dawn schalten, die besuchst
ja lösche den Browser und den Local Storage, das kannst du
hier machen, indem du rechtsklickst Clear, dann wirst
du sehen, dass ich ich empfehle das jetzt gerade nicht für
Seiten, die durch konfiguriert habt, dann ist wieder weg und du
musst wieder neu konfigurieren, so genau dann gibt es Storage
sag ich nur der ist halt quasi nur gültig während du den Tag
auf hast. Ja also den Tag schließt wird
das schon gelöscht, hat halt nicht so lange Lebenszeit.
Ja, und dann gibt es noch viele andere, gibt Index DB Web SQA
dann die berühmten Cookies, die man sich angucken.
Was für Cookies wurden überhaupt gesetzt?
So ja, ich war auch ganz spannend, ja und alles andere
was noch so an Cash und Speicher herumfliegt, das ist halt sehr
viel, können wir nicht auseinandernehmen, ihr seht
aber, wenn ihr euch das mal angucken wie komplex das alles
ist. So das ist auch so ein bisschen,
wo ich immer graue Haare krieg, es gibt so viele Möglichkeiten
discussions und des Speichers im Browser, dass du selbst als
Entwickler manchmal gar nicht mehr genau weißt, wo muss ich
denn jetzt hier waren, wenn ich jetzt irgendwie ne oft hört ihr
das so bei. Wir Software, die ihr müsst mal
clean so ja und clean heißt halt, dass ich das möglichst
wegfällt, dann würde alles weg, Fenster und was der Weiß von
dieser Seite von vorhin. Quasi.
Man möchte als Entwickler an der Stelle nochmal anfangen und das
Verhalten dann beobachten. Quasi weil es manchmal ein
Problem du hast zum Beispiel Teaming irgendwie irgendein alte
Einstellungen der neuen Version von einem Code gibt es nicht
mehr und verursacht nur noch Schaden, wenn das da rumsteht
und da muss man sich unglaublich viele Gedanken machen, weil
jedes Mal wenn du Hunde hundehäufchen gelassen hast beim
Klienten hast kommt das Hundehäufchen die wieder
entgegen. Auch wenn der schon in der
nächsten Version bist, weil Deployen und Versions Upgrade
können wir heute einfach machen. Aber du musst mit diesen hohen
klarkommen. 1. Der Herausforderung so mehr sag
ich dazu nicht, wir gehen weiter zum Security Tab.
Nee, gehen wir auch nicht, weil ich mich selber nicht so aus
also da steht, weil ist halt mehr so n so vor, da kannst du
halt nur das sehen, was du auch Rechtsklick auf der Seite und
schließt das Zertifikat. Angucken.
Genau, genau angucken. Wie sicher ist die Connection,
was für hatten wir auch schon mal irgendwie handshake und so
weiter. Und dann habe ich noch
Lighthouse und das ist ja das, was ich tatsächlich auch hin und
wieder benutze. Ja, aber wie benutzt?
Das benutze ich zum Beispiel gar nicht so.
Oft Lighthouse ist quasi n SEO Werkzeug, wenn man so will.
Also du kannst da quasi die Performance und die.
Ja, die Performance messen deiner Website.
Du kannst diese Accessibility messen, also sind die Buttons
weit genug auseinander. Schlug also all diese Faktoren
die Google ist auch ein Google Produkt, dann wieder in seine.
Zumindest glaubt man das in seine Such Algorithmen
einfließen lässt, um sich dann eben da gut oder weniger gut zu
positionieren. Es ist quasi ja n SEO Developer
Werkzeug, wenn man so will. Ja, voll mächtig.
Ich hab mal legt sich nicht benutzt A Maier Charts 98% City
O 47% Performance. Die Performance wird manchmal
ein bisschen beeinträchtigt, durch welche Extensions, die man
hat. Aber ich habs gemacht und ich
habe jetzt zum Beispiel hier konkret den Vorschlag bekommen,
dieses also wäre. Auf unserer Website war sieht
das n großes GIF was unsere Software Plattform immer so
vorstellt und das läuft so durch.
Und der Vorschlag wäre quasi dieses Gif ja eben einmal
auszutauschen gegen ein moderneres Format, in dem Fall
ein MP 4 Web m Video. Siehst du mal.
Alle Bilder bei uns schon was? Ja, weil viele Webseiten J oder
PS, die sind ja riesig im Vergleich zu dem was und
anscheinend würde man einen Gift durch einen MP 4 Web M Format
austauschen, das ist der konkrete Vorschlag hier an an an
uns für unsere Website durch das Lighthouse und ganz ehrlich
bisschen aus dem Nähkästchen was viele Agenturen die da draußen
anbieten für teuer Geld oder? Am Anfang als Gratisleistungen
technisches technisches Review von eurer Website.
Die machen nichts anderes sehen, einmal in F 12 Lighthouse und
drücken die Seite analysieren das glaub ich machen Screenshot
schicken, dann sagen bitteschön ja gratis.
Also könnt ihr euch sparen. Drückt der f 12 wir haben noch
oder ich noch sonnig, aber das hab ich schon, das glaube ich
schon, hab ich schon erlebt da genau jetzt sind wir einmal
durch das Tool, ich glaube wir lassen es gibt natürlich auch
immer noch die Spitze vom Eisberg von diesem Mann, das
nämlich auch wie die DS mit Plugins und so weiter auch noch
erweitern 1. Sage ich noch, deshalb habe ich
gerade neulich irgendwie installiert, total cool.
Das heißt Sensors, und das taucht dann auf in dieser, in
dieser, in diesem zweiten Teil, den ich unterschrieben kann.
Ganz unten ist immer so ne noch so ne Abteilung, irgendwie
irgendwie Informationen steht Noeding is und so weiter und da
hab ich jetzt noch so was hast du nicht geritzt, wahrscheinlich
nicht und da kann ich jetzt sogar noch auswählen, da kann
ich jetzt quasi vorgaukeln der Website jetzt da reinkommt als
wäre ich irgendwo anders, kann ich die Location auswählen, Herr
Berlin, London, Moskau, Mountain View, San Francisco, was auch
immer, was auch total wichtig ist, wenn man nämlich, was wir
jetzt gerade gemacht habe, ich jetzt entwickelt, dass der
Browser erkennt, wo bin ich und dann gleich die richtige Sprache
nimmt. Die App ja, und wenn man da so
programmiert hat, ja willst du testen, ja kannst du auch wieder
teilnehmen sagt Ich bin in San Francisco hab und die Local ja
also ENUS oder irgendwas ja und schwups könnst du reagiert der
Browser richtig, dann kannst du gucken ob das richtig
programmiert hast dann auch die englische Sprache kommt oder
Polnisch oder Türkisch oder was auch immer du dich hin machst
perfekt Frau cool also ja ist einfach Sau mächtig und ich
glaube in jetzt in einem Satz zusammengefasst die developer
Tools erlauben die halt quasi deine deine deine Web
experience. So vorzubereiten für beliebige
Devices, für beliebige Locations unter guter Performance und so
weiter da kannst du das selber nutzt jeden Tag, dann kriegst du
irgendwann ne Web Anwendung hin, die halt echt unter jeder unter
jeder Bedingung halt richtig cool läuft.
So also wie gesagt, ich hab das immer auf wenn ich entwickelt
das Tool und hab immer im Auge brauchen wir nicht so viel
Speicher funktioniert das kommt keine komischen Fehlermeldungen
und unter also empfehle ich jeden also also ich glaube alle
w Entwickler die sagen ja ja kenne ich natürlich so ja aber
halt die Laien so und einfach mal zum angucken.
Wir, die Webseite macht ja oder man wordpress oder irgendwas
dann einfach mal gucken. Ja, vielleicht gibt es irgendwas
ganz krass irgendwie einem gleich ins Auge sticht und so O
hier beschwert sich aber ganz schön heftig, kann man
vielleicht schnell aussortieren. Finde ich spannend.
Ja noch Anwendungsfall, wenn jetzt nicht so n so NCMS und
Content Management System hat wie wir, sondern vielleicht die
Website noch selbst gebaut hat T und CSS und javascript, dann
kann man als Marketing Abteilung auf die aktuelle Website gehen
oder als für die Website verantwortliche Abteilung und
kann dann in dem HTML. PS Halt Dinge ändern ja klar und
einen Screenshots machen und das dann so an die Entwicklung hier
ist ne gute Idee schicken und sagen bitte baut mir das mal
genauso um meine musst du jetzt nicht mehr eingehen und erst mal
Frames machen aber wenn du benutzt deine Webseite wenn es
nur Kleinigkeiten sind. Ja, genau, ja.
Das hab ich. Mal gemacht in der Vergangenheit
also k ob das jetzt noch irgendwie relevant aber sein ne,
das macht auch Spaß, macht Spaß, da kann man gucken, muss man
einfach mal gehört also bei uns auf jeden Fall in den Podcast
rein, weil ist halt einfach so n Ding muss man gehört haben wenn
man irgendwie mit mit Chrome unterwegs ist.
Oder gut, cool, dann fertig. Ohne Spicker heute durchgekommen
Spicker live vor der Nase. Gehört sie weiter Computer?
Also sorry nochmal das klicken, aber ihr werdet verkraften.
Ja, wenn ihr jetzt hier angekommen seid ihr schon
verkraftet, also danke fürs Zuhören und bis nächste Woche,
dann war einfach. Komplex ja, alles klar.
Tschüss Hamburg. Einfach komplex wird produziert
und präsentiert von Heisenberg. Weitere Informationen findest du
unter heißen ware.com. Vielen Dank fürs Hören dieser
Folge und bis nächste Woche Tschüss Hamburg.