Žiadna webová stránka nie je vytvorená dokonale. Ako všetky produkty vyrobené ľuďmi, aj chyby v kóde sú súčasťou procesu. Preto je dôležité dôkladne otestovať každú novú webovú stránku, ktorú vytvoríte, aby ste sa uistili, že je čo najmenej chybná, aby vaši používatelia získali čo najlepší zážitok. 

Nemali by ste testovať webové stránky bez toho, aby ste najskôr vyskúšali súpravu DevTools prehliadača Google ^(DevTools)Chrome . Režim vývojára prehliadača Chrome^(Chrome) vám umožňuje vyskúšať a dôkladne otestovať nový web (alebo existujúci), aby ste našli a opravili chyby. Môže vám tiež poskytnúť prehľad o tom, ako fungujú iné stránky, vrátane zobrazenia zdrojového kódu. 

Tu je všetko, čo potrebujete vedieť o režime vývojára prehliadača Google Chrome , aké nástroje má a ako ho efektívne používať.

Čo je režim vývojára prehliadača Chrome?^{(What Is Chrome Developer Mode?)}

Keď hovoríme o režime vývojára prehliadača Chrome^(Chrome) , nehovoríme o rovnakom režime^{(same developer mode)} pre vývojárov, aký uvidíte na Chromebookoch^{(Chromebooks)} . Máme na mysli rozsiahle vývojové nástroje prehliadača Chrome^(Chrome) (nazývané Google DevTools ), ktoré sú zabudované do samotného prehliadača.

Ide o nástroje určené na testovanie, analýzu a zámerné prerušenie (ak je to potrebné) webovej stránky, ktorú ste si načítali v prehliadači Google Chrome^{(Google Chrome)} na účely testovania. Na základnej úrovni môžete použiť DevTools na zobrazenie zdrojového kódu webovej stránky, čo vám umožní nahliadnuť pod kapotu, aby ste videli, ako bola stránka vytvorená a ako dobre funguje.

Google DevTools však ponúka viac ako toto. Režim vývojára prehliadača Chrome^(Chrome) môžete použiť na zmenu stránky po jej načítaní, spustenie príkazov konzoly Google Chrome na ovládanie stránky a manipuláciu so stránkou, ako aj na spustenie testov rýchlosti a siete na sledovanie návštevnosti webu.

V režime Chrome DevTools^{(Chrome DevTools)} môžete emulovať aj iné zariadenia vrátane rôznych operačných systémov a rozlíšenia obrazovky . To vám umožní zistiť, či má stránka responzívny webový dizajn a kde sa obsah stránky a rozloženie zmení v závislosti od rozlíšenia alebo typu zariadenia.

Aj keď sú tieto nástroje zamerané na profesionálnych webových vývojárov alebo testerov, je tiež užitočné, aby sa štandardní používatelia prehliadača Chrome^(Chrome) vyznali v súprave DevTools . Ak zistíte problém s webom, ktorý neviete vyriešiť, prepnutie do režimu vývojára prehliadača Chrome^(Chrome) vám môže pomôcť zistiť, či je problém s webom alebo s vaším prehliadačom.

Ako získať prístup k ponuke nástrojov pre vývojárov prehliadača Google Chrome^{(How To Access Google Chrome DevTools Menu)}

Existuje niekoľko spôsobov, ako môžete získať prístup k ponuke nástrojov pre vývojárov prehliadača Google Chrome^{(Google Chrome DevTools)} v závislosti od nástroja, ktorý chcete použiť.

Najjednoduchší spôsob, ako to urobiť, je z ponuky Google Chrome . Ak to chcete urobiť, kliknite na ikonu ponuky s tromi bodkami^{(three-dots menu icon)} v pravom hornom rohu. V zobrazenej ponuke kliknite na položku More Tools > Developer Tools .

Tým sa otvorí súprava DevTools v novej ponuke na pravej strane otvorenej karty alebo okna prehliadača Chrome .^(Chrome)

