Taal: Duits

Chrome Developer Tools effectief gebruiken (Tutorial)

Webdesign, CMS & Ontwikkeling 36 Videos · 6.5 h Videotraining · Nederlands

by Stephan Haewß

Met de Chrome Developer Tools kunt u uw websites analyseren en bewerken, prestatieanalyses uitvoeren en uw pagina's testen voor verschillende apparaten en schermformaten. Leer de belangrijkste functies van de DevTools kennen in deze tutorial. Hoe u fouten in HTML, CSS en JavaScript kunt opsporen, manieren kunt vinden om de prestaties en het geheugengebruik te optimaliseren en de lay-out van uw pagina's kunt verbeteren - trainer Stephan Haewß laat u aan de hand van praktische voorbeelden zien hoe u te werk moet gaan!

Leer de belangrijkste functies van de Chrome Developer Tools kennen
Debuggen en optimaliseren van HTML-, CSS- en JavaScript-code
Codesequenties begrijpen, fouten opsporen en herstellen
CSS-animaties, styling en lay-outs aanpassen
Verbeter de prestaties en het geheugengebruik van websites
Voor foutloze en snelle websites met geoptimaliseerde lay-outs - een zes uur durende cursus door trainer Stephan Haewß

Schone code draagt aanzienlijk bij aan de zichtbaarheid van uw website. Leer nu hoe u Chrome DevTools kunt gebruiken om uw pagina's te analyseren en te optimaliseren.

Inhoud

36 Videos, 388 Minuten

Inleiding tot de cursus over de Chrome Developer Tools

3 Videos · 26 Minuten

01 Open Gratis

Chrome Developer Tools: 1.1 | Wat leert u in deze cursus?

Hier volgt een overzicht van alle onderwerpen die in deze cursus aan bod komen.

39 MB

02 Open Gratis

Chrome Tools voor ontwikkelaars: 1.2 | Test-webapp maken

De eerste webapp wordt gemaakt, waarin de eerste stappen in het gebruik van de ontwikkeltools worden uitgelegd.

36 MB

03 Open Gratis

Chrome Developer Tools: 1.3 | Eerste overzicht van de functionaliteiten

Inleiding tot de verschillende DevTools-panelen en hun basisfunctionaliteit.

49 MB

Chrome Developer Tools: 1.1 | Wat leert u in deze cursus?

5 min Open

39 MB

Chrome Tools voor ontwikkelaars: 1.2 | Test-webapp maken

5 min Open

36 MB

Chrome Developer Tools: 1.3 | Eerste overzicht van de functionaliteiten

16 min Open

49 MB

Styling, Lay-out, uiterlijk via het Elements-tabblad

6 Videos · 59 Minuten

04 Open

Chrome Ontwikkelaarsgereedschappen: 2.1 | DOM-structuur inspecteren op het tabblad Elementen

Gedetailleerde blik op de HTML-structuur van een webpagina en hoe je elementen op het tabblad Elementenselecteert en bewerkt.

45 MB

05 Open

Chrome Gereedschap voor ontwikkelaars: 2.2 | Stijl wijzigen

Live bewerken van CSS-stijlen en onderzoeken van de invloed op de presentatie van de website.

51 MB

06 Open

Chrome Gereedschap voor ontwikkelaars: 2.3 | HTML, DOM bewerken

De HTML-structuur wijzigen en de effecten op het DOM bekijken.

27 MB

07 Open

Chrome-Hulpmiddelen voor ontwikkelaars: 2.4 | Mobiele weergave - Responsief ontwerp testen

Verschillende apparaatformaten simuleren en de aanpasbaarheid van de website controleren.

28 MB

08 Open

Chrome-Hulpmiddelen voor ontwikkelaars: 2.5 | Praktische oefening: Het menu aan de zijkant repareren

Correctie van een fout in een zijmenu.

26 MB

09 Open

Chrome-Hulpmiddelen voor ontwikkelaars: 2.6 | Praktische oefening: Lay-out/overloop herstellen

