Abo
  • Services:
Anzeige

Webkits Web Inspector deutlich aufgebohrt

Werkzeug für Webentwickler mit JavaScript-Debugger und -Profiler

Das Webkit-Team hat seinen Web Inspector deutlich erweitert. Ähnlich wie Firebug soll er Webentwicklern das Leben erleichtern und wartet dazu mit zahlreichen neuen Funktionen auf. Auch ein JavaScript-Debugger und ein Profiler wurden integriert.

Web Inspector Toolbar
Web Inspector Toolbar
WebKits Web Inspector soll zum besten Werkzeug für Webentwickler werden und dazu soll die gesamte Community bei der Entwicklung mithelfen, heißt es im Webkit-Blog Surfin' Safari. Dabei ist der Web Inspector selbst in HTML, JavaScript und CSS realisiert, was die Einstiegshürden für neue Entwickler gering halten soll.

Anzeige

Zunächst einmal wartet der Web Inspector mit einem neuen, an Aufgaben orientierten Design auf. In der Toolbar können die Aufgabengruppen Elemente, Ressourcen, Scripte, Profile und Databanken gewählt werden. Überarbeitet wurde auch die Konsole, die aus jedem Panel über die Statusleiste aufrufbar ist. Hier werden Fehler- und Warnmeldungen aufgeführt, die jeweilige Anzahl in der rechten unteren Ecke der Statusleiste angezeigt. Zudem soll die Kommandozeile eine höhere Kompatibilität zu der von Firebug und dem window.console API bieten.

Element-Panel

Element-Panel
Element-Panel
Aus dem DOM-View wurde das Element-Panel, das äußerlich seinem Vorgänger ähnelt, aber im Innern einige Änderungen erfahren hat. So kann auch der DOM-Tree von Subdokumenten aufgeklappt werden, beispielsweise von einem Frame oder Objekt. Zudem wird der DOM-Tree automatisch aktualisiert, wenn Nodes hinzugefügt oder entfernt werden. Fährt der Mauszeiger über Elemente der Seite, werden diese auch im DOM-Tree des Element-Panel hervorgehoben und können so angesteuert werden.

CSS-Eigenschaften lassen sich über Checkboxen temporär deaktivieren, ihre Werte ändern, wobei numerische Werte auch mit den Pfeiltasten um jeweils 0,1 erhöht oder verringert werden können. Wird zudem die Umschalttaste gedrückt, verändern sich die Werte in 10er-Schritten. Auch DOM-Attribute können im Element-Panel verändert, neue hinzugefügt oder bestehende entfernt werden.

Ressourcen-Panel

Ressourcen-Panel
Ressourcen-Panel
Beim Ressourcen-Panel handelt es sich um eine erheblich aufgewertete Version dessen, was zuvor das Netzwerk-Panel war. Es zeigt noch immer eine Zeitleiste, die Aufschluss darüber gibt, welche Elemente wann geladen werden und wie lang dies jeweils dauert. Die einzelnen geladenen Ressourcen lassen sich dabei nun nach ihrer Größe, Latenz, Ladezeit und anderen Kriterien sortieren. Die Latenz, also die Zeit zwischen der Anfrage und dem ersten Teil der Antwort des Servers, wird in einer helleren Farbe dargestellt, wobei für die Elementtypen - Dokumente, Stylesheets und Bilder - unterschiedliche Farben genutzt werden. Auch XMLHttpRequests können explizit angezeigt werden.

JavaScript-Debugger und -Profiler

Script-Panel
Script-Panel
Hinter dem Script-Panel versteckt sich ein integrierter JavaScript-Debugger, der den Standalone-Debugger Drosera ersetzt. Er soll vor allem schneller und bequemer zu nutzen sein. Durch Click in den Code können Breakpoints gesetzt oder der Code schrittweise ausgeführt werden. Der Web Inspector zeigt alle tatsächlich sichtbaren Variablen an und woher sie kommen: ob es sich um Closures handelt, innerhalb eines With-Block angesprochen wurden oder implizit aufgrund eines Event-Aufrufes bereitstehen.

Ein neuer JavaScript-Profiler verbirgt sich hinter dem Profil-Panel. Er zeigt, wie viel Zeit die Ausführung einzelner JavaScript-Funktionen benötigen wird. Entwickler können so leicht erkennen, welche Teile ihre Applikation ausbremsen. Dabei ist WebKits JavaScript-Profiler kompatibel mit den Firebug-APIs console.profile() und console.profileEnd().

Datenbank-Panel

