Als Frontend-Webentwickler ist man mit den Browser Debugging Tools bestens vertraut. Sei es die Developer Tools vom Internet Explorer oder Firebug für Firefox. Mit Hilfe der Developer Tools lassen sich schnell Variablen prüfen, DOM Elemente sichten und on-the-fly Zuweisungen in der Console durchführen.

Und genau die gleiche Art von Tooling gibt es auch für Windows Store Apps die mit HTML5 / JavaScript geschrieben werden. Oder anders: für WinJS Apps.

WinJS Controls erzeugen DOM Elemente

Speziell das Sichten der Elemente im DOM Tree ist wichtig um bestimmte CSS Regeln und deren Anwendung zu finden. Dies ist dann besonders nützlich wenn man WinJS UI Controls verwendet. Aus dem kleinen HTML Schnipsel hier unten

<section aria-label="Main content" role="main">
<div id="list" data-win-control="WinJS.UI.ListView"></div>
</section>

wird zur Laufzeit dieses HTML generiert

<div tabindex="-1" class="win-listview win-swipeable" id="list" role="listbox" style="position: relative;" data-win-control="WinJS.UI.ListView">
<div tabindex="-1" class="win-viewport win-horizontal" role="group" aria-label="Scrolling Container">
<div id="ms__id3" aria-flowto="ms__id4"></div>
<div class="win-surface">
<div class="win-backdrop" aria-hidden="true" style="width: 0px; height: 0px;"></div>
<div class="win-backdrop" aria-hidden="true" style="width: 0px; height: 0px;"></div>
<div class="_win-proxy"></div><div tabindex="0" aria-hidden="true"></div>
<div style="left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;"></div>
<div tabindex="0" aria-hidden="true"></div>
</div>
<div id="ms__id4" x-ms-aria-flowfrom="ms__id3"></div>
</div>
<div tabindex="0" aria-hidden="true"></div>
<div aria-hidden="true" style="left: 50%; top: 50%; position: absolute;">
<div aria-hidden="true" style="width: 0px; height: 0px;"></div>
</div>
<div tabindex="0" aria-hidden="true"></div>
</div>

Dies geschieht durch die Instanzierung des WinJS Controls das mittels des Attributesdata-win-control="WinJS.UI.ListView" definiert ist. Je nach Control werden zusätzliche HTML DOM Elemente angehängt und Funktionalität mit diesen verknüpft. Im obigen erzeugten HTML sieht man auch neue CSS Klassen, zum Beispiel win-backdrop. Diese CSS Klassen haben ein vordefiniertes Look & Feel das zum Gesamterscheinungsbild des Controls passt. Es gibt eine Vielzahl solcher CSS Klassen die in der Visual Studio Hilfe beschrieben sind. Diese Klassen kann man dann als Anker nehmen um eigenes Styling durchzuführen.

IE Tools in Visual Studio 2012

Möchte man nun nachschauen wie das momentane Live DOM der Anwendung aussieht so startet man die Anwendung im Debug Mode aus Visual Studio und wechselt mittels ALT TAB zurück in die Entwicklungsumgebung. Im Reiter DOM Explorer hat man das DOM im Überblick sowie auch die angewendeten CSS Regeln.

Möchte man ein bestimmtes UI Element im DOM finden so kann man das über die Select Element Funktionalität machen.

 

Die Anwendung erscheint und man kann das Element auswählen welches man begutachten möchte

Alles bekannt und doch neu

Mit Hilfe der Developer Tools in Visual Studio 2012 hat man die gleichen Debugging Möglichkeiten wie man diese vom Browser her kennt. Es liegt allerdings eine leichte Lernkurve in der Verwendung der WinJS Controls, speziell wenn es um das Styling dieser geht.