Oplossing voor layoutproblemen en overloopfouten.

23 MB

Chrome Ontwikkelaarsgereedschappen: 2.1 | DOM-structuur inspecteren op het tabblad Elementen

10 min Open

45 MB

Chrome Gereedschap voor ontwikkelaars: 2.2 | Stijl wijzigen

15 min Open

51 MB

Chrome Gereedschap voor ontwikkelaars: 2.3 | HTML, DOM bewerken

8 min Open

27 MB

Chrome-Hulpmiddelen voor ontwikkelaars: 2.4 | Mobiele weergave - Responsief ontwerp testen

9 min Open

28 MB

Chrome-Hulpmiddelen voor ontwikkelaars: 2.5 | Praktische oefening: Het menu aan de zijkant repareren

9 min Open

26 MB

Chrome-Hulpmiddelen voor ontwikkelaars: 2.6 | Praktische oefening: Lay-out/overloop herstellen

8 min Open

23 MB

Script-Debugging via Sources en Console

15 Videos · 142 Minuten

10 Open

Chrome Developer Tools: 3.1 | Inleiding: Script debuggen en het eerste breakpoint instellen

Inleiding tot het debuggen van JavaScript-code en het instellen van breakpoints.

38 MB

11 Open

Chrome Developer Tools: 3.2 | Praktische oefening: Een TypeScript-app debuggen

Debuggen van TypeScript-code met de DevTools.

27 MB

12 Open

Chrome Developer Tools: 3.3 | Praktische oefening: Debuggen - Fouten vinden bij het verwijderen uit een matrix

Een fout vinden en herstellen bij het verwijderen van elementen uit een array.

31 MB

13 Open

Chrome Developer Tools: 3.4 | Praktische oefening: Debuggen van de React-app

Specifieke debuggingtechnieken voor React-toepassingen.

84 MB

14 Open

Chrome Ontwikkelaarshulpprogramma's: 3.5 | Voorwaardelijke onderbrekingspunten

Instellen van onderbrekingspunten die alleen onder bepaalde omstandigheden worden geactiveerd.

26 MB

15 Open

Chrome hulpprogramma voor ontwikkelaars: 3.6 | DOM-breekpunten

Bewaking van wijzigingen in bepaalde DOM-elementen.

58 MB

16 Open

Chrome Gereedschap voor ontwikkelaars: 3.7 | Breakpoints ophalen

De code stoppen voor netwerkverzoeken.

40 MB

17 Open

Chrome Ontwikkelaarshulpprogramma's: 3.8 | Uitzonderingsonderbrekingspunten

Automatische stop bij fouten.

63 MB

18 Open

Chrome-Hulpmiddelen voor ontwikkelaars: 3.9 | Overschrijven en werkruimte

Aanpassen van stijlen en scripts zonder de oorspronkelijke code te wijzigen.

90 MB

19 Open

Chrome Developer Tools: 3.10 | Debuggen in stappen en op specifieke punten

Gedetailleerde controle over het debuggen.

31 MB

20 Open

Chrome Ontwikkelaarshulpprogramma's: 3.11 | Console: Overzicht, eenvoudige code-uitvoering en uitvoer

Inleiding tot de console en de basisfuncties.

34 MB

21 Open

Chrome Developer Tools: 3.12 | Toegang tot DOM-elementen in de console

De DOM direct via de console manipuleren.

92 MB

22 Open

Chrome-Hulpmiddelen voor ontwikkelaars: 3.13 | Snippets en timing in de console

Herbruikbare stukjes code en prestatiemetingen.

40 MB

23 Open

Chrome-Hulpmiddelen voor ontwikkelaars: 3.14 | Logboekuitvoer groeperen en vormgeven

De kleur en het lettertype van de loguitvoer kunnen worden gewijzigd en gegroepeerd.

69 MB

24 Open

Chrome Ontwikkelaarshulpprogramma's: 3.15 | Meer handige console-methoden