Datenbank-Panel in der Query-Ansicht
Datenbank-Panel in der Query-Ansicht
Das Datenbank-Panel gewährt Einblick in die Inhalte der im Browser gespeicherten Datenbanken, die mit HTML 5 eingeführt werden. Webkit unterstützt diese in den aktuellen Entwicklerversionen bereits. Via SQL können die Datenbanken abgefragt und verändert werden.

Zudem wurde die Suchfunktion des Web Inspector deutlich ausgebaut und der neuen Struktur angepasst.

Der neu Web Inspector des Webkit-Teams ist in den aktuellen Entwicklerversionen der Browser-Engine Webkit für Windows und MacOS X enthalten, die unter nightly.webkit.org heruntergeladen werden können.


eye home zur Startseite
MS-Admin 03. Okt 2008

und SeaMonkey schon seit Ewigkeiten.

Netspy 02. Okt 2008

Firefox 3.1 Alpha 2: 85/100 Safari 3.1.2: 75/100 (mit Grafikfehlern) Webkit (aktueller...

Vermeer 02. Okt 2008

Danke, genau das war's.

autor 02. Okt 2008

Ja, der hat ja jetzt auch schon den Web Inspector. Nur halt noch nicht diese neue Version.


Joerns Blog / 02. Okt 2008

Das Ende vom Firebug?



Anzeige

Stellenmarkt
  1. UNIQ GmbH, Holzwickede
  2. BWI GmbH, Leipzig, deutschlandweit
  3. NOVENTI HealthCare GmbH, Aschheim
  4. Bosch Sensortec GmbH, Reutlingen


Anzeige
Top-Angebote
  1. 129,99€ (219,98€ für zwei)
  2. 49,99€ + 5,99€ Versand (Vergleichspreis 65,87€)

Folgen Sie uns
       


  1. Neuer Standort

    Amazon sucht das zweite Hauptquartier

  2. Matt Booty

    Mr. Minecraft wird neuer Spiele-Chef bei Microsoft

  3. Gerichtsurteil

    Internet- und Fernsehkunden müssen bei Umzug weiterzahlen

  4. Sicherheitsupdate

    Microsoft-Compiler baut Schutz gegen Spectre

  5. Facebook Messenger

    Bug lässt iPhone-Nutzer nur wenige Wörter tippen

  6. Multi-Shot-Kamera

    Hasselblad macht 400-Megapixel-Fotos mit 2,4 GByte Größe

  7. Mitsubishi

    Rückkamera identifiziert Verkehrsteilnehmer

  8. Otherside Entertainment

    Underworld Ascendant soll mehr Licht ins Dunkle bringen

  9. Meltdown und Spectre

    "Dann sind wir performancemäßig wieder am Ende der 90er"

  10. Google Play Services

    Update gegen Chromecast-WLAN-Blockade kommt bald



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Nachbarschaftsnetzwerke: Nebenan statt mittendrin
Nachbarschaftsnetzwerke
Nebenan statt mittendrin
  1. Curie Google verlegt drei neue Seekabel
  2. Nextdoor Das soziale Netzwerk für den Blockwart
  3. Hasskommentare Neuer Eco-Chef Süme will nicht mit AfD reden

Sgnl im Hands on: Sieht blöd aus, funktioniert aber
Sgnl im Hands on
Sieht blöd aus, funktioniert aber
  1. NGSFF alias M.3 Adata zeigt seine erste SSD mit breiterer Platine
  2. Displaytechnik Samsung soll faltbares Smartphone auf CES gezeigt haben
  3. Vuzix Blade im Hands on Neue Datenbrille mit einem scharfen und hellen Bild

EU-Urheberrechtsreform: Abmahnungen treffen "nur die Dummen"
EU-Urheberrechtsreform
Abmahnungen treffen "nur die Dummen"
  1. Leistungsschutzrecht EU-Kommission hält kritische Studie zurück
  2. Leistungsschutzrecht EU-Staaten uneins bei Urheberrechtsreform

  1. Pixelshift - Eine Erklärung (in Englisch)

    zenker_bln | 18:44

  2. Re: Kein Entdecker, sondern Entwickler von...

    short reader | 18:44

  3. Re: Legalisierte Geldwäsche

    DAUVersteher | 18:42

  4. "Fliegenschiss"

    cicero | 18:41

  5. Re: Unverständlich geschriebener Artikel

    ad (Golem.de) | 18:38


  1. 16:57

  2. 16:48

  3. 16:13

  4. 15:36

  5. 13:15

  6. 13:00

  7. 12:45

  8. 12:30


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel