A fejlesztői konzol egy beépített panel, amellyel közvetlenül a böngészőben ellenőrizheti a weboldal kódját, ellenőrizheti a hibákat, és tesztelheti a szkripteket. Ez az útmutató bemutatja, hogyan kell megnyitni a fejlesztői konzolt a böngészőben, függetlenül attól, hogy Chrome-ot, Firefoxot, Edge-t vagy Safarit használ, és mindenkinek íródott, akinek szüksége van egy webhely hibaelhárítására, egy kódolási oktatóanyag követésére vagy annak ellenőrzésére, hogy mi történik az oldalon a színfalak mögött.
Amire szükséged lesz
- Modern webböngészőt futtató asztali vagy laptop számítógép
- Billentyűzet, mivel a legtöbb módszer egy parancsikonra támaszkodik
- A Safari esetében olyan Apple-eszköz, amelyen a Fejlesztés menü engedélyezve van a beállításokban
Nyissa meg a fejlesztői konzolt a Chrome-ban
- Nyissa meg a Google Chrome-ot, és navigáljon bármely weboldalra.
- Nyomja meg az F12 billentyűt Windows vagy Linux rendszeren, vagy a Cmd+Option+I billentyűt macOS rendszeren.
- Ha a parancsikon nem működik, kattintson a hárompontos menüre a jobb felső sarokban, válassza a „További eszközök” lehetőséget, majd a „Fejlesztői eszközök” lehetőséget.
- Kattintson a „Konzol” fülre a megjelenő panel tetején a naplózott üzenetek és hibák megtekintéséhez.
Nyissa meg a fejlesztői konzolt a Firefoxban
- Nyissa meg a Firefoxot, és töltse be az ellenőrizni kívánt oldalt.
- Nyomja meg az F12 vagy a Ctrl+Shift+K billentyűkombinációt Windows és Linux rendszeren, vagy a Cmd+Option+K billentyűkombinációt macOS rendszeren.
- Másik megoldásként nyissa meg a menü gombot a jobb felső sarokban, és válassza a „További eszközök”, majd a „Webfejlesztői eszközök” lehetőséget.
- A konzol alapértelmezés szerint megnyílik, és megjeleníti az aktuális oldal naplóit, figyelmeztetéseit és hibáit.
Nyissa meg a fejlesztői konzolt a Microsoft Edge-ben
- Nyissa meg az Edge-et, és lépjen bármelyik webhelyre.
- Nyomja meg az F12 vagy a Ctrl+Shift+I billentyűket.
- Ha szükséges, kattintson a hárompontos menüre, válassza a „További eszközök”, majd a „Fejlesztői eszközök” lehetőséget.
- Válassza a „Konzol” lapot a panelen a szkriptkimenet és a hibák megtekintéséhez.
Nyissa meg a fejlesztői konzolt a Safariban
- Nyissa meg a Safari beállításait, és lépjen a „Speciális” fülre.
- Engedélyezze a „Funkciók megjelenítése webfejlesztőknek” vagy „Fejlesztési menü megjelenítése a menüsorban” feliratú lehetőséget.
- Miután engedélyezte, kattintson az új „Fejlesztés” menüre a képernyő tetején.
- Válassza a „Show JavaScript Console” vagy a „Show Web Inspector” lehetőséget a fejlesztői eszközök megnyitásához, majd válassza ki a konzol lapot.
Gyors referencia táblázat
| Böngésző | Windows/Linux parancsikon | macOS parancsikon | Menüútvonal |
|---|---|---|---|
| Króm | F12 vagy Ctrl+Shift+I | Cmd+Option+I | Menü > További eszközök > Fejlesztői eszközök |
| Firefox | F12 vagy Ctrl+Shift+K | Cmd+Option+K | Menü > További eszközök > Webfejlesztői eszközök |
| Él | F12 vagy Ctrl+Shift+I | Cmd+Option+I | Menü > További eszközök > Fejlesztői eszközök |
| Szafari | Nem alkalmazható | Cmd+Option+C | Fejlesztés > Webes felügyelet megjelenítése (a beállítások engedélyezése után) |
Szinte bárhol rákattinthat a jobb gombbal a weboldalon, és a legtöbb böngészőben kiválaszthatja az „Ellenőrzés” vagy az „Elem vizsgálata” lehetőséget, amely közvetlenül a rákattintott elemnél nyitja meg a fejlesztői eszközöket. Gyakran ez a leggyorsabb módja annak, hogy közvetlenül az oldal kódjának egy meghatározott részére ugorjon.
Tippek és hibaelhárítás
- Ha egy billentyűparancs nem csinál semmit, ellenőrizze, hogy egy másik alkalmazás vagy böngészőbővítmény igényelte-e ugyanazt a billentyűparancsot, és próbálja meg inkább a menümódszert.
- Egyes munkahelyi vagy iskolai számítógépek a rendszerházirendeken keresztül letiltják a fejlesztői eszközöket, ebben az esetben előfordulhat, hogy rendszergazdai hozzáférésre lesz szüksége az engedélyezésükhöz.
- Bármikor törölje a konzol kimenetét a kis „törlés” ikonra kattintva a konzollapon, ha az tele van régi üzenetekkel.
- Legyen óvatos, amikor nem értett kódot illeszt be a konzolba, mivel a csalók néha ráveszik az embereket, hogy káros szkripteket futtatjanak ilyen módon. Csak olyan forrásból illessze be a kódot, amelyben megbízik.
- Ha a konzolablak külön lebegő panelként nyílik meg, nem pedig a böngészőhöz dokkolva, keressen egy kis ikont a panel sarkában a helyzet megváltoztatásához.
A fejlesztői eszközök a modern böngészők működésének alapvető részét képezik, és ezek megértése szélesebb körű beszélgetésekhez kapcsolódik arról, hogy a modern böngészők miként épülnek a bizalom köré. Ugyanazok a webtechnológiák, amelyek a konzolt működtetik, olyan dolgokat is támogatnak, mint például a hardverbeállításhoz használt böngészőalapú konfigurációs eszközök.
Gyakran ismételt kérdések
Mire használható a fejlesztői konzol?
A fejlesztői konzol lehetővé teszi a hibaüzenetek megtekintését, a JavaScript-kód tesztelését, a hálózati kérések ellenőrzését és a weboldal felépítésének ellenőrzését. A fejlesztők a webhelyek hibakeresésére használják, míg a hétköznapi felhasználók néha megbízható útmutatók által biztosított szkriptek futtatására vagy a nem megfelelően működő oldal hibaelhárítására használják.
Biztonságos a fejlesztői konzol megnyitása?
Maga a konzol kinyitása teljesen biztonságos, és nem változtat vagy károsít semmit az eszközön. Az egyetlen kockázat abból adódik, hogy olyan kódot illeszt be és fut, amelyet nem ért, vagy amely nem megbízható forrásból származik, mivel ez a kód úgy tervezhető, hogy kompromittálja a fiókját vagy a böngésző munkamenetét.
Miért nem működik az F12 a böngészőmben?
Egyes laptopokon egy funkcióbillentyűt, például az Fn-t, az F12-vel együtt le kell tartania, mivel az F12 alapértelmezés szerint hozzárendelhető egy hardverfunkcióhoz, például a fényerőhöz. Ha a parancsikon továbbra sem csinál semmit, használja helyette a böngésző menüopcióját, amely a billentyűzet beállításaitól függetlenül működik.
Meg tudom nyitni a fejlesztői konzolt mobilböngészőn?
A legtöbb mobilböngésző alapértelmezés szerint nem tartalmaz teljes fejlesztői konzolt. Egyes Android-eszközökön csatlakoztathatja telefonját egy asztali számítógéphez, és az asztali böngésző fejlesztői eszközeivel távolról is megtekintheti a mobiloldalt, ami a megbízhatóbb módszer a mobil hibakereséshez.
Ezen eszközök részletesebb technikai részleteiért tekintse meg a hivatalos Chrome DevTools vagy a Firefox Developer Tools dokumentációját, amelyek a böngészők fejlődésével párhuzamosan folyamatosan frissülnek.