Firefox Developer Edition

A webfejlesztők számára készült Firefox böngésző fejlett eszközökkel és funkciókkal.

A Firefox Developer Edition egy speciális böngésző, amelyet kifejezetten webfejlesztőknek terveztek. Beépített fejlesztői eszközökkel és a legújabb webes technológiák korai támogatásával segíti a munkádat.

Miért Firefox Developer Edition?

Fejlesztőknek készült - Alapértelmezetten fejlesztői beállításokkal érkezik
Korai hozzáférés - Az új funkciók 12 héttel hamarabb elérhetők, mint a stabil verzióban
Külön profil - Elkülönített profilt használ, így párhuzamosan futtatható a normál Firefox-szal
Sötét téma - Fejlesztőbarát sötét felület alapértelmezetten
Fejlett DevTools - Kibővített fejlesztői eszköztár

Telepítés

Letöltés

Töltsd le a böngészőt a hivatalos oldalról: mozilla.org/firefox/developer

Elérhető Windows, macOS és Linux rendszerekre.

Telepítés parancssorból (macOS)

brew install --cask firefox-developer-edition

Telepítés parancssorból (Linux)

# Snap használatával
sudo snap install firefox --channel=latest/beta

Beépített fejlesztői eszközök

Inspector (Vizsgáló)

A DOM fa vizsgálatára és szerkesztésére szolgál. Lehetővé teszi:

HTML elemek vizsgálata és módosítása
CSS szabályok megtekintése és szerkesztése élőben
Box model vizualizáció
Computed styles megtekintése
Grid és Flexbox vizualizáció

Billentyűparancs: Ctrl+Shift+C (Windows/Linux) vagy Cmd+Option+C (macOS)

Console (Konzol)

JavaScript hibák és üzenetek megjelenítése, kód futtatása:

JavaScript hibák és figyelmeztetések
console.log() üzenetek
JavaScript kifejezések futtatása
Hálózati kérések hibái

Billentyűparancs: Ctrl+Shift+K (Windows/Linux) vagy Cmd+Option+K (macOS)

Debugger (Hibakereső)

JavaScript kód lépésenkénti végrehajtása:

Breakpoint-ok elhelyezése
Változók értékeinek vizsgálata
Call stack megtekintése
Conditional breakpoint-ok

Billentyűparancs: Ctrl+Shift+Z (Windows/Linux) vagy Cmd+Option+Z (macOS)

Network (Hálózat)

HTTP kérések és válaszok monitorozása:

Minden hálózati kérés listázása
Kérés/válasz headerek és body
Időzítési információk (TTFB, letöltési idő)
Szűrés típus szerint (XHR, JS, CSS, stb.)
HAR exportálás

Billentyűparancs: Ctrl+Shift+E (Windows/Linux) vagy Cmd+Option+E (macOS)

Performance (Teljesítmény)

Weboldal teljesítményének elemzése:

JavaScript végrehajtási idő
Renderelési teljesítmény
Memory usage
Frame rate monitorozás

Storage (Tárolás)

Böngésző tárolók vizsgálata:

Cookies
Local Storage
Session Storage
IndexedDB
Cache Storage

Responsive Design Mode

Reszponzív dizájn tesztelése különböző képernyőméreteken:

Előre definiált eszközméretek
Egyéni méretek beállítása
Touch szimuláció
Képernyőkép készítése

Billentyűparancs: Ctrl+Shift+M (Windows/Linux) vagy Cmd+Option+M (macOS)

WordPress fejlesztéshez hasznos funkciók

CSS Grid Inspector

A WordPress blokk témák gyakran használnak CSS Grid-et. A Firefox Developer Edition vizuálisan megjeleníti a grid vonalakat és cellákat:

Nyisd meg az Inspector-t
Keresd meg a grid konténert
Kattints a “grid” badge-re az elem mellett

Flexbox Inspector

Hasonlóan a Grid-hez, a Flexbox elrendezések is vizualizálhatók:

Inspector megnyitása
Flexbox konténer kiválasztása
A “flex” badge-re kattintva láthatóvá válik az elrendezés

Font Editor

Betűtípusok vizuális szerkesztése:

Font family választás
Font size, weight, style állítása
Line height és letter spacing
Variable fonts támogatás

Accessibility Inspector

Akadálymentesség ellenőrzése:

Accessibility tree megtekintése
Kontraszt ellenőrzés
ARIA attribútumok vizsgálata
Tab order vizualizáció

Hasznos billentyűparancsok

Funkció	Windows/Linux	macOS
DevTools megnyitása	`F12`	`F12`
Inspector	`Ctrl+Shift+C`	`Cmd+Option+C`
Console	`Ctrl+Shift+K`	`Cmd+Option+K`
Network	`Ctrl+Shift+E`	`Cmd+Option+E`
Debugger	`Ctrl+Shift+Z`	`Cmd+Option+Z`
Responsive Design Mode	`Ctrl+Shift+M`	`Cmd+Option+M`
Képernyőkép	`Ctrl+Shift+S`	`Cmd+Shift+S`
Oldal újratöltése (cache nélkül)	`Ctrl+Shift+R`	`Cmd+Shift+R`

Ajánlott bővítmények

React Developer Tools

React komponensek vizsgálata és hibakeresése.

Vue.js devtools

Vue.js alkalmazások fejlesztéséhez.

Web Developer

Hasznos webfejlesztői eszközök gyűjteménye.

ColorZilla

Színek kiválasztása az oldalról (color picker).

Wappalyzer

Weboldalak technológiáinak azonosítása (WordPress verzió, használt pluginok, stb.).

about:config beállítások fejlesztőknek

Írd be a címsorba: about:config

Hasznos beállítások:

# Service Worker-ek engedélyezése HTTP-n (csak fejlesztéshez)
devtools.serviceWorkers.testing.enabled = true

# CSS Grid Inspector vonalak megjelenítése
devtools.gridinspector.showGridLineNumbers = true

# Színes konzol üzenetek
devtools.webconsole.timestampMessages = true

Firefox vs Chrome DevTools

Funkció	Firefox	Chrome
CSS Grid Inspector	Fejlettebb vizualizáció	Alapszintű
Flexbox Inspector	Beépített	Bővítmény kell
Font Editor	Vizuális szerkesztő	Nincs
Accessibility	Részletes	Alapszintű
Performance	Jó	Részletesebb
Memory	Alapszintű	Fejlettebb