Egyetlen weboldal sem készült tökéletesen. Mint minden ember által gyártott termék, a kódhibák is a folyamat részét képezik. Ezért fontos, hogy minden új webhelyet alaposan teszteljen, hogy megbizonyosodjon arról, hogy az a lehető legjobban hibamentes, hogy a felhasználók a lehető legjobb élményt nyújtsák. 

Ne teszteljen egy webhelyet anélkül, hogy először kipróbálná a Google Chrome ^(DevTools)DevTools^(Chrome) készletét . A Chrome^(Chrome) fejlesztői módja lehetővé teszi, hogy kipróbáljon és alaposan teszteljen egy új webhelyet (vagy egy meglévőt), hogy megtalálja és kijavítsa a hibákat. Betekintést nyújthat más webhelyek működésébe is, beleértve a forráskód megtekintését is. 

Itt van minden, amit tudnia kell a Google Chrome böngésző fejlesztői módjáról, milyen eszközei vannak, és hogyan kell hatékonyan használni.

Mi az a Chrome fejlesztői mód?^{(What Is Chrome Developer Mode?)}

Amikor a Chrome fejlesztői módjára hivatkozunk, akkor nem ^(Chrome)ugyanarról^{(same developer mode)} a fejlesztői módról beszélünk, amelyet a Chromebookokon^{(Chromebooks)} is láthat . Amire utalunk, az a kiterjedt Chrome fejlesztőeszközök (úgynevezett Google DevTools ), amelyek a böngészőbe vannak beépítve.

Ezeket az eszközöket arra tervezték, hogy teszteljék, elemezzenek és szándékosan megtörjék (ha szükséges) a Google Chrome böngészőben tesztelési célból betöltött weboldalakat. Alapszinten a DevTools segítségével megtekintheti egy webhely forráskódját, így betekinthet a motorháztető alá, hogy megtudja, hogyan készült egy webhely, és mennyire jól működik.

A Google DevTools^{(Google DevTools)} azonban ennél többet kínál. A Chrome fejlesztői módjával módosíthatja az oldalt a betöltődés után, futtathatja a Google Chrome konzolparancsait az oldal vezérléséhez és kezeléséhez, valamint sebesség- és hálózati teszteket futtathat a webes forgalom figyeléséhez.

A Chrome DevTools^{(Chrome DevTools)} módban más eszközöket is emulálhat, beleértve a különböző operációs rendszereket és képernyőfelbontásokat . Ez lehetővé teszi, hogy megnézze, van-e reszponzív webdizájnja egy webhelynek, és hol változik a webhely tartalma és elrendezése az eszköz felbontásától vagy típusától függően.

Bár ezek az eszközök professzionális webfejlesztőknek és tesztelőknek szólnak, a normál Chrome - felhasználók számára is hasznos, hogy tájékozódjanak a DevTools programcsomagban. Ha olyan problémát lát egy webhelyen, amelyet nem tud megoldani, a Chrome fejlesztői módra váltása segíthet megállapítani, hogy a probléma a webhelytel vagy a böngészővel van-e.

A Google Chrome DevTools menü elérése^{(How To Access Google Chrome DevTools Menu)}

A használni kívánt eszköztől függően többféleképpen is elérheti a Google Chrome DevTools menüjét.^{(Google Chrome DevTools)}

Ezt a legegyszerűbben a Google Chrome menüből teheti meg. Ehhez kattintson a hárompontos menü ikonra^{(three-dots menu icon)} a jobb felső sarokban. A megjelenő menüben kattintson a More Tools > Developer Tools elemre .

Ezzel megnyílik a DevTools készlet egy új menüben a megnyitott ^(DevTools)Chrome lap vagy ablak jobb oldalán .

Ezt billentyűparancsok használatával is megteheti. Windows vagy Linux rendszerű számítógépen^{(Linux PC)} nyissa meg a Chrome böngészőt, és nyomja meg az F12 billentyűt. Ctrl + Alt + J vagy a Ctrl + Alt + I billentyűket is megnyomhatja egy megnyitott Chrome lapon vagy ablakban.

MacOS rendszeren nyomja meg az F12 billentyűt, vagy nyomja meg az Option + Command + J vagy az Option + Command + I billentyűket a Chrome DevTools menü megnyitásához. Ezzel megnyílik a Chrome -konzol, és a ^(Chrome)DevTools menü tetején lehetőség nyílik más Chrome -eszközökre való áttérésre.^(Chrome)

Ha szeretné, megtekintheti egy webhely forráskódját ( a folyamat közben a DevTools menü ^(DevTools)Elemek^(Elements) lapjának megnyitásával ) bármely megnyitott weboldalon, ha jobb gombbal kattintson a ikonra, majd kattintson a Vizsgálat^{(Inspect )} lehetőségre.

A Chrome DevTools használata^{(Using Chrome DevTools)}

Amint azt röviden érintettük, a Chrome DevTools készlet segítségével megtekintheti egy webhely forráskódját az Elemek^(Elements) lapon. Lehetővé teszi a betöltött oldal mögötti kód elemzését, valamint megtekintheti a hibaüzeneteket (amelyek a webhely betöltésével kapcsolatos problémákat jelzik) a Chrome - konzol Konzol^(Console) lapján.

A Források^(Sources) lapon megtekintheti a webhelyről származó tartalom különböző forrásait is . Például, ha egy webhely tartalomszolgáltató hálózatot (CDN) használ^{(using a content delivery network (CDN))} , a webhelyről származó média itt más forrásként jelenik meg.

A Chrome^(Chrome) fejlesztői módja lehetővé teszi a tartalom közvetlen letöltését, vagy a tartalom összetettebb elemzését.