Môžete to urobiť aj pomocou klávesových skratiek. Na počítači so systémom Windows^(Windows) alebo Linux^{(Linux PC)} otvorte prehliadač Chrome^(Chrome) a stlačte kláves F12 . Môžete tiež stlačiť Ctrl + Alt + J alebo Ctrl + Alt + I na otvorenej karte alebo okne Chrome .

V systéme macOS namiesto toho otvorte ponuku Chrome DevTools stlačením klávesu ^{(Chrome DevTools)}F12 alebo stlačením klávesov Option + Command + J alebo Option + Command + ITým sa otvorí konzola Chrome s možnosťami prechodu na iné nástroje Chrome v hornej časti ponuky DevTools .

Ak chcete, môžete si zobraziť zdrojový kód webovej lokality (pri otvorení karty Elements v ponuke ^(Elements)DevTools ) na ľubovoľnej otvorenej webovej stránke kliknutím pravým tlačidlom myši a kliknutím na možnosť Skontrolovať^{(Inspect )} .

Používanie nástrojov Chrome DevTools^{(Using Chrome DevTools)}

Ako sme sa v krátkosti dotkli, na zobrazenie zdrojového kódu webovej lokality na karte Prvky môžete použiť súpravu ^(Elements)Chrome DevTools . Umožní vám to analyzovať kód za načítanou stránkou, ako aj zobraziť chybové hlásenia (označujúce problémy so spôsobom načítania lokality) v konzole Chrome na karte ^(Chrome)Konzola^(Console) .

Môžete tiež zobraziť rôzne zdroje obsahu z webovej lokality na karte Zdroje^(Sources) . Ak napríklad stránka používa sieť na doručovanie obsahu (CDN)^{(using a content delivery network (CDN))} , médiá z danej lokality budú uvedené ako iný zdroj.

Režim vývojára prehliadača Chrome^(Chrome) vám umožňuje priamo stiahnuť daný obsah alebo vykonať komplexnejšiu analýzu obsahu.

Ak chcete otestovať výkonnosť stránky, na karte Sieť^(Network) môžete sledovať a zaznamenávať využitie siete . Zobrazí sa rýchlosť, veľkosť a typ sieťových požiadaviek medzi vaším prehliadačom a webom.

Napríklad, keď sa stránka prvýkrát načíta, stránka načíta obsah stránky sama, ale môže si vyžiadať aj údaje z databáz tretích strán. Napríklad, keď sa prihlásite, môže sa to dotazovať na databázu, ktorá sa tu zobrazí ako sieťová požiadavka.

Môžete to ďalej analyzovať na karte Výkon^{(Performance )} , kde môžete hlbšie zaznamenávať používanie prehliadača Chrome vrátane zaznamenávania snímok obrazovky v rôznych bodoch. ^(Chrome)Týmto sa zaznamená, ako dlho trvá načítanie vašej stránky na ďalšiu analýzu.

Prehliadač Google Chrome má povesť náročného na pamäť vášho počítača^{(being hard on your PC memory)} , takže využitie pamäte JavaScript na vašich stránkach môžete otestovať na karte Pamäť^(Memory) . Tu je možné použiť rôzne testovacie profily prehliadača Chrome , pričom ďalšie informácie o tomto testovaní nájdete na ^{(Different Chrome)}stránke dokumentácie Chrome DevTools^{(Chrome DevTools documentation page)} .

Ak chcete podrobnejšie analyzovať obsah vašej lokality, ako aj úložisko prehliadača, ktoré môže používať (napríklad na zaznamenávanie údajov), môžete vyhľadávať na karte Aplikácia^{(Application)} . Informácie o súboroch cookie stránky si môžete pozrieť tu v časti Súbory cookie^(Cookies) alebo môžete vymazať ukladací priestor, ktorý sa používa, kliknutím na možnosť Vymazať ukladací priestor^{(Clear storage)} .

Ak sa obávate o bezpečnosť svojej lokality, na karte Zabezpečenie môžete skontrolovať jej výkonnosť^{(Security )} . Získate tak rýchly prehľad o analýze zabezpečenia prehliadača Chrome pre stránku vrátane toho, či stránka má alebo nemá správny a dôveryhodný certifikát SSL .