Enkele niet vaak gebruikte, maar toch nuttige consolefuncties.

69 MB

Chrome Developer Tools: 3.1 | Inleiding: Script debuggen en het eerste breakpoint instellen

14 min Open

38 MB

Chrome Developer Tools: 3.2 | Praktische oefening: Een TypeScript-app debuggen

10 min Open

27 MB

Chrome Developer Tools: 3.3 | Praktische oefening: Debuggen - Fouten vinden bij het verwijderen uit een matrix

11 min Open

31 MB

Chrome Developer Tools: 3.4 | Praktische oefening: Debuggen van de React-app

18 min Open

84 MB

Chrome Ontwikkelaarshulpprogramma's: 3.5 | Voorwaardelijke onderbrekingspunten

5 min Open

26 MB

Chrome hulpprogramma voor ontwikkelaars: 3.6 | DOM-breekpunten

6 min Open

58 MB

Chrome Gereedschap voor ontwikkelaars: 3.7 | Breakpoints ophalen

3 min Open

40 MB

Chrome Ontwikkelaarshulpprogramma's: 3.8 | Uitzonderingsonderbrekingspunten

7 min Open

63 MB

Chrome-Hulpmiddelen voor ontwikkelaars: 3.9 | Overschrijven en werkruimte

7 min Open

90 MB

Chrome Developer Tools: 3.10 | Debuggen in stappen en op specifieke punten

11 min Open

31 MB

Chrome Ontwikkelaarshulpprogramma's: 3.11 | Console: Overzicht, eenvoudige code-uitvoering en uitvoer

12 min Open

34 MB

Chrome Developer Tools: 3.12 | Toegang tot DOM-elementen in de console

7 min Open

92 MB

Chrome-Hulpmiddelen voor ontwikkelaars: 3.13 | Snippets en timing in de console

16 min Open

40 MB

Chrome-Hulpmiddelen voor ontwikkelaars: 3.14 | Logboekuitvoer groeperen en vormgeven

9 min Open

69 MB

Chrome Ontwikkelaarshulpprogramma's: 3.15 | Meer handige console-methoden

6 min Open

69 MB

Netwerk-analyse en -optimalisatie

2 Videos · 21 Minuten

25 Open

Chrome Developer Tools: 4.1 | Netwerk: Overzicht van de functies

Netwerkverzoeken en -reacties analyseren.

40 MB

26 Open

Hulpmiddelen voor Chrome-ontwikkelaars: 4.2 | Netwerk: Throttling, Headers en Preview

Langzame netwerkverbindingen simuleren en HTTP-headers analyseren.

24 MB

Chrome Developer Tools: 4.1 | Netwerk: Overzicht van de functies

13 min Open

40 MB

Hulpmiddelen voor Chrome-ontwikkelaars: 4.2 | Netwerk: Throttling, Headers en Preview

8 min Open

24 MB

Prestatie- en geheugoptimalisatie

2 Videos · 43 Minuten

27 Open

Chrome-Hulpmiddelen voor ontwikkelaars: 5.1 | Profiler - Prestaties evalueren en optimaliseren

Identificatie van prestatieproblemen in JavaScript-code.

72 MB

28 Open

Chrome Ontwikkelaarshulpprogramma's: 5.2 | Geheugengebruik optimaliseren met de Geheugenprofiler

Geheugenverbruik analyseren en geheugenlekken identificeren.

70 MB

Chrome-Hulpmiddelen voor ontwikkelaars: 5.1 | Profiler - Prestaties evalueren en optimaliseren

21 min Open

72 MB

Chrome Ontwikkelaarshulpprogramma's: 5.2 | Geheugengebruik optimaliseren met de Geheugenprofiler

22 min Open

70 MB

Application-tab en andere tools

4 Videos · 47 Minuten

29 Open

Chrome Ontwikkelaarshulpprogramma's: 6.1 | Nuttige helpers en rendering-tabblad

