Chrome Gereedschap voor ontwikkelaars (Zelfstudie)

Taal: Duits

Chrome Developer Tools effectief gebruiken (Tutorial)

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.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

details

Inhoud: 6 h Videotraining
Licentie: privé en commercieel Gebruiksrechten

Categorieën

Webdesign, CMS & Ontwikkeling

Met liefde gemaakt door:

Stephan Haewß

Inleiding tot de Chrome Developer Tools cursus

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.

Naar de teksthandleiding

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.

Naar de teksthandleiding

Gratis

Chrome Developer Tools: 1.3 | Eerste overzicht van de functionaliteiten

Inleiding tot de verschillende DevTools-panelen en hun basisfunctionaliteit.

Naar de teksthandleiding

Opmaak, lay-out, uiterlijk via tabblad Elementen

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.

Naar de teksthandleiding

Chrome Gereedschap voor ontwikkelaars: 2.2 | Stijl wijzigen

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

Naar de teksthandleiding

Chrome Gereedschap voor ontwikkelaars: 2.3 | HTML, DOM bewerken

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

Naar de teksthandleiding

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

Verschillende apparaatformaten simuleren en de aanpasbaarheid van de website controleren.

Naar de teksthandleiding

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

Correctie van een fout in een zijmenu.

Naar de teksthandleiding

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

Oplossing voor layoutproblemen en overloopfouten.

Naar de teksthandleiding

Script debuggen via broncode en console

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.

Naar de teksthandleiding

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

Debuggen van TypeScript-code met de DevTools.

Naar de teksthandleiding

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.

Naar de teksthandleiding

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

Specifieke debuggingtechnieken voor React-toepassingen.

Naar de teksthandleiding

Chrome Ontwikkelaarshulpprogramma's: 3.5 | Voorwaardelijke onderbrekingspunten

Instellen van onderbrekingspunten die alleen onder bepaalde omstandigheden worden geactiveerd.

Naar de teksthandleiding

Chrome hulpprogramma voor ontwikkelaars: 3.6 | DOM-breekpunten

Bewaking van wijzigingen in bepaalde DOM-elementen.

Naar de teksthandleiding

Chrome Gereedschap voor ontwikkelaars: 3.7 | Breakpoints ophalen

De code stoppen voor netwerkverzoeken.

Naar de teksthandleiding

Chrome Ontwikkelaarshulpprogramma's: 3.8 | Uitzonderingsonderbrekingspunten

Automatische stop bij fouten.

Naar de teksthandleiding

Chrome-Hulpmiddelen voor ontwikkelaars: 3.9 | Overschrijven en werkruimte

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

Naar de teksthandleiding

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

Gedetailleerde controle over het debuggen.

Naar de teksthandleiding

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

Inleiding tot de console en de basisfuncties.

Naar de teksthandleiding

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

De DOM direct via de console manipuleren.

Naar de teksthandleiding

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

Herbruikbare stukjes code en prestatiemetingen.

Naar de teksthandleiding

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

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

Naar de teksthandleiding

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

Enkele niet vaak gebruikte, maar toch nuttige consolefuncties.

Naar de teksthandleiding

Netwerkanalyse en -optimalisatie

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

Netwerkverzoeken en -reacties analyseren.

Naar de teksthandleiding

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

Langzame netwerkverbindingen simuleren en HTTP-headers analyseren.

Naar de teksthandleiding

Prestaties en geheugenoptimalisatie

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

Identificatie van prestatieproblemen in JavaScript-code.

Naar de teksthandleiding

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

Geheugenverbruik analyseren en geheugenlekken identificeren.

Naar de teksthandleiding

Tabblad Toepassingen en andere hulpmiddelen

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

Meer hulpmiddelen voor prestatieoptimalisatie.

Naar de teksthandleiding

Chrome hulpprogramma voor ontwikkelaars: 6.2 | Animaties weergeven en aanpassen

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.

Naar de teksthandleiding

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.

Naar de teksthandleiding

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.

Naar de teksthandleiding

Instellingen

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.

Naar de teksthandleiding

DevTools van andere browsers

Ontwikkelaarstools voor Chrome: 8.1 | De MS Edge DevTools

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

Naar de teksthandleiding

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

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

Naar de teksthandleiding

Ontwikkelaarstools voor Chrome: 8.3 | De Safari-ontwikkelaarstools

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

Naar de teksthandleiding

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.