Ak chcete vygenerovať správu o výkonnosti vašej stránky, vrátane toho, či spĺňa typické používateľské štandardy a či by výkonnosť stránky mohla ovplyvňovať optimalizáciu pre vyhľadávače, môžete kliknúť na kartu Maják . ^(Lighthouse)Toto ponúka nastavenia, ktoré môžete pre svoj prehľad zaškrtnúť alebo zrušiť jeho začiarknutie – kliknutím na položku Generovať prehľad^{(Generate report)} vytvorte prehľad, ktorý chcete zobraziť.

To sotva poškriabe povrch potenciálu, ktorý môže vývojársky režim Chrome priniesť vývojárom. Ak sa chcete dozvedieť viac, dokumentácia Chrome DevTools^{(Chrome DevTools documentation)} by vám mala pomôcť s ponúkanými nástrojmi a funkciami vrátane toho, ako pomocou nej vytvoriť vlastné používateľské testy. 

Pokročilé triky Google Chrome^{(Advanced Google Chrome Tricks)}

Väčšina používateľov prehliadača Chrome sa nikdy nedozvie, že v ich prehliadači existuje súprava Google Chrome DevTools , ale pre skúsených používateľov zostáva mimoriadne užitočným spôsobom testovania a analýzy webových stránok. K dispozícii sú aj rozšírenia prehliadača Chrome od^{(Chrome extensions for web developers)} tretích strán pre vývojárov webu , ktoré vám pomôžu ďalej testovať vaše stránky.

Ak vytvárate základnú webovú stránku^{(building a basic website)} , prepnutie do režimu vývojára prehliadača Chrome^(Chrome) vám môže pomôcť odhaliť chyby na vašich stránkach, ktoré nie sú okamžite viditeľné. Môžete to urobiť iba vtedy, ak Chrome funguje správne, takže ak máte problémy so zlyhaním prehliadača Chrome^{(struggling with Chrome crashes)} , možno budete musieť prehliadač najskôr resetovať alebo preinštalovať.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built pеrfectly. Like all products made by humans, code errors are part оf the procesѕ. That’s why it’s important to thoroughly test any new website you build to make sure that it’s as free of errors as possible to give 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

• Automatické dopĺňanie Google Chrome: Kompletný sprievodca

• 10 najlepších rozšírení ochrany osobných údajov pre Chrome (2022)

• Na šifrovanie správ Gmail použite tieto 4 doplnky pre Chrome

• Nastavenia obsahu Google Chrome: Úplný sprievodca

• Aká je najlepšia služba konferenčného hovoru – porovnávanie najlepších aplikácií

• Testy mŕtvych pixelov na opravu zaseknutého pixelu na vašom monitore

• Ako odstrániť duplicitné digitálne fotografie na počítači so systémom Windows

• Funguje obnova súborov systému Windows od spoločnosti Microsoft? Testovali sme to.

• 5 najlepších nástrojov na skenovanie IP pre Windows, Mac, iOS a Android

• Ako blokovať stránky pomocou bezplatného softvéru na rodičovskú kontrolu

• Čo treba zvážiť pred vytvorením vlastnej Wiki

• Na odstránenie bežných problémov s tlačiarňou použite aplikáciu HP Print and Scan Doctor

• 9 spôsobov, ako zaznamenať hranie na vašom PC

• 5 prenosných aplikácií, ktoré určite chcete mať na svojom USB kľúči

• HDG vysvetľuje: Čo je SQL, T-SQL, MSSQL, PL/SQL a MySQL?

• 5 najlepších doplnkov ochrany osobných údajov pre Firefox pre bezpečnosť online

• Použite starú webovú kameru na bezplatné monitorovanie svojho majetku

• Google Apps Script Editor: Všetko, čo potrebujete vedieť, aby ste mohli začať

• Príručka Microsoft Planner: Všetko, čo potrebujete vedieť

• Dva nástroje na prepis na transformáciu zvuku na text