Jak používat nástroje pro vývojáře webového prohlížeče

2024 Autor: Abigail Brown | [email protected]. Naposledy změněno: 2024-01-07 19:01

Kromě většiny výrobců prohlížečů, kteří se zaměřují na běžné uživatele, kteří chtějí surfovat na webu, se starají také o webové vývojáře, designéry a profesionály na zajištění kvality, kteří pomáhají vytvářet aplikace a weby, ke kterým tito uživatelé přistupují, integrací výkonných nástroje přímo do samotných prohlížečů.

Pryč jsou dny, kdy vám jediné programovací a testovací nástroje v prohlížeči umožňovaly zobrazit zdrojový kód stránky a nic víc. Dnešní prohlížeče vám umožňují ponořit se mnohem hlouběji tím, že děláte věci, jako je spouštění a ladění úryvků JavaScriptu, kontrola a úpravy prvků DOM, monitorování síťového provozu v reálném čase při načítání vaší aplikace nebo stránky s cílem identifikovat úzká hrdla, analyzovat výkon CSS a zajistit, aby byl váš kód nevyužívá příliš mnoho paměti nebo příliš mnoho cyklů CPU a mnohem více.

Z hlediska testování můžete pomocí kouzla responzivního designu a vestavěných simulátorů reprodukovat, jak se aplikace nebo webová stránka vykreslí v různých prohlížečích a také na různých zařízeních a platformách. Nejlepší na tom je, že to všechno můžete udělat, aniž byste museli opustit prohlížeč!

Níže uvedené výukové programy vás provedou přístupem k těmto vývojářským nástrojům v několika oblíbených webových prohlížečích.

Google Chrome

Nástroje pro vývojáře Chrome vám umožňují upravovat a ladit kód, auditovat jednotlivé komponenty za účelem odhalení problémů s výkonem, simulovat obrazovky různých zařízení, včetně těch se systémem Android nebo iOS, a provádět několik dalších užitečných funkcí.

1. Vyberte hlavní nabídku prohlížeče Chrome, označenou třemi vodorovnými čarami a umístěnou v pravém horním rohu prohlížeče.

2. Když se zobrazí rozbalovací nabídka, umístěte kurzor myši na možnost Další nástroje.

   

3. Nyní by se měla zobrazit podnabídka. Vyberte možnost označenou Nástroje pro vývojáře. Místo této položky nabídky můžete také použít následující klávesovou zkratku: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Rozhraní nástrojů pro vývojáře Chrome by se nyní mělo zobrazit, jak ukazuje tento ukázkový snímek obrazovky. V závislosti na vaší verzi Chromu se počáteční rozvržení, které vidíte, může mírně lišit od zde uvedeného. Hlavní centrum nástrojů pro vývojáře, které se obvykle nachází na spodní nebo pravé straně obrazovky, obsahuje následující karty.

5. Kromě těchto sekcí máte také přístup k následujícím nástrojům prostřednictvím ikony >> umístěné vpravo od Performance tab.

   • Memory: Sledování a záznam využití paměti na webové stránce. Můžete vidět, jak náročný je JavaScript na vašem webu.
   • Zabezpečení: Zvýrazňuje problémy s certifikáty a další problémy související se zabezpečením aktivní stránky nebo aplikace.
   • Aplikace: Kontrola zdrojů používaných webovou aplikací. Získejte úplný rozpis toho, co se používá.
   • Audits: Nabízí způsoby, jak optimalizovat dobu načítání stránky nebo aplikace a celkový výkon.

   

6. Režim zařízení vám umožňuje zobrazit aktivní stránku v simulátoru, který ji vykreslí téměř přesně tak, jak by vypadala na jednom z více než tuctu zařízení, včetně několika známých Android a modely iOS, jako jsou iPad, iPhone a Samsung Galaxy. Máte také možnost emulovat vlastní rozlišení obrazovky, aby vyhovovala vašim konkrétním vývojovým nebo testovacím potřebám.

   Chcete-li Režim zařízení zapnout nebo vypnout, vyberte ikonu mobilního telefonu umístěnou přímo nalevo od Karta Elements.

   

7. Vzhled a chování svých vývojářských nástrojů si také můžete přizpůsobit tak, že nejprve vyberete tlačítko nabídky reprezentované tři vertikálně umístěné tečky a nachází se na pravé straně výše uvedených karet.

   V této rozevírací nabídce můžete změnit polohu doku, zobrazit nebo skrýt různé nástroje a také spouštět pokročilejší položky, jako je inspektor zařízení. Zjistíte, že samotné rozhraní dev tools je vysoce přizpůsobitelné pomocí nastavení v této sekci.

   

