Kezdőlap > Internet Explorer 9 > Internet Explorer 9 – Dev. Tools

Internet Explorer 9 – Dev. Tools

2011. május 4. szerda Hozzászólás Go to comments

Fejlesztés

Korszerű webes alkalmazások fejlesztéséhez szükségünk vannak fejlesztő eszközökre. Ma már nem elég, hogy egy sima szövegszerkesztő. Sok eszköz van a weben amivel tudunk webes alkalmazásokat fejleszteni.  Lehet ez a Visual Studio, lehet ez akár egy Dreamwaver vagy lehet a Microsoft egyik legjobb webes fejlesztési eszköze a Microsoft Expression Web terméke.

A fejlesztéshez mi az Expression Webet ajánljuk, de akár egy egyszerű szövegszerkesztő is elég. Ez az eszköz azért is jó, mert elősegíti a szabványos webes alkalmazások készítését ráadásul nem csak microsoftos technológiákhoz használható!

Az Expression Web 4 Trial változatta innen tölthető le.

 

Az Expression Web korszerű, szabványokra épülő, kiváló minőségű webhelyek létrehozásához kifejlesztett professzionális tervezőeszköz. Segítségéveimagel csökkenthetjük a műveletek összetettségét, és egyszerűsíti az adatok integrációját. XML-adatok gyors feldolgozására is alkalmas, hatékony tervezőeszközök és munkaablakok használatával.  Összehangolhatjuk, a webtervezők és a fejlesztők csoportjainak munkáját. Ezen kívül az Expression Web és a Visual Studio kiváló XML-, ASP.NET-, PHP- és XHTML-támogatással is rendelkezik.

Tehát az Expression Webbel dinamikus, interaktív weblapokat készíthetünk, amelyek a web lehetőségeinek kihasználásával kiváló minőséget nyújtanak a felhasználóknak. Napjaink korszerű webes szabványainak beépített támogatásával egyszerűen készíthetünk olyan webhelyeket, amelyek mindenki számára elérhetők, és tetszőleges böngészővel megtekinthetők.

Expression SuperPreview

Azt már tudjuk, hogy az Expression Web jó társunk lehet a webes fejlesztésben. De mit tud még? 

Az Expression Web 4 SuperPreview segítségével megnézhetjük, hogy az oldalunk, hogy néz ki több különböző böngészővel. (Internet Exploer 6,7,8,9 Firefox 3.6 stb)

image

Ez nagysegítség a web fejlesztőknek. Rögtön képet kaphatnak arról, hogy bizonyos böngészőkön, hogy mutat az oldaluk. Láthatjuk az összes Internet Explorerrel valamint Firefox-al is.

De mi van azokakkal a böngészőkkel amik a gépünkön nincs telepítve, vagy egyáltalán a Microsoft platformon el se érhető. Például a Macintoshra tervezet Safari. Ezekkel a böngészőkkel, hogy tudjuk letesztelni? Erre nyújt megoldást a Remote Borwsers támogatás.

Az új Expression Web 4 SuperPreview-ban egy úgynevezett Remote Browsers lehetőséget is kapunk, ami előnézetet generál nekünk más böngészőre és operációs rendszerre. Ez a lehetőség rögtön feltűnhet, ugyanis a böngészők felsorolása alatt egy Remote Browsers Beta sor is felhívja rá a figyelmünket, valamint a Location mellett egy új ikon is ezt a lehetőséget szolgáltatott előhívni.

image

Nincs más dolgunk, mint egy érvényes mail címmel regisztrálni, majd a válasz levében kapott linkre kattintva aktiválni a szolgáltatást. A levélben egyébként kapunk egy rövid útmutatást a szolgáltatás aktiválásához, és használatához is.

image

A szolgáltatás még jelenleg béta állapotban van, ezért előfordulhatnak fennakadások, illetve szolgáltatás bővítése is folyamatos.  Például, ha nincs is a gépünkön IE9 akkor a Remote Browsers el megnézhetjük. Ez a funkció nem rég érhető el.