Meer hulpmiddelen voor prestatieoptimalisatie.

73 MB

30 Open

Chrome hulpprogramma voor ontwikkelaars: 6.2 | Animaties bekijken en aanpassen

Gedetailleerde analyse van CSS-animaties en overgangen. Optimalisatie van de prestaties door timingfuncties en -eigenschappen aan te passen.

72 MB

31 Open

Chrome Developer Tools: 6.3 | Verken bronnen van webapps met het tabblad Toepassingen

Analyseren van de opgeslagen gegevens van een webapp zoals Local Storage, Session Storage en IndexedDB. Optimalisatie van opslagbeheer.

43 MB

32 Open

Chrome Ontwikkelaarstools: 6.4 | Gebruik extensie React Dev Tools

Inleiding tot de React DevTools browser add-on. Inspectie van de React componentstructuur, props en state.

30 MB

Chrome Ontwikkelaarshulpprogramma's: 6.1 | Nuttige helpers en rendering-tabblad

19 min Open

73 MB

Chrome hulpprogramma voor ontwikkelaars: 6.2 | Animaties bekijken en aanpassen

4 min Open

72 MB

Chrome Developer Tools: 6.3 | Verken bronnen van webapps met het tabblad Toepassingen

15 min Open

43 MB

Chrome Ontwikkelaarstools: 6.4 | Gebruik extensie React Dev Tools

9 min Open

30 MB

Instellingen

1 Videos · 28 Minuten

33 Open

Chrome hulpprogramma voor ontwikkelaars: 7 | De belangrijkste instellingen voor Chrome hulpprogramma's voor ontwikkelaars

Configuratie van DevTools voor een efficiëntere manier van werken. Aanpassen van thema's, sneltoetsen en andere instellingen.

106 MB

Chrome hulpprogramma voor ontwikkelaars: 7 | De belangrijkste instellingen voor Chrome hulpprogramma's voor ontwikkelaars

28 min Open

106 MB

DevTools andere browsers

3 Videos · 24 Minuten

34 Open

Ontwikkelaarstools voor Chrome: 8.1 | De MS Edge DevTools

Lijkt erg op de ontwikkeltools voor Chrome, maar er zijn verschillen in details.

47 MB

35 Open

Ontwikkelaarshulpprogramma's voor Chrome: 8.2 | De Firefox-ontwikkelaarshulpprogramma's

Er zijn merkbare verschillen, maar in principe lijken ze erg op elkaar.

27 MB

36 Open

Ontwikkelaarstools voor Chrome: 8.3 | De Safari-ontwikkelaarstools

Er zijn enkele grote verschillen met Chrome, maar het principe is ook hier hetzelfde.

32 MB

Ontwikkelaarstools voor Chrome: 8.1 | De MS Edge DevTools

4 min Open

47 MB

Ontwikkelaarshulpprogramma's voor Chrome: 8.2 | De Firefox-ontwikkelaarshulpprogramma's

9 min Open

27 MB

Ontwikkelaarstools voor Chrome: 8.3 | De Safari-ontwikkelaarstools

11 min Open

32 MB

Details over de inhoud

Optimaliseer uw websites met de Chrome Developer Tools
Een foutloze website die supersnel laadt en er geweldig uitziet op elk schermformaat! Om dit te bereiken, moet u de code van uw pagina's analyseren en optimaliseren. De Chrome Developer Tools zijn hier perfect voor. U kunt ze gebruiken om fouten in uw HTML-, CSS- en JavaScript-code op te sporen. U kunt ook een gedetailleerde blik werpen op prestaties, codevolgorde en geheugengebruik. Gebruik de bevindingen om uw pagina's gericht te bewerken en uiteindelijk de zichtbaarheid van uw pagina's te vergroten door middel van debugging en optimalisatie.
Leer hoe u de Chrome Developer Tools gebruikt in deze zes uur durende tutorial van softwareontwikkelaar en trainer Stephan Haewß. Begin met de basisbeginselen van Chrome DevTools en ga helemaal door naar geavanceerde technieken - voor een schone, goed presterende weergave van uw pagina's!

