Žádný web není vytvořen dokonale. Stejně jako všechny produkty vyrobené lidmi jsou chyby kódu součástí tohoto procesu. Proto je důležité důkladně otestovat jakýkoli nový web, který vytvoříte, abyste se ujistili, že je to co nejmenší možný omyl, abychom uživatelům poskytli co nejlepší zážitek.
Neměli byste otestovat web, aniž byste nejprve vyzkoušeli DevTools kit Google Chrome. Režim pro vývojáře Chrome vám umožňuje vyzkoušet a důkladně otestovat nový web (nebo existující), abyste našli a opravili chyby. Může vám také poskytnout informace o tom, jak jsou spuštěny jiné weby, včetně zobrazení zdrojového kódu.
Zde je vše, co potřebujete vědět o vývojářském režimu prohlížeče Google Chrome, jaké nástroje má a jak je efektivně využívat.
Co je Chrome Režim pro vývojáře?
Když odkazujeme na režim pro vývojáře Chrome, nemluvíme o stejný vývojářský režim, které uvidíte na Chromebookech. Máme na mysli rozsáhlé vývojové nástroje Chrome (nazývané Google DevTools), které jsou zabudovány do samotného prohlížeče.
Jedná se o nástroje určené k testování, analýze a záměrnému testování rozbít (pokud potřebujete) webovou stránku, kterou jste načetli v prohlížeči Google Chrome pro účely testování. Na základní úrovni můžete pomocí DevTools zobrazit zdrojový kód pro web a nechat se nahlédnout pod kapotu, abyste viděli, jak byl web vytvořen a jak dobře běží.
Google DevTools však nabízí více než toto. Po načtení stránky můžete použít vývojářský režim prohlížeče Chrome, spustit po spuštění stránky příkazy konzoly Google Chrome a ovládat a manipulovat s touto stránkou, jakož i rychlost a síťové testy ke sledování webového provozu.
In_content_1 all: [300x250] / dfp: [640x360]->V režimu Chrome DevTools můžete emulovat také jiná zařízení, včetně různých operačních systémů a rozlišení obrazovky. To vám umožní zjistit, zda má web responzivní webový design a kde se jeho obsah a rozvržení změní v závislosti na rozlišení nebo typu zařízení.
I když jsou tyto nástroje zaměřeny na profesionální vývojáře nebo testery webu, je to také užitečné pro standardní uživatele prohlížeče Chrome, aby věděli, jak se orientovat v sadě DevTools. Pokud narazíte na problém s webem, který nemůžete vyřešit, můžete přepnutím do vývojářského režimu Chrome zjistit, zda se jedná o problém s webem nebo s prohlížečem.
Jak přistupovat k Googlu Nabídka Chrome DevTools
Existuje několik způsobů, jak otevřít nabídku Google Chrome DevTools, v závislosti na nástroji, který chcete použít.
Nejjednodušší způsob, jak to provést je z nabídky Google Chrome. Chcete-li to provést, klikněte v pravém horním rohu na ikonu nabídky se třemi tečkami. V zobrazené nabídce klikněte na Další nástroje>Nástroje pro vývojáře.
Tím se otevře sada DevTools v nové nabídce na pravé straně otevřené karty nebo okna prohlížeče Chrome.
Můžete to také provést pomocí klávesových zkratek. V počítači se systémem Windows nebo Linux otevřete prohlížeč Chrome a stiskněte klávesu F12. Na otevřené kartě nebo okně Chrome můžete také stisknout klávesy Ctrl + Alt + Jnebo Ctrl + Alt + I.
V systému MacOS stiskněte F12nebo stisknutím kláves Option + Command + Jnebo Option + Command + Iotevřete nabídku Chrome DevTools. Tím se otevře konzola Chrome a v horní části nabídky DevTools se přesunou na jiné nástroje Chrome.
Pokud chcete, můžete si prohlédnout zdrojový kód pro web (otevřete prvkyna kartě nabídky DevTools v procesu) na kterékoli otevřené webové stránce kliknutím pravým tlačítkem myši a kliknutím na Zkontrolovatoption.
Používání Chrome DevTools
Jak jsme se krátce dotkli, můžete pomocí sady Chrome DevTools zobrazit zdrojový kód pro web na kartě Prvky. Umožní vám analyzovat kód za načtenou stránkou a zobrazit chybové zprávy (označující problémy s načtením webu) v konzole Chrome na kartě Konzole.
Na kartě Zdrojemůžete také zobrazit různé zdroje obsahu z webu. Pokud je například web pomocí sítě pro doručování obsahu (CDN), média z webu by zde byla uvedena jako jiný zdroj.
Režim pro vývojáře Chrome vám umožňuje přímo stahovat tento obsah nebo provádět více komplexní analýza obsahu.
Pokud chcete vyzkoušet, jak web funguje, můžete sledovat a zaznamenávat využití sítě na kartě Síť. Zobrazí se rychlost, velikost a typ síťových požadavků zadaných mezi prohlížečem a webem.
Například, když se stránka poprvé načte, načte web samotný obsah stránky, ale také může požadovat data z databází třetích stran. Když se například přihlásíte, může se to dotázat na databázi, která se zde zobrazí jako požadavek na síť.
Tuto analýzu můžete dále analyzovat na kartě Výkon, kde můžete zaznamenat využití vašeho prohlížeče Chrome ve větší hloubce, včetně zaznamenávání snímků obrazovky v různých bodech. Tím se zaznamená, jak dlouho trvá načítání webu pro další analýzu.
Google Chrome má pověst být tvrdý na vaší PC paměti, takže můžete otestovat využití paměti JavaScriptu na kartě Paměť. Zde lze použít různé testovací profily Chrome a další informace o tomto testování naleznete na Stránka s dokumentem Chrome DevTools.
Pro podrobnější analýzu obsahu vašeho webu jako jakékoli úložiště prohlížeče, které může používat (například pro protokolování dat), můžete hledat na kartě Aplikace. Informace o souborech cookie webu si můžete prohlédnout zde v sekci Soubory cookienebo vymazat použité úložiště kliknutím na možnost Vymazat úložiště.
Pokud se obáváte o zabezpečení svého webu, můžete zkontrolovat jeho výkonnost na kartě Zabezpečení. Tím získáte rychlý přehled o analýze zabezpečení prohlížeče Chrome pro stránku, včetně toho, zda má stránka správný a důvěryhodný certifikát SSL.
Pokud chcete vygenerovat přehled na webu výkon, včetně toho, zda splňuje typické uživatelské standardy a pokud by výkon webu mohl ovlivnit optimalizaci vyhledávače, můžete kliknout na kartu Maják. Nabízí nastavení, která můžete zkontrolovat nebo zrušit zaškrtnutí svého přehledu - kliknutím na Generovat přehledvytvořte přehled, který chcete zobrazit.
Sotva poškrábá povrch potenciálu, který Chrome vývojářský režim může přinést vývojářům. Pokud se chcete dozvědět více, měly by vám Dokumentace Chrome DevTools pomoci s nabízenými nástroji a funkcemi, včetně toho, jak s nimi vytvořit vlastní uživatelské testy.
Pokročilé triky Google Chrome
Většina uživatelů Chrome nikdy neví, že sada Google Chrome DevTools existuje v jejich prohlížeči, ale pro výkonné uživatele to zůstává výjimečně užitečným způsobem testování a analýzy webových stránek. K dispozici jsou také Rozšíření Chrome pro vývojáře webu třetích stran, které vám pomohou váš web dále otestovat.
Pokud jste budování základního webu, může vám pomoci přechod do vývojářského režimu Chrome. na vašem webu zjistí chyby, které nejsou okamžitě viditelné. To lze provést pouze v případě, že Chrome pracuje správně, takže pokud máte bojuje s pádem Chrome, možná budete muset nejprve obnovit nebo znovu nainstalovat prohlížeč.