Jelenleg a Safari 4 és 5 verziójú böngészőt támogatja a szolgáltatás, mint plusz böngészőt a meglévő Internet Explorer 6 / 7 / 8 / 9 és Firefox 3.6 mellett.

Developer Tools

De nem csak egy fejlesztő eszköz lehet jó társunk a webfejlesztésben. Az Internet Explorer 9-be integrált fejlesztői segédeszköz, mely megkönnyíti a webfejlesztők imageés CSS designerek dolgát. A DevTools segítségével:

·         Hatékonyan és átláthatóan debuggolhatunk JavaScript kódot

·         Javascript kód-teljesítményt mérhetünk a profilerrel

·         In-Time („Futás-közben”) módosíthatunk elemeket, tulajdonságokat a HTML dokumentumunkban

·         Tesztelhetjük oldalunk viselkedését különböző Internet Explorer verziójú motorok alatt

·         Monitorongolhatjuk a cachelést és a sütik kezelését

·         Fejlett kódformázásának köszönhetően gyorsabban kereshetünk hibákat

·         Validálhatjuk CSS és HTML kódunkat

·         Tájékozódhatunk az oldallal letöltődött képek tulajdonságairól

Futásidejű HTML módosítás

Nézzünk, meg közelebről néhány funkciót

1.      Nyissunk meg egy tetszőleges weboldalt, a mi esetünkben, ez most az msn.com lesz.

2.      Nyomjuk le az F12 gombot.

3.      A bal oldali ablakban, a website hierarchikus ábrázolását láthatjuk. Kezdjük el lenyitni az egyes ágait a weboldalnak.

image

4.      A head ág alatt a title element értékét „MSN.com”-ról változtassuk, mondjuk „Sajatweboldal.com”-ra. Láthatjuk, hogy amint leütjük az Enter gombot, a változás azonnal végrehajtódik az oldalon, persze csak kliens oldalon.

5.      Most a „HTML” fülről, lépjünk át a „CSS” fülre.

image

6.      Láthatjuk, hogy a Developer Tools nem csak egy CSS fájlt tud kezelni, bármelyiket módosíthatjuk, módosításunk pedig azonnal életbelép.

7.      Állítsuk át az oldal betűméretét 70%-ról 40%-ra a „Body”, „font-size” elemnél.  Láthatjuk, hogy a beállításunk azonnal érvényesül, a betűk összemennek.

JavaScript Debugger és Profiler

Szintén egy olyan funkció ami JavaScript fejlesztőknek hasznos lehet?

1.      Először készítsünk el egy egyszerű JavaScriptes kódot. Helyezzünk fel két gombot és egy labelt egy html oldalra a body tag-ek közé:

<label id="kifejezes"></label>

<p><input type="button" value="Új adatok" onclick="beKer();"></p>

<p><input type="button" value="Kiszamol" onclick="kiSzamol();"></p>

2.      Helyezzük el az oldal head tag-jei közé a JavaScript kódot:

<script>

var elso = 0;

var masodik = 0;

var muvelet = ‘+’;

var eredmeny = 0;

 

function beKer() {

       elso = parseInt(prompt(‘Elso szam’,‘5’));

       masodik = parseInt(prompt(‘Masodik szam’,‘5’));

       muvelet = prompt(‘Kerem a muveletet’,‘+’);

       document.getElementById("kifejezes").innerText = elso + muvelet + masodik + ‘=’;

}

 

function kiSzamol() {

       switch (muvelet) {

              case ‘+’: eredmeny = elso+masodik; break;

              case ‘-‘: eredmeny = elso-masidk; break;

              case ‘*’: eredmeny = elso*masodik; break;

              case ‘/’: eredmeny = elso/masodik; break;

       }

       document.getElementById("kifejezes").innerText = elso + muvelet + masodik + ‘=’+eredmeny;

}

</script>

