Hasznos Visual Studio eszközök Windows 8 Metro stílusú alkalmazások készítéséhez

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):

Simulator

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:

Visual Studio 11 - Indítás emulátorban

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:

DOM Explorer

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:

DOM Explorer - Events fül

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):

w8-refresh

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?

 

Technorati-címkék: ,,
Reklámok

One thought on “Hasznos Visual Studio eszközök Windows 8 Metro stílusú alkalmazások készítéséhez

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s