Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Chrome Dev Tools: Insidertipps

Chromes Version von Firebug hat sich ordentlich gemausert. Inspiriert durch dieses Video gibts hier nun also ein paar nicht so bekannte Features der Devtools.

Konsole überall einblenden

In jedem Panel der Devtools lässt sich mittels Druck auf ESC die Konsole hochfahren und so simultan arbeiten.

Konsole hochfahren

Konsole hochfahren

Weitere Shortcuts gibts hier.

Die Funktionen dir() und copy()

Bekanntlich lässt sich durch Eingabe des DOM-Elements in die Konsole das HTML dazu selektiv anzeigen (siehe Bild oben: document.body). Mittels der Funktion dir() lässt sich eine weit detailliertere Auflistung anzeigen, die u.a. auch Event Handler anzeigt:

dir

dir

Mit copy() lässt sich Text in die Zwischenablage kopieren.

copy(document.body.innerText)

Danach befindet sich der gesamte lesbare Text der Webseite in der Zwischenablage.

Ach, bevor ichs vergesse: $0 ist eine Referenz auf das aktuell markierte Element:

$0

$0

Farbmodell wechseln

Per Klick auf den farbigen Kasten lässt sich das Farbmodell togglen. Zur Verfügung steht die Hex-Anzeige von RGB, RGB in ausgeschriebener Form und das sehr intuitive HSL.

HEX

HEX

RGB

RGB

HSL

HSL

Dateirevisionen

Wenn man im „Element untersuchen“ Modus CSS-Änderungen vornimmt und anschließend auf die CSS-Datei klickt (markiert), hat man nun die Möglichkeit, alte Revisionen anzusehen und diese wiederherzustellen.

File Revision 1

File Revision 1


File Revision 2

File Revision 2

In den Chrome canary builds (Entwicklungsversion) gibt es dann zusätzlich noch die Möglichkeit, das CSS direkt aus dieser Ansicht heraus zu speichern.

File Revision 3

File Revision 3

Codeformatierung

Leider ebenfalls noch dem Canary-Build vorbehalten: Pretty Printing von Code. Minifiziertes Javascript lässt sich so schön betrachten:

Codeformat: Auf die Klammern klicken

Codeformat: Auf die Klammern klicken

Anschließend sieht es dann so aus:

Formatiert

Formatiert

Die Timeline

Kein wirklicher Geheimtipp, aber trotzdem von vielen vernachlässigt: Die supermächtige Timeline-Ansicht. Hier verrät euch Chrome, was so im Hintergrund alles abgeht. Reflows, Repaints, Requests… Alles wunderbar aufgelistet:

Timeline

Timeline

Remote Debugging

Das meiner Meinung nach geilste Feature im Canary Build (was es hoffentlich so schnell wie möglich in die offizielle Version schafft!): Remote Debugging. Dazu startet ihr Chrome einfach mit dem Parameter

--remote-debugging-port=<portnummer>

Remote Debugging

Remote Debugging

Dann Chrome starten und in einer neuen Instanz (muss nicht der canary-build sein) auf http://localhost:portnummer connecten.

Was wir sehen sind also erstmal die offenen Tabs der anderen Browser-Instanz.

Remote Debugging

Remote Debugging

Wählen wir jetzt ein Tab aus, bekommen wir die Konsole des anderen Browsers präsentiert und können uns austoben. Superpraktisch, wenn man bspw. für mobile Geräte entwickelt.

Remote Console

Remote Console

Mehr zum Remote-Debugging.