Mozilla Firefox

Sekce webových vývojářů Firefoxu obsahuje nástroje pro návrháře, vývojáře a testery, jako je editor stylů a kapátko s cílením na pixely.

1. Vyberte hlavní nabídku Firefoxu, kterou představují tři vodorovné čáry a nachází se v pravém horním rohu okna prohlížeče.

2. Když se zobrazí rozbalovací nabídka, vyberte Web Developer.

   

3. Nyní by se měla zobrazit nabídka pro vývojáře webu obsahující následující možnosti. Všimnete si, že k většině položek nabídky jsou přidruženy klávesové zkratky.

   • Toggle Tools: Zobrazí nebo skryje rozhraní nástrojů pro vývojáře, které se obvykle nachází ve spodní části okna prohlížeče. Klávesová zkratka: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Umožňuje kontrolovat a/nebo upravovat CSS a HTML kód na aktivní stránce i na přenosném zařízení prostřednictvím vzdáleného ladění. Klávesová zkratka: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Webová konzole: Umožňuje spouštět výrazy JavaScript na aktivní stránce a také kontrolovat různorodou sadu protokolovaných dat včetně bezpečnostních varování, síťových požadavků, zpráv CSS a dalších. Klávesová zkratka: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger vám umožňuje určit a opravit defekty nastavením bodů přerušení, kontrolou uzlů DOM, externími zdroji černého boxu a mnohem více. Stejně jako v případě Inspectoru i tato funkce podporuje vzdálené ladění. Klávesová zkratka: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Editor stylů: Umožňuje vytvářet nové šablony stylů a začlenit je do aktivní webové stránky nebo upravovat existující šablony a testovat, jak se změny vykreslují v prohlížeči jediným kliknutím.. Klávesová zkratka: Mac OS X, Windows (SHIFT+F7)
   • Výkon: Poskytuje podrobný rozpis výkonu sítě aktivní stránky, dat o snímkové frekvenci, doby a stavu spuštění JavaScriptu, blikání barvy a mnoho dalšího. Klávesová zkratka: Mac OS X, Windows (SHIFT+F5)
   • Network: Uvádí každý síťový požadavek iniciovaný prohlížečem spolu s odpovídající metodou, původní doménou, typem, velikostí a uplynulým časem. Klávesová zkratka: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Inspektor úložiště: Podívejte se na mezipaměť a soubory cookie, které web ukládá. Klávesová zkratka: (SHIFT+F9)
   • Panel nástrojů pro vývojáře: Otevře interaktivní interpret příkazového řádku. Zadejte help do interpretru pro seznam všech dostupných příkazů a jejich správnou syntaxi. Klávesová zkratka: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Poskytuje možnost vytvářet a spouštět webové aplikace prostřednictvím skutečného zařízení s operačním systémem Firefox OS nebo prostřednictvím simulátoru OS Firefox. Klávesová zkratka: Mac OS X, Windows (SHIFT+F8)
   • Konzola prohlížeče: Poskytuje stejné funkce jako Web Console (viz výše). Všechna vrácená data se však týkají celé aplikace Firefox (včetně rozšíření a funkcí na úrovni prohlížeče), nikoli pouze aktivní webové stránky. Klávesová zkratka: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responzivní zobrazení designu: Umožňuje vám okamžitě zobrazit webovou stránku v různých rozlišeních, rozvrženích a velikostech obrazovky, aby napodobila více zařízení včetně tabletů a chytrých telefonů. Klávesová zkratka: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Kapátko: Zobrazuje hexadecimální kód barvy pro jednotlivě vybrané pixely.
   • Zápisník: Zápisník vám umožňuje psát, upravovat, integrovat a spouštět úryvky kódu JavaScript z vyskakovacího okna Firefoxu. Otevřete interaktivní dokument JavaScript, který vám umožní zapsat kód a otestovat jej na webové stránce. Klávesová zkratka: (SHIFT+F4)
   • Servisní pracovníci: Odlaďte servisním pracovníkům vaši webovou aplikaci. Získejte podrobné informace o jejich výkonu a chybách.
   • Zdroj stránky: Původní vývojářský nástroj založený na prohlížeči, tato možnost jednoduše zobrazuje dostupný zdrojový kód aktivní stránky. Klávesová zkratka: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Získat další nástroje: Otevře sbírku Web Developer's Toolbox na oficiální stránce doplňků Mozilly, která obsahuje asi tucet populárních rozšíření, např. jako Firebug a Greasemonkey.

   

Microsoft Edge/Internet Explorer

Běžně označované jako F12 Developer Tools, pocta klávesové zkratce, která spustila rozhraní od dřívějších verzí Internet Exploreru, sady nástrojů pro vývojáře v IE11 a Microsoft Edge prošel dlouhou cestu od svého vzniku tím, že nabízí velmi šikovnou skupinu monitorů, debuggerů, emulátorů a průběžných kompilátorů.

Microsoft již nepodporuje Internet Explorer a doporučuje aktualizaci na novější prohlížeč Edge. Přejděte na jejich stránky a stáhněte si nejnovější verzi.

1. Vyberte Další akce, reprezentované tři tečky a umístěné v pravém horním rohu okna prohlížeče.

   

2. Když se zobrazí rozbalovací nabídka, vyberte možnost označenou Nástroje pro vývojáře.

   

3. Rozhraní pro vývoj by se nyní mělo zobrazit, obvykle ve spodní části okna prohlížeče. K dispozici jsou následující nástroje, z nichž každý je přístupný kliknutím na záhlaví příslušné karty nebo pomocí doprovodné klávesové zkratky.

   

   • DOM Explorer: Umožňuje upravovat šablony stylů a HTML na aktivní stránce a vykreslovat upravené výsledky za pochodu. Využívá funkce IntelliSense k automatickému doplňování kódu tam, kde je to možné. Klávesová zkratka: (CTRL+1)
   • Console: Poskytuje možnost odesílat ladicí informace včetně čítačů, časovačů, trasování a přizpůsobených zpráv prostřednictvím integrovaného rozhraní API. Umožňuje také vložit kód do aktivní webové stránky a upravit hodnoty přiřazené jednotlivým proměnným v reálném čase. Klávesová zkratka: (CTRL+2)
   • Debugger: Umožňuje vám nastavit zarážky a ladit váš kód během jeho provádění, v případě potřeby řádek po řádku. Klávesová zkratka: (CTRL+3)
   • Network: Uvádí všechny síťové požadavky iniciované prohlížečem během načítání a provádění stránky, včetně podrobností o protokolu, typu obsahu, využití šířky pásma a mnoho dalšího. Klávesová zkratka: (CTRL+4)
   • Výkon: Podrobnosti o snímkové frekvenci, využití procesoru a dalších metrikách souvisejících s výkonem, které vám pomohou urychlit načítání stránky a další činnosti. Klávesová zkratka: (CTRL+5)
   • Memory: Pomáhá izolovat a opravit potenciální úniky paměti na aktuální webové stránce zobrazením časové osy využití paměti spolu se snímky z různých časových intervalů. Klávesová zkratka: (CTRL+6)
   • Emulation: Ukazuje, jak by se aktivní stránka vykreslila v různých rozlišeních a velikostech obrazovky, emuluje chytré telefony, tablety a další zařízení. Poskytuje také možnost upravit uživatelského agenta a orientaci stránky a také simulovat různé geolokace zadáním zeměpisné šířky a délky. Klávesová zkratka: (CTRL+7)

4. Chcete-li zobrazit Konzolu v kterémkoli z ostatních nástrojů, stiskněte čtvercové tlačítko s pravou závorkou uvnitř umístěnou v v pravém horním rohu rozhraní vývojových nástrojů.

   

5. Chcete-li odpojit rozhraní nástrojů pro vývojáře, aby se stalo samostatným oknem, vyberte dva kaskádovité obdélníky nebo použijte následující klávesovou zkratku: CTRL+P. Nástroje můžete vrátit na původní místo stisknutím CTRL+P podruhé.

   

Apple Safari (pouze Mac)

Různorodá sada vývojářských nástrojů Safari odráží velkou vývojářskou komunitu, která využívá Mac pro své návrhářské a programovací potřeby. Kromě výkonné konzole a tradičních funkcí protokolování a ladění je k dispozici také snadno použitelný režim responzivního návrhu a nástroj pro vytváření vlastních rozšíření prohlížeče.

1. V nabídce prohlížeče v horní části obrazovky vyberte Safari. Když se zobrazí rozbalovací nabídka, vyberte Preferences. Místo této položky nabídky můžete také použít následující klávesovou zkratku: COMMAND+COMMA(,)

   

2. Rozhraní Preferences by se nyní mělo zobrazit přes okno prohlížeče Safari. Vyberte ikonu Pokročilé, která se nachází zcela vpravo v záhlaví.

   

3. Předvolby Advanced by nyní měly být viditelné. Ve spodní části této obrazovky je možnost označená Zobrazit nabídku vývoje na liště nabídek spolu se zaškrtávacím políčkem. Pokud v poli není zobrazeno žádné zaškrtnutí, klikněte na něj jednou a umístěte ho tam.

   

4. Zavřete rozhraní Předvolby.

5. Nyní byste si měli všimnout nové možnosti v nabídce prohlížeče s názvem Develop, která se nachází mezi Záložkami a oknem. Klikněte na tuto položku nabídky. Nyní by se měla zobrazit rozbalovací nabídka obsahující následující možnosti.

   • Otevřít stránku pomocí: Umožňuje otevřít aktivní webovou stránku v jednom z ostatních prohlížečů aktuálně nainstalovaných na vašem Macu.
   • User Agent: Umožňuje vybrat z více než tuctu předdefinovaných hodnot uživatelského agenta, včetně několika verzí prohlížečů Chrome, Firefox a Internet Explorer, a také definovat své vlastní řetězec.
   • Vstoupit do režimu responzivního návrhu: Vykreslí aktuální stránku tak, jak by vypadala na různých zařízeních a v různých rozlišeních obrazovky.
   • Show Web Inspector: Spouští hlavní rozhraní pro vývojářské nástroje Safari, které se obvykle nachází ve spodní části obrazovky prohlížeče a obsahuje následující sekce: Prvky, Síť, Zdroje, Časové osy, Debugger, Storage, Console.
   • Show Error Console: Spouští také rozhraní nástrojů pro vývojáře, přímo na kartu Console, která zobrazuje chyby, varování a další možnosti vyhledávání log data.
   • Zobrazit zdroj stránky: Otevře kartu Zdroje, která zobrazuje zdrojový kód pro aktivní stránku kategorizovanou podle dokumentu.
   • Zobrazit zdroje stránky: Provádí stejnou funkci jako možnost Zobrazit zdroj stránky.
   • Zobrazit editor úryvků: Otevře nové okno, kde můžete zadat CSS a HTML kód a zobrazit náhled jeho výstupu za běhu.
   • Show Extension Builder: Poskytuje možnost vytvářet nebo upravovat rozšíření Safari pomocí CSS, HTML a JavaScript.
   • Zobrazit záznam časové osy: Otevře kartu Časové osy a začne zobrazovat síťové požadavky, rozvržení a informace o vykreslování a také provádění JavaScriptu v reálném čase.
   • Empty Caches: Smaže celou mezipaměť, která je aktuálně uložena na vašem pevném disku.
   • Zakázat mezipaměti: Zastaví Safari v ukládání do mezipaměti, takže veškerý obsah bude načten ze serveru při každém načtení stránky.
   • Zakázat obrázky: Zabraňuje vykreslování obrázků na všech webových stránkách.
   • Zakázat styly: Ignoruje vlastnosti CSS při načtení stránky.
   • Zakázat JavaScript: Omezí spouštění JavaScriptu na všech stránkách.
   • Zakázat rozšíření: Zakáže spouštění všech nainstalovaných rozšíření v prohlížeči.
   • Zakázat hacky specifické pro web: Pokud bylo Safari upraveno tak, aby explicitně řešilo problémy specifické pro aktivní webovou stránku, tato možnost tyto změny zablokuje, takže stránka načte jako před zavedením těchto úprav.
   • Zakázat omezení místních souborů: Umožňuje prohlížeči přístup k souborům na místních discích, což je akce, která je z bezpečnostních důvodů ve výchozím nastavení omezena.
   • Zakázat omezení křížového původu: Tato omezení jsou ve výchozím nastavení zavedena, aby se zabránilo XSS a dalším potenciálním nebezpečím. Často však musí být dočasně deaktivovány pro účely vývoje.
   • Povolit JavaScript z pole Smart Search: Je-li povoleno, poskytuje možnost zadávat adresy URL pomocí javascriptu: začleněno přímo do adresního řádku.
   • Považujte certifikáty SHA-1 za nezabezpečené: Certifikáty SSL využívající algoritmus SHA-1 jsou široce považovány za zastaralé a zranitelné.