Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Webseiten restaurieren und optimieren: Jede Woche neu

Die Chrome-Entwicklertools auf einen Blick

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Webseiten sind heute einfach zu erstellen und auch schnell live gestellt - doch bereits zum Start sollten Sie als Betreiber für die Zukunft gewappnet sein: Wie können Sie Ihre Inhalte über einen längeren Zeitraum "frisch" halten? Wie lassen sich Zugriffszeiten optimieren? Wie reagiere ich auf aktuelle Designtrends und bessere Bandbreiten? Wie schütze ich mich vor Datenverlust und Hacker-Angriffen? Antworten und Hilfe zu diesen und vielen ähnlichen Fragen finden sie zuhauf in dieser praktischen Tipp-Serie.
05:33
  Lesezeichen setzen

Transkript

Firefox hat seinen eigenen Entwickler-Firefox und Chrome seinerseits baut seine Entwicklerwerkzeuge auch immer weiter aus. Fast sieht es so aus, als hätten die einzelnen Browser-Hersteller eine neue Spielwiese gefunden, auf der sie sich gegenseitig matchen können. Was mir aber in diesem Fall im Vergleich zu früher sehr recht ist, weil es natürlich meine Arbeit erleichtert. Sehen wir uns an, was auch bei Chrome jetzt bei den Entwicklertools an spannenden Neuerungen dazu gekommen ist Chrome sorgt also mit jedem Update seines Browsers auch gleichzeitig dafür, dass die Entwicklertools weiterentwickelt werden und mit neuen Erweiterungen auftrumpfen können. Die Entwicklertools können Sie aufrufen entweder über diese kleinen Menüpunkte und dann über Weitere Tools und Entwicklertools oder aber auch über die Tastenkombination Strg+Umschalt+I. Und auf den ersten Blick sehen Sie hier lauter alte Bekannte. Sie haben eben die Möglichkeit, die klassischen, schon immer verwendeten Tools weiter zu benutzen. Sie haben aber auch hier unten einen kleinen Punkt mit What's New. Und es rentiert sich immer da mal kurz vorbei zu schauen, um sich anzusehen, was neu dazugekommen ist. Falls Sie diesen Eintrag nicht sehen, dann können Sie ihn sich über diese Menüpunkte und Show console drawer anzeigen lassen oder einfach, indem Sie bei geöffneten Entwicklertools auf die Esc-Taste drücken. Das Erste, was ich Ihnen zeigen möchte, ist eine Möglichkeit sich Skripte ausgeben zu lassen und deren Verwendung anzeigen zu lassen. Dazu habe ich hier noch einmal die Möglichkeit, weitere sogenannte drawer zu öffnen und das, was wir brauchen, heißt Coverage, also die Abdeckung, die verwendet wird. Jetzt mache ich gleich hier ein bisschen mehr Platz, damit wir auch mehr sehen können. Und habe jetzt die Möglichkeit, eine Momentaufnahme zu starten. Das tue ich, lass eine Weile laufen, stoppe dann das Ganze und bekomme hier jede einzelne Skript-Datei aufgelistet, inklusive dem Anteil von verwendeten und nicht verwendeten Skript-Elementen. Und wenn ich genau mir ansehen möchte, welche Teile jetzt zum Einsatz kommen, innerhalb eines bestimmten Skripts, dann kann ich hier direkt auf den Link klicken, und bekomme hier oben jetzt ausgegeben mit einer grünen Begrenzung, die Sachen, die auf der gerade geöffneten Seite zum Einsatz kommen und rot, die Funktionen und Elemente, die jetzt gerade nicht zum Einsatz kommen. Sie können sich also vorstellen, wenn Sie hier jetzt auf Elemente treffen, die nur aus einem roten Balken bestehen, dann können Sie davon ausgehen, dass es sich um ein Skript handelt, was gar nicht zum Einsatz kommt und wo Sie dann die Notwendigkeit dieses Skripts auch durchaus hinterfragen können. Die Farbgebung muss nicht unbedingt so bleiben. Da habe ich läuten hören, dass man sich da bei den nächsten Versionen schon wieder eine Änderung überlegt. Eine andere recht spannende Neuerung ist die, dass Sie jetzt so eine Schnellzugriffs-Möglichkeit haben um auf die einzelnen Befehle zugreifen zu können und die erreicht man wahrscheinlich am allerschnellsten wieder durch eine Tastenkombination, vorausgesetzt, Sie haben die Entwicklertools offen. Mit Strg+Umschalt+P bekommen Sie da jetzt nämlich die Möglichkeit, auf einem Schnellzugriff auf diverse Elemente, die eben die Entwicklertools bereitstellen. Schön sortiert nach den einzelnen Inhalten. Und das erleichtert die Suche und den Weg schon auch sehr beziehungsweise können Sie sich hier auch mal einen raschen Überblick über die Möglichkeiten verschaffen. Ein kleines Detail möchte ich Ihnen noch zeigen, was mir persönlich sehr gut gefällt. Nämlich die Möglichkeit, dass ich einen Screenshot machen kann und zwar von der gesamten Seite, also von der gesamten Screengröße. Ich werde jetzt hier mal dafür sorgen, dass ich eine andere Ansicht bekomme, nämlich so eine responsive Ansicht, werde jetzt zur besseren Sichtweise auch noch hier meinen Zugriff verändern, und habe jetzt die Möglichkeit eines Screenshots, wenn ich hier auf die Optionen gehe und sage Capture full size screenshot. ich klicke drauf und bekomme jetzt hier tatsächlich ein Bild heruntergeladen und wenn ich mir jetzt dieses Bild anschaue, dann sehe ich, dass ich den gesamten Seiteninhalt also die volle Länge angezeigt bekomme und zwar so, dass Sie auch für mich noch gut darstellbar und gut anschaubar wird. Damit habe ich eine Möglichkeit, mir meine Seiten, die ich entwickle, auch in dieser Ansicht abzuspeichern, um sie dann eventuell zum Beispiel auch meinen Kunden zeigen zu können. So, das war jetzt an der Oberfläche gekratzt, was die Möglichkeiten von den Entwicklertools bei Chrome betrifft und wie gesagt, mit jeder neuen Browserversion kommen auch Erweiterungen für die Entwicklertools.