Nástroje pre vývojárov Chrome (Návod)

Jazyk: Nemčina

Efektívne používanie vývojárskych nástrojov Chrome (tutoriál)

Pomocou vývojárskych nástrojov Chrome môžete analyzovať a upravovať svoje webové stránky, vykonávať analýzy výkonu a testovať stránky pre rôzne zariadenia a veľkosti obrazovky. V tomto návode sa zoznámite s najdôležitejšími funkciami nástrojov DevTools. Ako odhaliť chyby v HTML, CSS a JavaScript, nájsť spôsoby optimalizácie výkonu a využitia pamäte a zlepšiť rozloženie stránok - školiteľ Stephan Haewß vám na praktických príkladoch ukáže, ako postupovať!

Zoznámte sa s najdôležitejšími funkciami vývojárskych nástrojov Chrome
Ladenie a optimalizácia kódu HTML, CSS a JavaScript
porozumieť sekvenciám kódu, odhaliť a opraviť chyby
Prispôsobenie animácií, štýlov a rozložení CSS
Zlepšenie výkonu a spotreby pamäte webových stránok
Pre bezchybné a rýchle webové stránky s optimalizovaným rozložením - šesťhodinový kurz od školiteľa Stephana Haewsa

Čistý kód výrazne prispieva k viditeľnosti vašej webovej stránky. Teraz sa dozviete, ako používať nástroje Chrome DevTools na analýzu a optimalizáciu svojich stránok.

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éning
Licencia: súkromná a komerčná Práva na používanie

Kategórie

Webdesign, CMS a vývoj

Vytvorené s láskou od:

Stephan Haewß

Úvod do kurzu Nástroje pre vývojárov Chrome

Zadarmo

Nástroje pre vývojárov Chrome: 1.1 | Čo sa naučíte v tomto kurze?

Tu je prehľad všetkých tém, ktoré sú predmetom tohto kurzu.

Do textového návodu

Zadarmo

Nástroje pre vývojárov Chrome: 1.2 | Vytvorenie testovacej webovej aplikácie

Vytvorí sa prvá webová aplikácia, ktorá vysvetľuje prvé kroky pri používaní vývojárskych nástrojov.

Do textového návodu

Zadarmo

Nástroje pre vývojárov Chrome: 1.3 | Prvý prehľad funkcií

Úvod do rôznych panelov DevTools a ich základných funkcií.

Do textového návodu

Štýl, rozloženie, vzhľad prostredníctvom karty Prvky

Nástroje pre vývojárov Chrome: 2.1 | Kontrola štruktúry DOM na karte Prvky

Podrobný pohľad na štruktúru webovej stránky HTML a na výber a úpravu prvkov na karte Prvky.

Do textového návodu

Nástroje pre vývojárov Chrome: 2.2 | Zmena štýlu

Živá úprava štýlov CSS a skúmanie vplyvu na prezentáciu webovej stránky.

Do textového návodu

Nástroje pre vývojárov Chrome: 2.3 | Úprava HTML, DOM

Zmena štruktúry HTML a pozorovanie účinkov na DOM.

Do textového návodu

Nástroje pre vývojárov Chrome: 2.4 | Mobilné zobrazenie - Testovanie responzívneho dizajnu

Simulácia rôznych veľkostí zariadení a kontrola prispôsobiteľnosti webovej stránky.

Do textového návodu

Nástroje pre vývojárov Chrome: 2.5 | Praktické cvičenie: Oprava bočnej ponuky

Oprava chyby v bočnej ponuke.

Do textového návodu

Nástroje pre vývojárov prehliadača Chrome: 2.6 | Praktické cvičenie: Oprava rozloženia/prietoku

Riešenie problémov s rozložením a chýb pri pretečení.

Do textového návodu

Ladenie skriptov prostredníctvom zdrojov a konzoly

Nástroje pre vývojárov Chrome: 3.1 | Úvod: ladenie skriptov a nastavenie prvého bodu prerušenia

Úvod do ladenia kódu JavaScriptu a nastavenia bodov prerušenia.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.2 | Praktické cvičenie: Ladenie aplikácie v jazyku TypeScript

Ladenie kódu jazyka TypeScript pomocou nástroja DevTools.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.3 | Praktické cvičenie: Ladenie - hľadanie chýb pri odstraňovaní z poľa