Ha szeretné tesztelni egy webhely teljesítményét, a Hálózat^(Network) lapon figyelheti és rögzítheti a hálózat használatát. Ez megmutatja a böngésző és a webhely közötti hálózati kérések sebességét, méretét és típusát.

Például egy oldal első betöltésekor a webhely magát az oldal tartalmát tölti be, de adatokat kérhet harmadik felek adatbázisaiból is. Például amikor bejelentkezik, lekérdezhet egy adatbázist, amely itt hálózati kérésként jelenik meg.

Ezt tovább elemezheti a Teljesítmény^{(Performance )} lapon, ahol részletesebben rögzítheti a Chrome böngésző használatát, beleértve a képernyőképek rögzítését a különböző pontokon. Ez naplózza, hogy mennyi ideig tart a webhely betöltése további elemzéshez.

A Google Chrome arról híres, hogy keményen használja a számítógép memóriáját , így a ^{(being hard on your PC memory)}Memória^(Memory) lapon tesztelheti webhelye JavaScript - memóriahasználatát . Különböző Chrome^{(Different Chrome)} -tesztelési profilok használhatók itt, a teszteléssel kapcsolatos további információk pedig a Chrome DevTools dokumentációs oldalán találhatók^{(Chrome DevTools documentation page)} .

A webhely tartalmának, valamint az általa esetleg használt böngészőtárhelynek (például adatok naplózására) alaposabb elemzéséhez kereshet az Alkalmazás^{(Application)} lapon. Megtekintheti a webhely cookie-jait itt a Cookie -k részben, vagy törölheti a használt tárhelyet a Tárhely ^(Cookies)törlése^{(Clear storage)} lehetőségre kattintva .

Ha aggódik webhelye biztonsága miatt, a Biztonság^{(Security )} lapon ellenőrizheti, hogy mennyire jól teljesít. Ez gyors áttekintést nyújt a Chrome egy oldal biztonsági elemzéséről, beleértve azt is, hogy az oldal rendelkezik-e megfelelő és megbízható SSL - tanúsítvánnyal.

Ha jelentést szeretne készíteni webhelye teljesítményéről, beleértve azt is, hogy az megfelel-e a tipikus felhasználói szabványoknak, és ha a webhely teljesítménye hatással lehet a keresőoptimalizálásra, kattintson a Világítótorony^(Lighthouse) fülre. Ez olyan beállításokat kínál, amelyeket ellenőrizhet, vagy törölheti a jelet a jelentésnél – kattintson a Jelentés generálása^{(Generate report)} lehetőségre a megtekintésre szánt jelentés létrehozásához.

Ez alig karcolja meg a Chrome fejlesztői mód által a fejlesztők számára nyújtott lehetőségeket. Ha többet szeretne megtudni, a Chrome DevTools dokumentációja^{(Chrome DevTools documentation)} segítséget nyújthat a kínált eszközökkel és funkciókkal kapcsolatban, beleértve a saját felhasználói tesztek elkészítését is. 

Speciális Google Chrome-trükkök^{(Advanced Google Chrome Tricks)}

A legtöbb Chrome-felhasználó soha nem fogja megtudni, hogy a Google Chrome DevTools készlet létezik a böngészőjében, de a tapasztalt felhasználók számára továbbra is kivételesen hasznos módja a webhelyek tesztelésének és elemzésének. Harmadik féltől származó Chrome-bővítmények is rendelkezésre állnak a webfejlesztők^{(Chrome extensions for web developers)} számára, amelyek segítenek a webhely további tesztelésében.

Ha alapszintű webhelyet^{(building a basic website)} készít , a Chrome fejlesztői módra váltása segíthet észrevenni a webhelyével kapcsolatos olyan hibákat, amelyek nem látszanak azonnal. Ezt csak akkor teheti meg, ha a Chrome megfelelően működik, tehát ha a Chrome összeomlásával küzd^{(struggling with Chrome crashes)} , lehet, hogy először alaphelyzetbe kell állítania vagy újra kell telepítenie a böngészőt.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built perfectly. Like all products made by humans, code еrrors arе part оf the process. That’s why іt’s important to thoroughly test any new website yoυ build to make sure that it’s as free of errors as possible to giνe your users the best possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Google Chrome automatikus kitöltése: teljes útmutató

• A 10 legjobb adatvédelmi bővítmény a Chrome-hoz (2022)

• Használja ezt a 4 Chrome-bővítményt a Gmail-üzenetek titkosításához

• A Google Chrome tartalombeállításai: teljes útmutató

• Mi a legjobb konferenciahívás-szolgáltatás – A legjobb alkalmazások összehasonlítása

• A Windows csomagkezelő használata Windows-programok telepítéséhez

• A Zapier e-mail elemző: 3 kreatív módszer a használatára

• A legjobb programok új funkciók hozzáadásához a Windows 10 rendszerhez

• Az 5 legjobb Firefox adatvédelmi bővítmény az online biztonság érdekében

• Google Apps Script Editor: Minden, amit tudnia kell az induláshoz

• Használjon régi webkamerát ingatlana ingyenes megfigyeléséhez

• A HDG elmagyarázza: Mi az a Markdown, és melyek azok az alapok, amelyeket tudnom kell?

• 5 legjobb biztonságos APK-letöltő webhely Android-alkalmazásokhoz

• A legjobb alkalmazások az internethasználat figyelésére

• A Google Chromecast 4 legjobb alternatívája

• 7 módszer az MDB fájl megnyitására Microsoft Access nélkül

• Hogyan működnek a webhelyek: Ismerje meg, mi van a motorháztető alatt

• 5 parancssoros trükk a CMD érdekesebbé tételéhez

• A legjobb időjárási widgetek a Windows 10/11 rendszerhez

• Hogyan segíthet a Signal Desktop alkalmazás az Ön adatainak védelmében