ugrás a tartalomhoz

FireBug-gal hogyan segíthető a CSS fejlesztés?

thamas · 2006. Jún. 14. (Sze), 14.22
A kapcsolódó híradásokból az derült ki számomra, hogy a FireBug elsősorban a JavaScript fejlesztésben kihagyhatatlan segédeszköz.

Engem viszont az érdekelene, hogy miként lehet használni CSS-sel (és esetleg HTML-lel) kapcsolatos feladatokhoz. Tud-e pl. többet, mást (ezen a területen!) mint mondjuk a Web Developer? Ha igen, hogyan?

Egy ideje ismerkedem a FireBug-gal, de nem tudok rájönni a használat (ideális) módjára. Odáig rendben van, hogy jelzi hány hiba van az oldalon, de előfordul, hogy a konzolt megnyitva csak a hibákat sorolja fel, azt nem jelzi, hogy melyik sorban vannak a jelelzett hibák, vagy melyik elmre hivatkozik a hibás stílusutasítás.

Nem boldogulok az inspector használatával sem: látom, hogy ha az oldal felett mozgatom az egeret, jelzi az egyes részekhez tartozó stílusutasításokat a "style" és a "layout" fülön, viszont nem tudom, itt jelezné-e a hibákat. Olvastam, hogy a billentyűzet nyilaival is lehet lépkedni elemről elemre - nekem ez sem jön össze, pl. "beragadok" a head részbe és nincs tovább. Azt sem tudom, mitől függ hogy hány fület (source, style, layout, dom) látok alul.

Próbáltam információt keresni, de a szerző oldalán illetve a google találataiban csak a JS funkciókról esik részletesebben szó.

Segítenétek eligazodni?

Köszönettel:

Hajas Tamás
 
1

CSS

Poetro · 2006. Jún. 14. (Sze), 14.43
CSS-t először is érdemes validálni, erre nagyszerű a WDT Tools/Valdiate CSS vagy Validate Local CSS menüpontja. Ha megvan a validálás, és sikerült valid CSS-t generálni, akkor érdemes csak tovébbi debuggoláson gondolkodni, amire szintén jó eszközöket kínál a WDT, az Information/Display Element Information pont alatt.
2

Ajax-os fejlesztésnél

Anonymous · 2006. Jún. 14. (Sze), 15.06
Például ajax-os fejlesztésnél nélkülözetetlen a használata, mert real-time mutatja az elküldött URL-t, a header-t, és a visszaadott szöveget vagy xml-t.
Például elszörfölsz a velvet celebhatározójába, és ott az Értékelje! nevű cuccon értékelsz az OK gombbal. Pl.: http://velvet.hu/celeb/hcdb/adatlap/gorog_zita
Vagy egyszerűen megnyitod a www.penzcentrum.hu oldalt, ahol a szavazás működését lehet látni.

Gyulus
3

Nem erre gondoltam!

thamas · 2006. Jún. 15. (Cs), 12.57
Kedvesek vagytok, de én kimondottan azt szeretném tudni, hogy a FireBug-gal hogyan lehet a CSS fejlesztést segíteni! Tehát a kettő együtt fontos, a FireBug is és a CSS is.

(A Validátort ismerem, a WDT-t szeretem, az Ajax-hoz meg nem értek...)

Köszönettel:

Hajas Tamás
4

Másra van!

Jano · 2006. Jún. 15. (Cs), 14.00
A FireBug JavaScript tesztelésre van kitalálva. Csavarhúzóval se lehet kalapálni.
6

Csak úgy mellesleg kínálja a CSS-t?

thamas · 2006. Jún. 15. (Cs), 14.08
Szóval a CSS dolog csak olyan kiegészítő funkció? Amolyan "tegyünk bele egy kis ilyet is"? Rendben.

De akkor sem nagyon boldogulok a kezelésével...
9

Nem pontos

Bártházi András · 2006. Jún. 18. (V), 20.48
Nem teljesen, azért a FireBug segítségével sokkal több mindent meg lehet csinálni, mint JavaScript "kezelést". DOM modell lekérdezés, áttekintés, változtatás, adott elemre a CSS-ből melyik sor hat, milyen CSS tulajdonságai vannak, stb.
10

Ok, mellékesen lehet CSS-t is nézni vele

Jano · 2006. Jún. 18. (V), 21.34
Ok, mellékesen lehet CSS-t is nézni vele, de ezek a funkciók benne vannak a Dom Inspectorban.

CSS-sel kapcsolatban az említett: "melyik elemre milyen stílus szabályok vonatkoznak" választ a következő módon lehet kideríteni:

  • A státusz sorban a FireBug ikonjára kattintasz.
  • Kiválasztod az Inspector (Megfigyel) fület, alúl pedig a style (stílus) fület.
  • Végül a bal oldalon található "inspect" menüpontra kattintasz és az egeret a FireBug felett látható - éppen vizsgált - oldal felett elkezded járatni és megkeresed a téged érdeklő elemet. Ha kattintasz egyet akkor az inspect funkció megszünik és az utolsónak kijelölt elem dolgait mutatja lent.
11

Ilyesmire gondoltam!

thamas · 2006. Jún. 19. (H), 14.17
Köszönöm a válaszokat! (Azért, ha valakinek még van kedve tovább részletezni, ne kíméljen! :o) )

Üdvözlettel:

Hajas Tamás
12

Javítom magam: jó CSS-re is

Jano · 2006. Okt. 15. (V), 20.17
Leszóltam kicsit a FireBug CSS-beli hasznosságát, de megváltozott a véleményem egy projekt kapcsán. Bár én elsősorban nem hibakeresésre használtam. A feladat egy már meglévő oldal optimalizálása, rendes HTML írása a régi táblázatos kód helyett. A FireBug-gal méreteket, szöveg beállításokat sokkal egyszerűbb volt levenni oldalról mint a Dom Inspectorral.
5

FireBug 0.4

Török Gábor · 2006. Jún. 15. (Cs), 14.06
Én a FireBug 0.4-es verzióját használom, kijelzi a CSS hibákat is szépen sorban, érintett fájl/sorszámmal együtt.

Error in parsing value for property 'font-weight'. Declaration dropped: section.css (line 595)

Kattintható is a hibaüzenet, a link pedig egyből a kérdéses sorra visz, eltérő színnel pedig jelzi a hibát.
7

De nem mindig...

thamas · 2006. Jún. 18. (V), 16.00
Közben tovább próbálkozgatok. Máshol nekem is jelezte a hiba sort is, úgy ahogy kell, de nem mindig. Azt hiszem a keretes oldalakkal van gondja. (Félreértés ne essék, nem én készítek keretes oldalt, csak azt néztem vele!).

Csak mondom, kicsit macerás eligazodni a kezelőfelületen. Jó lenne vmi leírás...

HT
8

CSS

tiny · 2006. Jún. 18. (V), 20.28
Én úgy szoktam hasznát venni, hogy megnézem az inspectorral az adott divet. Egyébiránt csshez nem nagyon tud segíteni.
13

firebug css

rrd · 2008. Aug. 7. (Cs), 12.41
http://webmania.cc/tag/firebug/
14

getfirebug oldal

ksgy · 2008. Aug. 7. (Cs), 13.06
szerk: most nezem, osregi a topic...vajon hogyan kerulnek elo ijenek? :)
15

én hoztam elő

rrd · 2008. Aug. 7. (Cs), 13.43
én hoztam elő mert előbb válaszoltam rá minthogy megnéztem volna hogy mikori ... :)