Vyhľadanie a oprava chyby pri odstraňovaní prvkov z poľa.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.4 | Praktické cvičenie: Ladenie aplikácie React

Špecifické techniky ladenia aplikácií React.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.5 | Podmienené body prerušenia

Nastavenie bodov prerušenia, ktoré sa spúšťajú len za určitých podmienok.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.6 | Body prerušenia DOM

Monitorovanie zmien určitých prvkov DOM.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.7 | Získavanie bodov prerušenia

Zastavenie kódu pre sieťové požiadavky.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.8 | Body prerušenia výnimiek

Automatické zastavenie pri výskyte chýb.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.9 | Prepisovanie a pracovný priestor

Prispôsobenie štýlov a skriptov bez zmeny pôvodného kódu.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.10 | Ladenie v krokoch a na konkrétnych miestach

Podrobné riadenie procesu ladenia.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.11 | Konzola: Prehľad, jednoduché vykonávanie kódu a výstupy

Úvod do konzoly a jej základných funkcií.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.12 | Prístup k prvkom DOM v konzole

Manipulácia s DOM priamo prostredníctvom konzoly.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.13 | Úryvky a časovanie v konzole

Opakovane použiteľné úryvky kódu a merania výkonu.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.14 | Zoskupovanie a štylizácia výstupov protokolov

Farba a písmo výstupov protokolu sa dajú meniť a zoskupovať.

Do textového návodu

Nástroje pre vývojárov Chrome: 3.15 | Ďalšie užitočné metódy konzoly

Niektoré nie príliš často používané, ale napriek tomu užitočné funkcie konzoly.

Do textového návodu

Analýza a optimalizácia siete

Nástroje pre vývojárov Chrome: 4.1 | Sieť: Prehľad funkcií

Analýza sieťových požiadaviek a odpovedí.

Do textového návodu

Nástroje pre vývojárov Chrome: 4.2 | Sieť: škrtenie, hlavičky a náhľad

Simulácia pomalých sieťových pripojení a analýza hlavičiek HTTP.

Do textového návodu

Optimalizácia výkonu a pamäte

Nástroje pre vývojárov Chrome: 5.1 | Profiler - vyhodnocovanie a optimalizácia výkonu

Identifikácia úzkych miest výkonu v kóde JavaScriptu.

Do textového návodu

Nástroje pre vývojárov Chrome: 5.2 | Optimalizácia spotreby pamäte pomocou nástroja Memory Profiler

Analýza spotreby pamäte a identifikácia únikov pamäte.

Do textového návodu

Karta Aplikácia a ďalšie nástroje

Nástroje pre vývojárov Chrome: 6.1 | Užitoční pomocníci a karta vykresľovania

Ďalšie nástroje na optimalizáciu výkonu.

Do textového návodu

Nástroje pre vývojárov Chrome: 6.2 | Zobrazenie a úprava animácií

Podrobná analýza animácií a prechodov CSS. Optimalizácia výkonu úpravou funkcií a vlastností časovania.

Do textového návodu

Nástroje pre vývojárov Chrome: 6.3 | Preskúmajte zdroje webových aplikácií pomocou karty Aplikácie

Analýza uložených údajov webovej aplikácie, ako sú lokálne úložisko, úložisko relácií a indexovaná databáza. Optimalizácia správy úložísk.

Do textového návodu

Nástroje pre vývojárov Chrome: 6.4 | Použitie rozšírenia React Dev Tools

Úvod do doplnku prehliadača React DevTools. Kontrola štruktúry, rekvizít a stavu komponentov React.

Do textového návodu

Nastavenia

Nástroje pre vývojárov Chrome: 7 | Najdôležitejšie nastavenia nástrojov Chrome Dev Tools

Konfigurácia nástrojov DevTools pre efektívnejší spôsob práce. Prispôsobenie tém, klávesových skratiek a ďalších nastavení.

Do textového návodu

Nástroje DevTools iných prehliadačov

Nástroje pre vývojárov Chrome: 8.1 | Nástroje MS Edge DevTools

Veľmi sa podobá vývojovým nástrojom Chrome, ale v detailoch sa líši.

Do textového návodu

Nástroje pre vývojárov Chrome: 8.2 | Nástroje Firefox DevTools

Sú medzi nimi výrazné rozdiely, ale v zásade sú si veľmi podobné.

Do textového návodu

Nástroje pre vývojárov Chrome: 8.3 | Nástroje Safari DevTools