HTML, CSS, JavaScript - Debuggen voor schone, snelle websites met geoptimaliseerde lay-outs

De cursus begint met een introductie in de Chrome Developer Tools , die direct beschikbaar zijn in de browser. U leert wat de DevTools zijn en hoe u ze kunt gebruiken. Vervolgens bekijkt u het tabblad Elementen, waarmee u de styling, lay-out en het uiterlijk van uw pagina's kunt inspecteren en bewerken. Je zult de gebieden Bronnen en Console gebruiken om scripts te debuggen. U leert ook hoe u de Chrome Developer Tools kunt gebruiken om een netwerkanalyse uit te voeren en de prestaties en het geheugen te optimaliseren. Tot slot krijgt u een overzicht van de DevTools van andere browsers. Al met al is de cursus dus geschikt voor alle webontwikkelaars die websites willen debuggen en optimaliseren met Chrome DevTools.

Chrome DevTools effectief gebruiken - de inhoud van de cursus in één oogopslag

Inleiding tot de Chrome DevTools: De cursus laat zien hoe u DevTools opent, er doorheen navigeert en de belangrijkste functies voor het bewerken en debuggen van HTML, CSS en JavaScript efficiënt gebruikt.
Debuggen van HTML en CSS: Hoe u Chrome DevTools gebruikt om de DOM-structuur van een webpagina te onderzoeken, HTML en CSS rechtstreeks in live-modus te bewerken om opmaakproblemen en CSS-stylingsfouten onmiddellijk te verhelpen - ideaal om het ontwerp snel te testen en aan te passen voordat u wijzigingen permanent maakt.
JavaScript debuggen: Leer hoe u JavaScript-bestanden laadt, breekpunten instelt en de code stap voor stap uitvoert. Variabelen en objecten kunnen in realtime worden onderzocht, terwijl de CallStack het eenvoudig maakt om functieaanroepen te traceren - ideaal voor nauwkeurig debuggen.
De console gebruiken: Met de console van Chrome Development Tools kunt u logboeken openen en analyseren, JavaScript-code uitvoeren en webpagina-elementen direct manipuleren. Met gerichte loguitvoer kunt u de code grondig analyseren en optimaliseren, wat debuggen en prestatieverbetering veel gemakkelijker maakt.
Prestaties optimaliseren: Controleer netwerkverzoeken en laadtijden, controleer het geheugengebruik en identificeer geheugenlekken. Met gerichte optimalisatie van JavaScript-prestaties en gedetailleerde analyses van de applicatieprestaties kun je de laadsnelheid en het resourcebeheer efficiënt verbeteren.
Geavanceerde technieken: Met het Chrome DevTools-toepassingspaneelhebt u toegang tot webopslag zoals LocalStorage, IndexedDB en Cache, en kunt u service workers en manifesten beheren. Extensies, zoals React DevTools, kunnen ook worden geïntegreerd voor een betere debugging van reactieve applicaties. Aanpasbare instellingen bieden ook een optimale instelling van de DevTools voor individuele werkvereisten.

Opmerking

Licentie: privé en commercieel Gebruiksrechten

Met liefde gemaakt door

Stephan Haewß

Over Stephan Haewß: Als M.Sc. in Computerwetenschappen werk ik al meer dan 20 jaar als softwareontwikkelaar bij diverse bedrijven en momenteel ben ik hoofd productontwikkeling bij een softwarebedrijf. Daarnaast heb ik enkele boeken geschreven over onderwerpen als muziekproductie en programmeren. De laatste tijd heb ik mij voornamelijk gericht op webontwikkeling met JavaScript. Over het algemeen ben ik ook bedreven in andere programmeertalen zoals Java, C# en Lua en heb ik ook interesse in game-ontwikkeling en visuele programmering.

Products