Chrome Developer Tools–”Hidden Gems”

image.png

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

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

Comment on this post

Letzte Posts

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

  • image.png
    ASP.NET Bundling & Fontawesome

    Vor einer halben Ewigkeit hatte ich mal geschrieben wie man Fontawesome in ASP.NET nutzen kann. Aufgrund des Alters des Post und einem Kommentar ob man denn Fontawesome auch in das ASP.NET Bundling Framework integrieren kann möchte ich nur ein kurzes Update schreiben. TL;DR: NuGet Package “Fontawesome” runterladen und Pfad in der Bundleconfig angeben. Kurze Schritte […]

Amazon Shop

Facebook