V porovnaní s prehliadačom Chrome sú tu niektoré zásadné rozdiely, ale princíp je aj tu rovnaký.

Do textového návodu

Podrobnosti obsahu

Optimalizujte svoje webové lokality pomocou vývojárskych nástrojov Chrome
Bezchybné webové stránky, ktoré sa načítajú superrýchlo a vyzerajú skvele na akejkoľvek veľkosti obrazovky! Aby ste to dosiahli, musíte analyzovať a optimalizovať kód svojich stránok. Na to sú ideálne nástroje Chrome Developer Tools. Pomocou nich môžete odhaliť chyby v kóde HTML, CSS a JavaScript. Môžete sa tiež podrobne pozrieť na výkon, postupnosť kódu a spotrebu pamäte. Získané poznatky využite na cielenú úpravu stránok a v konečnom dôsledku zvýšte viditeľnosť svojich stránok prostredníctvom ladenia a optimalizácie.
Naučte sa používať nástroje Chrome Developer Tools v tomto šesťhodinovom výučbovom programe, ktorý pripravil softvérový vývojár a školiteľ Stephan Haewß. Začnite so základmi nástrojov Chrome DevTools a prejdite až k pokročilým technikám - pre čistý a vysoko výkonný vzhľad vašich stránok!

HTML, CSS, JavaScript - ladenie pre čisté a rýchle webové stránky s optimalizovaným rozložením

Kurz sa začína úvodom do vývojárskych nástrojov Chrome, ktoré sú k dispozícii priamo v prehliadači. Dozviete sa, čo sú nástroje DevTools a ako ich môžete používať. Potom sa pozriete na kartu Prvky, ktorú môžete použiť na kontrolu a úpravu štýlov, rozloženia a vzhľadu svojich stránok. Na ladenie skriptov budete používať oblasti Sources a Console. Naučíte sa tiež používať nástroje Chrome Developer Tools na vykonávanie sieťovej analýzy a optimalizáciu výkonu a pamäte. Nakoniec získate prehľad o nástrojoch DevTools iných prehliadačov. Celkovo je teda kurz vhodný pre všetkých webových vývojárov, ktorí chcú ladiť a optimalizovať webové stránky pomocou nástrojov Chrome DevTools.

Efektívne používanie nástrojov Chrome DevTools - prehľad obsahu kurzu

Úvod do nástroja Chrome DevTools: Kurz vám ukáže, ako otvoriť nástroje DevTools, pohybovať sa v nich a efektívne používať najdôležitejšie funkcie na úpravu a ladenie HTML, CSS a JavaScript.
Ladenie HTML a CSS: Ako používať Chrome DevTools na preskúmanie stromu DOM webovej stránky, upravovať HTML a CSS priamo v živom režime na okamžité odstránenie problémov s rozložením a chýb v štýle CSS - ideálne na rýchle testovanie a prispôsobenie dizajnu pred vykonaním trvalých zmien.
Ladenie JavaScriptu: Naučte sa načítať súbory JavaScript, nastaviť body prerušenia a spustiť kód krok za krokom. Premenné a objekty môžete skúmať v reálnom čase, zatiaľ čo CallStack uľahčuje sledovanie volaní funkcií - ideálne na presné ladenie.
Používanie konzoly: Konzola vývojových nástrojov Chrome umožňuje otvárať a analyzovať protokoly, spúšťať kód JavaScript a priamo manipulovať s prvkami webovej stránky. Cielený výstup protokolov umožňuje dôkladne analyzovať a optimalizovať kód, čo výrazne uľahčuje ladenie a zvyšovanie výkonu.
Optimalizácia výkonu: Skontrolujte sieťové požiadavky a časy načítania, monitorujte využitie pamäte a identifikujte úniky pamäte. Cielená optimalizácia výkonu JavaScriptu a podrobné analýzy výkonu aplikácie môžu účinne zlepšiť rýchlosť načítania a správu zdrojov.
Pokročilé techniky: Panel aplikácieChrome DevTools umožňuje prístup k webovým úložiskám, ako sú LocalStorage, IndexedDB a Cache, ako aj správu pracovníkov služieb a manifestov. Na lepšie ladenie reaktívnych aplikácií je možné integrovať aj rozšírenia, ako napríklad React DevTools. Prispôsobiteľné nastavenia ponúkajú aj optimálne nastavenie nástrojov DevTools pre individuálne pracovné požiadavky.