A beKer() metódus bekér két számot és egy műveleti jelet a JavaScript prompt metódusával. A kifejezést pedig kiíratja az elhelyezett label-re. A metódust hozzákötjük az „Új adatok” feliratú gombra. A számolást egy külön metódus végzi, a kiSzamol(), melyet hozzárendelünk a „kiszamol” feliratú gombhoz. A metódus megvizsgálja a műveleti jelet és elvégzi a műveletet a két bekért számon, az eredményt pedig kiírja a label-re.

3.      Mentsük el a HTML oldalt, és nyissuk meg Internet Explorer 9-ben. Nyissuk meg, próbáljuk ki a funkciókat.

4.      Nyissuk meg a DevTools-t az F12 gombbal, válasszuk ki a „Script” fület és kattintsunk a „Start Debugging” gombra, majd a  felbukkanó dialógusablakra, „OK” gombbal. A DevTools most engedélyezi a JavaScript debuggert és újratölti az oldalt.

5.      Most helyezzünk el egy BreakPoint –ot  a 22-ik sorban,  a kiSzamol eljárás alá, ami akkor hajtódik végre, amikor rákattintunk a „Kiszámol” gombra.

image

6.      Váltsuk ki az eseményt, kattintsunk először a „Bekér” gombra, adjuk meg a kívánt adatokat, és kattintsunk a „Kiszámol” gombra.

7.      Mint láthatjuk, az esemény kiváltódott, a kód futása megállt a breakpoint-nál.

8.      Most az F11, Shift F11, F10 gombokkal navigálhatunk a kódban.

9.      Mindezt az Internet Explorerből csináltuk, külön fejlesztőikörnyezet használata nélkül.

10.  A „Watch” menüpontban listát készíthetünk azokról a változókról, amelyeket a kód futása során figyelemmel kívánunk kísérni.

11.  Adjuk hozzá a listához a váltózóinkat a listához egyesével: „elso”, „masodik”, „harmadik”.

12.  Ha duplán kattintunk az értékre, módosíthatjuk, a script futása során, már a módosított értékkel fog dolgozni.

13.  A CallStack menüpont figyelemmel kíséri kódunk futásának minden egyes lépését. Lényegében a Stack szerepét tölti be.

image

14.  Válasszuk ki a Profiler-t a felső fülek közül, és kattintsunk a „Start Profiling” gombra.

15.  Most végezzünk valamiféle aktivitást az oldalon, végezzünk el pár műveleti számítást.

16.  Lépjünk vissza a DevTool-ba és kattintsunk a „Stop Profiling” gombra.

17.  Láthatjuk, hogy az ablakon megjelentek a háttérben lefutott metódusok meghívásának száma, futási ideje, lefutott kódsorok száma, URL. A rekordokat rendezhetjük bármelyik tulajdonság szerint.

18.  A „Current View” menüpont alatt válthatjuk a nézetet. Az alap nézet a metódus szerinti, váltsuk át ezt hierarchikus nézetre, így láthatjuk, hogy mely metódus, mely metódusok felé indít hívást.

image

Validátorok

Lehetőségünk van arra, hogy a W3C oldalai segítségével az általunk kiválasztott oldalt levalidáljuk.image

1.      Most a validátorokat fogjuk tesztelni. Navigáljunk el a http://index.hu oldalra.

2.      Nyissuk meg a DevTool-t az F12 gombbal.

3.      Válasszuk ki a „Validate” menüpont alól a „HTML” elemet.

4.      A program azonnal elirányít minket a W3C oldalára, ahol egyből láthatjuk a teszteredményeket.

5.      Ugyan így validálhatjuk a CSS fájljainkat is.

Hálózati analízis

Az előzőekben megismert segédeszközök már az Internet Explorer 7 és 8-ban is megvoltak hasonló formában. De az Internet Explorer 9 kiteljesedet egy Network füllel.

1.      Indítsuk el az Internet Explorer 9 jelenlegi változatát, majd nyomjuk meg a F12

image

2.      A megjelenő ablakban kattintsunk a Network fülre

