06 March 2012 Chrome, Development, Web, Edit

Googles Browser hat recht clevere Developer Tools neben den “üblichen Funktionen” wie DOM Elemente finden und CSS editieren mit dabei, welche man vielleicht nicht auf den ersten Blick sieht.

Paul Irish zeigt in diesem Video einige nette Features der Dev-Tools:

 

Neben diesen Features gibt es noch weitere, hier ein paar welche ich auch erst vor kurzem entdeckt hatte bzw. nicht sofot offensichtlich sind (und nicht im Video genannt wurden) :

Javascript / CSS Editing History

imageSobald man Javascript oder CSS in Chrome editiert legt Chrome die alte Version in eine Art “History”, welche jederzeit über den “Resources” Tab wiederhergestellt werden kann.

 

 

 

 

 

 

 

“Pretty Print” für komprimierte Javascripts

Wenn man doch mal in komprimierte Javascripts reindebuggen möchte ist das im Normalfall nicht möglich, da alles auf einer Zeile steht:

image

Durch den Klick auf den Button wird der Code schon etwas besser formatiert:

image

Anmerkung zum Live Edit der Javascript Files:

Sobald man im “Pretty Print” Modus ist, kann man diese Scripts momentan nicht editieren.

Einige nette Sachen verstecken sich noch in den Settings:

image 

Leider weiß ich nicht, was alle Optionen machen:

image

Nützlich finde ich:

- Disabable cache: Zum Erzwingen, das Chrome auch immer die aktuellsten Daten holt

- Log XMLHttpRequest: Ajax Logging, welches in der Konsole erscheint

image

- Override User Agent: Um z.B. die mobilen Ansichten zu testen

image

Vermutlich gibt es noch nette andere Tipps – wer interessante Sachen kennt, welche für die Allgemeinheit nicht “allttäglich” sind, dann einfach in die Kommentare posten :)

Weitere Videos von Paul Irish

- Ein 9 Minütiges Video von der JSConf

- Ein 40 Minuten Video von der Google I/O 2011


blog comments powered by Disqus