Está en la página 1de 31

2007.10.21.

Budapest
Hotel Flandria

Előadó: Fodor Zoltán

Firefox-l fejlesztünk
Webdeveloper & Firebug
Tartalom
1 Webdeveloper telepítése, rövid ismertetése

1.1 Menü átalakítása

1.2 Modul átalakítása


1.1
1.3 Logo átalakítása

2 Firebug telepítése, rövid ismertetés

2.1 Információszerzés egy honlapról

2.2 Menü testreszabása

2.3 Firebug menüpontjainak használata


Webdeveloper telepítése, rövid ismertetése

Disable: Cache, Javascript, minimális betűméret, színbeállítások, stb. blokkolása


Cookies: Sütik engedélyezésére, tiltására szolgál, stükről információt jelenít meg
CSS: CSS megtekintése, blokkolása, közvetlen formázása, stb., akár azonnali,
valós nézetben
Forms: rlapok tulajdonságainak megtekintése és ideiglenes átszabási lehetőségek,
rejtett mezők megjelenítése
Images: Egy honlapon megjelenő képek megjelenítése, blokkolása, illetve a képek
tulajdonságainak megjelenítése
Information: Az aktuálisan megjelenített honlap felépítésének tulajdonságait
mutatja meg (pl. blokkok mérete, div-ek sorrendje, class-ok és id-k kiírása,
hivatkozások megjelenítése, táblázatok tulajdonságainak kiírása, a honlap
színeinek hexadecimális kódban való megjelenítése, stb.)
Miscellaneous: Privát adatok törlése, segédvonalak és vonalzó megjelenítése,
HTML közvetlen formázása, látogatott linkek visszaállítása, stb.
Outline: Meghatározott tartalmak körülhatárolása (pl. táblázatok, cellák, külső
hivatkozások, stb. kijelölése) egy vékony kerettel
Resize: Sajátunkétól eltérő képernyőfelbontásokban való megjelenítésre, valamint
a tartalom nagyítására alkalmas
Tools: Elsősorban validáláshoz használatos eszközök
View Source: Forráskód megjelenítésére szolgál
Options: Beállítás
Menü átalakítása
Kiválasztjuk
az átalakítandó
honlapot.
Menü átalakítása

A lehető legtöbb információt próbáljuk megszerezni


arról a menüpontról, amelyet átalakítani szeretnénk.
Menü átalakítása

A megszerzet információk alapján az adatok kikeresése


Menü átalakítása

Az értékeket átírjuk a számunkra megfelelő színkódokra


Menü átalakítása
A menü beállításait finomítjuk
Menü átalakítása

Menü átalakítása kész. Időtartam kb. 2 perc.


Modul átalakítása

A lehető legtöbb információt próbáljuk megszerezni


arról a modulról, amelyet átalakítani szeretnénk.
Modul átalakítása

A modulhoz tartozó beállítások kikeresése.


Modul átalakítása
padding: 5px 0px 5px 12px;

(padding: top, right, bottom, left;


Modul átalakítása

Eredeti Megváltoztatot
modul t modul
Logo átalakítása

1.

2.
Logo átalakítása

Repeat utasítás:
repeat | repeat-x | repeat-y |no-repeat

repeat: vízszintes és függőleges ismétlődés


(mozaikszerű megjelenítés)

repeat-x: csak vízszintesen ismétlődik

repeat-y: csak függőlegesen ismétlődik

no-repeat: nincs ismétlődés


Firebug

Firefox plugin, amely HTML, CSS, JavaScript (AJAX) hibakeresésre


használható.

Három állapota van:


•Inaktív állapot
•Aktív állapot
•Inspect Element
Firebug
Inaktív állapot
 Ekkor "nem csinál semmit", csak megszámolja a
hibákat az oldal kódjában és kiírja a státuszsorba
(pl az www.fejlesztok.hu-n most 1 hibát talált).

Aktív állapot
 Ekkor ki is írja, melyek ezek a hibák.

Inspect Element
 Ha bekapcsoljuk, képesek leszünk kijelölni a
látható weblap-elemeket. Miután kijelöltük,
megnézhetjük az XML (HTML) kódot, ami
tartalmazza, és a rá érvényes CSS szabályokat, a
hozzá tartozó JavaScriptet, illetve azt, hogy az
adott doboz milyen tulajdonságokkal bír.
Firebug

Aktív állapot

Inspect Element
Firebug

Információ szerzés

Fejléc méretének meghatározása:


779x92px
Margin: 0 px
Border: 6 px
Padding: 0 px
Firebug

Logo méretének megállapítása:


780x92px
Margin: 0 px
Border: 0 px
Padding: 0 px
Firebug
Menü testreszabása

Css tulajdonságai mutatja

Mit, honnan örököl

Kihúzással jelöli, ami felül van definiálva

CSS-ben melyik sorban van definiálva


Menü testreszabása

Új érték megadása, ami azonnal látható


Menü testreszabása

Értékek ki-bekapcsolása. A megváltoztatott bejegyzések azonnal láthatóak


Firebug menüpontjainak használata
Változók értékének figyelése script-ben
Firebug menüpontjainak használata

Beállíthatunk a script-n belül bárhol figyelési pontot

Megmutatja az eddig lefutott változok értékét


Firebug menüpontjainak használata

Net
Megmutatja a különböző lekérdezéseket (html, css, js, xhr, images, flash)
Megmutatja a kiválasztott elem méretét,
Lekérdezésének idejét,
Pontos elérését,
Milyen paraméterekkel mentek el a különböző elemek (pl. ajax elemek),
Milyen header-t küldött ki a lekérés,
Milyen adatokat kaptunk vissza
Firefox növekedése
Firefox felhasználók aránya
Firefox felhasználók aránya
2007.10.21.
Budapest
Hotel Flandria

Click to edit company slogan .