3.      Itt kattintsunk a Start Capturing gombra, ekkor elindul a mérés.

4.      Innentől kezdve nincs más dolgunk mint navigálni az oldalak között, és ha minden megvolt akkor leállítjuk a mérést kiértékelhetjük az eredményt.

image

Gyakorlatilag egy olyan beépített toolt kapunk az Internet Explorertől, mint a webes körökben jól ismert és gyakran használt Fiddler Tool. Megnézhetjük, hogy a szervertől mi jön vissza, mivel volt probléma, mi az, ami költséges stb. Egy kifejezetten jó diagnosztikai eszközzel bővült az Internet Explorer 9.

Egyéb segítő lehetőségek

Továbbiakban az Internet Explorer Developer Toolbar egyéb lehetőségeivel ismerkedhetünk meg.

Ha szeretnénk tesztelni weboldalunk viselkedését Internet Explorer 7 böngésző alatt, állítsuk a „Browser Mode”-ot „Internet Explorer 7”-re.

Vannak esetek, amikor szeretnénk látni, hogy néz ki weboldalunk különböző felbontású monitorokkal. A Tools->Resize menüpont alatt, tetszőleges felbontássimageal megtekinthetjük weboldalunkat.

Megesik, hogy szeretnénk tudni, hogy egy-egy elemünk, táblázatunk az oldalon, pontosan mekkora. Ilyenkor jöhet jól a vonalzó, amelyet a „Tools->Show Ruler” opcióra klikkeléssel hívhatunk elő.

Gyakran előfordul, hogy látunk egy oldalon egy színt, megpróbáljuk reprodukálni saját oldalunkon, persze sikertelenül. Lássuk be, nem kevés gyakorlat kell ahhoz, hogy ránézésre megmondjuk egy szín HEXA kódját. Ha nem rendelkezünk designeri vénával, használhatjuk az Internet Explorer 9 beépített Color picker-ét. image
Válasszuk ki a Tools menüpontból a „Show Color Picker” menüpontot.

Ugyan először furcsának tűnhet, de sokszor jól tud jönni, hogy a devtools-al letilthatjuk a képek megjelenését weboldalunkon. Ehhez válasszuk ki az „Image” menüből a „Disable Images” menüpontot. A beállítás azonnal érvényességre jut. Érdemes megjegyezni, hogy az interaktív tartalmak, pl. Silverlight objektumok megjelenésére a funkció nincs hatással.

További hasznos funkció, hogy a weboldal tervezée közben, képeink méretének megtekintéséhez, nincs szükség semmiféle manőverhez, a devTools segítségével, a websiteba integrálva megjeleníthetőek a kép dimenziói.

Ha a méterükre is kíváncsiak vagyunk, válasszuk a „Show Image File Sizes” menüpontot.

A képeink elérési útvonalát is kiírathatjuk, ha a „Show Image Paths” opciót választjuk.image

A weboldal képeiről és főbb tulajdonságairól XML formátumú riportot is készíthetünk a könnyebb átláthatóság kedvéért. A riportot az „Images” menü „View Image Report” menüpontjával tudjuk legeneráltatni.

Reklámok
  1. 2011. május 4. szerda - 11:40

    Úgy látom hogy szépen összeszedted a fontosabb funkciókat, dobom is tovább egy-két ismerősömnek, tanuljanak csak!

    Morzel

  2. martonx
    2011. május 4. szerda - 16:01

    Expression Web-et a gyatra javascript támogatása miatt eddig hanyagoltam. Ez vajon javulgatott mostanában?
    Vagy még mindig felejtős?
    Nem tudom ti hogy vagytok vele, de nekem szinte a javascriptelés a legnagyobb feladat a fejlesztések során, és pont ezt nem igazán támogatja az Expression Web.

    • 2011. május 4. szerda - 16:04

      Javult a támogatása, de még mindig elég gyér sajnos…

  1. 2011. május 23. hétfő - 14:40

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

%d blogger ezt kedveli: