Nástroje pro vývojáře Chrome (Návod)

Použití nástrojů vývojáře v prohlížeči Chrome (návod)

Jazyk: Němčina

Používání Chrome Developer Tools účelně (návod)

S Chrome Developer Tools můžeš analyzovat a upravovat své webové stránky, provádět analýzy výkonu a testovat své stránky na různých zařízeních a obrazovkách. V tomto tutoriálu se naučíš nejdůležitější funkce DevTools. Jak odhalit chyby v HTML, CSS a JavaScriptu, najít způsoby, jak optimalizovat výkon a spotřebu paměti a zlepšit layouty svých stránek - instruktor Stephan Haewß ti ukáže na praktických příkladech, jak postupovat!

Nauč se nejdůležitější funkce Chrome Developer Tools
Ladit a optimalizovat kód HTML, CSS a JavaScriptu
Sledovat průběh kódu, odhalovat chyby a opravovat
CSS animace, úpravy a rozložení přizpůsobit
Vylepšit výkon a spotřebu paměti webových stránek
Pro bezchybné a rychlé webové stránky s optimalizovanými rozlohami - šestihodinový kurz od trenéra Stefana Haewße

Čistý kód významně přispívá k viditelnosti vašich webových stránek. Nyní se naučte, jak používat Chrome DevTools k analýze a optimalizaci svých stránek.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

podrobnosti

Obsah: 6 h Video-Trénink
Licence: soukromá a komerční Práva k využití

Kategorie

Webdesign, CMS & Vývoj

Vytvořeno s láskou od:

Stephan Haewß

Úvod do kurzu pro Chrome Developer Tools

Chrome Developer Tools: 1.1 | Co se naučíte v tomto kurzu?

Zdarma

Nástroje pro vývojáře Chrome: 1.1 | Co se naučíte v tomto kurzu?

Zde je poskytnut přehled všech témat, která budou v tomto kurzu probírána.

Chrome Developer Tools: 1.2 | Vytvoření testovací webové aplikace

Zdarma

Vývojářské nástroje Chrome: 1.2 | Vytvořit testovací webovou aplikaci

První webová aplikace je vytvořena s vysvětlením prvních kroků při používání nástrojů pro vývojáře.

Zdarma

Nástroje pro vývojáře Chrome: 1.3 | První přehled funkcí

Seznámení s různými panely nástrojů pro vývojáře a jejich základním fungováním.

Styling, rozložení, vzhled pomocí záložky „Prvky“

Chrome Developer Tools: 2.1 | Prohlížení struktury DOM v záložce Elements

Chrome Developer Tools: 2.1 | Inspekce struktury DOM na kartě Elements

Podrobné zkoumání struktury HTML stránky a jak vybírat a upravovat prvky v záložce Elements-.

Chrome Developer Tools: 2.2 | Změna stylu

Průběžná úprava CSS stylů a zkoumání vlivu na zobrazení webové stránky.

Chrome Developer Tools: 2.3 | Úprava HTML, DOM

Nástroje vývojáře Chrome: 2.3 | Úprava HTML, DOM

Upravení struktury HTML a pozorování dopadů na DOM.

Chrome Developer Tools: 2.4 | Testování responzivního designu v mobilním zobrazení

Nástroje vývojáře Chrome: 2.4 | Zobrazení pro mobilní zařízení – Testování responzivního designu

Simulace různých velikostí zařízení a ověření přizpůsobivosti webové stránky.

Nástroje vývojáře Chrome: 2.5 | Praktické cvičení: Oprava bočního menu

Chrome Developer Tools: 2.5 | Praktická cvičení: Oprava bočního menu

Oprava chyby v bočním menu.

Chrome Developer Tools: 2.6 | Praktická cvičení: Oprava rozvržení/přetečení

Chrome Developer Tools: 2.6 | Praktický cvičení: Oprava rozložení/Přetečení

Řešení problémů s rozvržením a přetečením chyb.

Ladění skriptů pomocí Zdrojů a Konzole

Nástroje vývojáře Chrome: 3.1 | Představení: Ladění skriptů a nastavení prvního bodu přerušení

Chrome Developer Tools: 3.1 | Představení: Ladění skriptů a nastavení prvního bodu přestavení

Úvod do ladění kódu v JavaScriptu a nastavování breakpointů.

Chrome Developer Tools: 3.2 | Praktická cvičení: Ladění aplikace TypeScript

Chrome Developer Tools: 3.2 | Praktické cvičení: ladění TypeScript aplikace

Ladění kódu v TypeScriptu pomocí vývojářských nástrojů.

Nástroje pro vývojáře Chrome: 3.3 | Praktické cvičení: Ladění – Najděte chybu při mazání z pole

Chrome Developer Tools: 3.3 | Praktická cvičení: Ladění – Najděte chybu při mazání z pole

Hledání a odstranění chyby při odstraňování prvků z pole.

Chrome Developer Tools: 3.4 | Praktické cvičení: Ladění React-App

Nástroje pro vývojáře v Chrome: 3.4 | Praktické cvičení: Ladění aplikace v Reactu

Specifické techniky ladění pro aplikace v Reactu.

Chrome Developer Tools: 3.5 | Podmíněné přerušení

Nástroje pro vývojáře Chrome: 3.5 | Podmíněné zastavení程序

Nastavení bodů přerušení, které jsou spouštěny pouze za určitých podmínek.

Chrome Developer Tools: 3.6 | DOM-Breakpoints

Chrome Developer Tools: 3.6 | DOM-Breakpoints

Chrome Developer Tools: 3.6 | DOM-Breakpoints

Chrome Developer Tools: 3.6 | DOM-Breakpoints Nástroje pro vývojáře Chrome: 3.6 | DOM zálomky

Sledování změn určitých prvků DOM.

Chrome Developer Tools: 3.7 | Fetch-Breakpoints

Chrome Developer Tools: 3.7 | Fetch-Breakpoints

Nástroje vývojáře Chrome: 3.7 | Fetch-Breakpoints

Zastavení kódu při síťových požadavcích.

Nástroje pro vývojáře Chrome: 3.8 | Bod přerušení výjimky

Chrome Developer Tools: 3.8 | Výjimkové body přestávky

Automatické zastavení při výskytu chyb.

Chrome Developer Tools: 3.9 | Přepsat a pracovní plocha

Chrome Developer Tools: 3.9 | Přepisy a pracovní oblast

Upravení stylů a skriptů bez úprav v původním kódu.

Chrome Developer Tools: 3.10 | Ladění krok za krokem a na určitá místa

Nástroje vývojáře Chrome: 3.10 | Ladění krok za krokem a ke konkrétním místům

Podrobné řízení procesu ladění.

Chrome Developer Tools: 3.11 | Konzole: Přehled, jednoduché spuštění kódu a výstupy

Úvod do konzole a její základní funkce.

Nástroje pro vývojáře Chrome: 3.12 | Přístup k prvkům DOM v konzoli

Manipulace DOMu přímo prostřednictvím konzole.

Nástroje pro vývojáře Chrome: 3.13 | Ukázky a měření času v konzoli

Nástroje vývojáře Chrome: 3.13 | Snippety a měření času v konzoli

Znovupoužitelné úseky kódu a měření výkonu.

Nástroje vývojáře Chrome: 3.14 | Seskupování a stylování výstupů protokolu

Nástroje pro vývojáře Chrome: 3.14 | Skupina a stylizace logových výstupů

Logovací výstupy lze změnit barevně a písmem a seskupit.

Nástroje pro vývojáře Chrome: 3.15 | Další užitečné metody pro konzoli

Chrome Developer Tools: 3.15 | Další užitečné metody konzole

Některé ne tak často používané, ale přesto užitečné konzolové funkce.

Analýza a optimalizace sítě

Chrome Developer Tools: 4.1 | Síť: Přehled funkcí

Analýza síťových požadavků a odpovědí.

Chrome Developer Tools: 4.2 | Síť: Omezování, Hlavičky a Náhled

Chrome Developer Tools: 4.2 | Síť: Omezení rychlosti, Hlavičky a Náhled

Simulace pomalých sítových spojení a analýza HTTP záhlaviček.

Optimalizace výkonu a paměti

Chrome Developer Tools: 5.1 | Profiler – Sledování a optimalizace výkonu

Nástroje pro vývojáře Chrome: 5.1 | Profiler – Sledování a optimalizace výkonu

Identifikace úzkých míst výkonu v kódu JavaScriptu.

Chrome Developer Tools: 5.2 | Optimalizace spotřeby paměti pomocí nástroje Memory Profiler

Nástroje pro vývojáře Chrome: 5.2 | Optimalizace spotřeby paměti pomocí Memory Profileru

Analýza spotřeby paměti a identifikace úniků paměti.

Aplikační panel a další nástroje

Chrome Developer Tools: 6.1 | Uzitečné pomocníky a záložka Rendering

Chrome Developer Tools: 6.1 | Užitečné nástroje a kartu Renderování

Další nástroje k optimalizaci výkonu.

Nástroje vývojáře Chrome: 6.2 | Prohlížení a doladění animací

Nástroje pro vývojáře Chrome: 6.2 | Prohlížení a úprava animací

Detailní analýza CSS animací a přechodů. Optimalizace výkonu úpravou časových funkcí a vlastností.

Chrome Developer Tools: 6.3 | Prozkoumejte zdroje webové aplikace pomocí karty Aplikace

Nástroje pro vývojáře Chrome: 6.3 | Prozkoumejte zdroje webové aplikace pomocí záložky Aplikace

Prozkoumání uložených dat webové aplikace, jako je Místní úložiště, Sezení úložiště a IndexedDB. Optimalizace správy paměti.

Nástroje pro vývojáře Chromu: 6.4 | Použití rozšíření React Dev Tools

Chrome Developer Tools: 6.4 | Použití rozšíření React Dev Tools

Úvod do doplňku pro prohlížeč React DevTools. Inspekce struktury komponent React, Props a stavu.

Nastavení

Chrome Developer Tools: 7 | Nejdůležitější nastavení Chrome Dev Tools

Nastavení nástrojů pro vývojáře pro efektivnější práci. Přizpůsobení motivů, klávesových zkratek a dalších nastavení.

Nástroje vývojáře jiného prohlížeče

Nástroje pro vývojáře Chrome: 8.1 | Nástroje pro vývojáře MS Edge

Nástroje vývojáře Chrome: 8.1 | Nástroje vývojáře MS Edge

Velmi podobné nástrojům Chrome Dev, ale existují zde detailní rozdíly.

Chrome Developer Tools: 8.2 | Nástroje pro vývojáře Firefox

Chrome Developer Tools: 8.2 | Nástroje pro vývoj v prohlížeči Firefox

Výrazné rozdíly jsou přítomny, ale z principu velmi podobné.

Chrome Developer Tools: 8.3 | Safari-DevTools

Nástroje vývojáře Chrome: 8.3 | Safari-DevTools

Částečně větší rozdíly oproti Chrome, ale i zde je princip stejný.

Detaily obsahu

Optimalizujte své webové stránky s nástroji pro vývojáře Chrome
Webová stránka bez chyb, která se rychle načítá a na obrazovce každé velikosti vypadá dobře?! Abyste tohoto dosáhli, musíte analyzovat a optimalizovat kód svých stránek. Nástroje pro vývojáře Chrome jsou k tomuto účelu skvělé. S jejich pomocí odhalíte chyby ve svém HTML, CSS a JavaScriptovém kódu. Navíc si můžete podrobně prohlédnout výkon, kódové procesy a využití paměti. Využijte tyto poznatky k účelné úpravě svých stránek a nakonec zvýšení viditelnosti svých stránek prostřednictvím ladění a optimalizace.
Jak efektivně používat nástroje pro vývojáře Chrome se dozvíte v tomto tutoriálu, který trvá přes šest hodin od softwarového vývojáře a trenéra Stephana Haewße. Začněte s základy Chrome DevTools a postupujte k pokročilým technikám - pro čistý, výkonný vzhled vašich stránek!

HTML, CSS, JavaScript - Dladění pro čisté, rychlé webové stránky s optimalizovanými rozloženími

Kurz začíná s úvodem do nástrojů pro vývojáře Chrome, které jsou přístupné přímo v prohlížeči. Dozvíte se, co jsou DevTools a jak je můžete základně používat. Poté se zabýváte záložkou Elements-, pomocí které můžete inspirovat a upravovat stylování, rozvržení a vzhled svých stránek. S oblastmi Sources a Console provádíte ladicí skript. Kromě toho se naučíte, jak pomocí nástrojů pro vývojáře Chrome provádět analýzu sítě, výkon a optimalizaci paměti. Nakonec si uděláte přehled o DevTools v jiných prohlížečích. Celkově je kurz vhodný pro všechny vývojáře webových stránek, kteří chtějí ladit a optimalizovat webové stránky pomocí DevTools od Chrome.

Efektivní využití Chrome DevTools - obsah tutoriálu přehledně

Úvod do Chrome DevTools: Kurz vám ukáže, jak otevřít DevTools, v nich navigovat a jak efektivně využívat hlavní funkce pro úpravy a odstraňování chyb HTML, CSS a JavaScriptu.
Ladění HTML a CSS: Jak pomocí nástrojů pro vývojáře Chrome prozkoumáte doménový strom webové stránky, upravíte HTML a CSS přímo v živém režimu a tak okamžitě opravíte problémy s rozvržením a chybami v CSS-stylování - optimální pro rychlé testování a úpravy designu před trvalým přijetím změn.
Ladění JavaScriptu: Dozvíte se, jak načítat soubory JavaScript, nastavovat body přerušení a postupně spouštět kód. Proměnné a objekty lze kontrolovat v reálném čase, zatímco zásobník volání usnadňuje sledování zpětného volání funkcí - ideální pro přesné hledání chyb.
Použití konzole: Konzole nástrojů pro vývoj umožňuje otevřít a analyzovat logy, spouštět JavaScriptový kód a přímo manipulovat s prvkůmi webových stránek. Cílenými výstupy logu lze kód důkladně analyzovat a optimalizovat, což značně usnadňuje ladění a zlepšení výkonu.
Optimalizace výkonu: Zkontrolujte síťové požadavky a doby načítání, sledujte využití paměti a identifikujte úniky paměti. Cílenou optimalizací výkonu JavaScriptu a podrobnými analýzami výkonu aplikace lze efektivně zlepšit rychlost načítání a správu zdrojů.
Pokročilé techniky: Panel Application- nástrojů pro vývojáře Chrome vám umožní přístup k webovému úložišti, jako je LocalStorage, IndexedDB a mezipaměť, stejně jako správu pracovníků služby a manifestací. Kromě toho je možné integrovat rozšíření, jako jsou React-DevTools, pro lepší ladění reaktivních aplikací. Přizpůsobitelné nastavení také nabízí optimální nastavení DevTools pro individuální pracovní požadavky.