Egy ideje nyúzom a Visual Studio 11-et és találtam benne több hasznos eszközt is, ami sokat segít Metro stílusú alkalmazások készítésekor. Íme a kedvenceim:
Simulator
Hozzá vagyunk szokva, hogy az emulátorok általában körülményesek és lassúak, de ha már próbáltuk a Windows Phone Emulatort, akkor rájöhettünk, hogy ez nem mindig van így, sőt kifejezetten hasznosak fejlesztéskor. A Visual Studio 11-ben kapunk egy szimulátort, ami nagyon praktikus Metro stílusú alkalmazások teszteléséhez (katt a nagyobb képért):

Jobb oldalon sorban a funkciók:
- Mouse mode
- Start touch emulation
- Touch emulation pinch/zoom
- Touch emulation rotate
- Rotate simulator clockwise
- Rotate simulator counterclockwise
- Change resolution
- Set location
- Capture screenshot
- Screenshot settings
- Help
Amint látható, belepakoltak egy rakás olyan funkciót, amit egyébként csak fizikai eszközön lehetne kipróbálni. Külön érdekes, hogy a fenti gépen látható elrendezést én nem a szimulátorban állítottam össze, hanem ez pontosan megegyezik a hoszt gépem Start képernyőjével (remote desktop). A Simulator egyáltalán nem tűnik lassúnak (bár igazán pörgős alkalmazással még nem teszteltem), ráadásul közvetlenül a Studio toolbarjáról szabályozhatjuk, hogy ott induljon a programunk:

DOM Explorer
Miután sikerült elindítanunk az alkalmazást, jöhet a hibakeresés, ami weboldalaknál és most már JavaScriptes Metro stílusú alkalmazásoknál a layout és a CSS kipofozásával kezdődik. Itt lehet óriási segítség a Debug – Windows menüből elérhető DOM Explorer ablak, ami lényegében egy Internet Explorer Developer Toolbar Metro alkalmazásokhoz:

Az IE Developer Toolbar funkcióit nem kell bemutatnom, a Select Element gombra kattintás után itt is ugyanúgy rábökhetünk akár a Simulatorban, akár a futó alkalmazásban bármelyik felhasználói felület elemre és megnézhetjük a hozzá tartozó DOM részletet. Újdonság viszont, hogy a felső részen látszik, hogy az adott DOM elemet melyik fájl generálta és egy kattintással megnyithatjuk az adott forrásfájlt. Ez azért izgalmas, mert a bal oldalon nem a forráskódunk látszik, hanem a forráskód által fabrikált kész DOM, tehát egy lista esetén például már a renderelt DOM-ot látjuk, nem az item template-et. A böngészős dev toolbarhoz hasonlóan itt is lehet bármit röptében módosítani a kódban, ami azonnal megjelenik a felhasználói felületen (ami nem meglepő, hiszen a kódunkat az IE futtatja a WWAHost processzen belül).
Szintén nagyon hasznos a jobb oldalon található Events fül, ahonnan pedig az elemhez tartozó eseménykezelőkre ugorhatunk. Íme például egy AppBar button lelkivilága:

Refresh Windows app
Persze előfordul, hogy a hiba nem a HTML vagy CSS fájlban, hanem JavaScript kódban van. Ilyenkor egy igazi webfejlesztő csak belejavít a kódba, nyom egy gyors F5-öt és máris teszteli a javítást a böngészőben. Szerencsére ennek is van megfelelője itt, úgy hívják, hogy Refresh Windows app és megtalálható a toolbaron, vagy indítható közvetlenül a CTRL+SHIFT+R kombinációval (hamar megtanulja mindenki):

Sajnos nem csak az adott oldalt frissíti, hanem újraindítja az egész alkalmazást, de úgy vettem észre, hogy még mindig ez a leggyorsabb megoldás.
Nektek mi jön be leginkább az új Studioban?
Like this:
Like Loading...