Met de Chrome DevTools kunnen we direct de effecten zien van de aanpassingen in de code
Chrome DevTools is een set tools voor het maken en debuggen van websites die zijn ingebouwd in Google Chrome. Natuurlijk kunnen we ze ook gebruiken in zijn open source-versie; Chroom.
Het is mogelijk om toegang te krijgen tot de Chrome-tools voor ontwikkelaars door op de toetsencombinatie Ctrl + Shift + I te drukken, ook door over een element te bewegen en met de rechtermuisknop op Inspecteren te klikken.
Componenten
Wanneer we Chrome DevTools openen, zien we dat u verschijntn paneel aan de rechterkant van de pagina die we doorbladeren Dit paneel van zijn kant eHet is onderverdeeld in tabbladen die overeenkomen met elk van de tools De tools zijn op hun beurt onderverdeeld in secties.
De secties zijn:
- Elementen: toont de verschillende componenten van de pagina.
- Console: stelt u in staat diagnostiek uit te voeren tijdens de ontwikkeling of interactie met de Javascript-code zoals u zou doen met de Linux-terminal.
- Bronnen: maakt het gemakkelijk om Javascript-code te debuggen en te werken met lokale bestanden.
- Netwerk: helpt de paginaprestaties te controleren en te verbeteren.
- Tijdlijn: maakt het mogelijk om de verschillende gebeurtenissen die plaatsvinden tijdens het bezoek aan een site op te nemen en te verkennen.
- Toepassing: onderzoekt alle bronnen die zijn geladen; onder andere IndexedDB of Web SQL-databases, lokale opslag en sessieopslag, cookies, app-cache, afbeeldingen, lettertypen en style sheets.
- Beveiliging: detecteert beveiligingsproblemen in de code.
Laten we eens kijken waarvoor we Chrome DevTools kunnen gebruiken
Herstel wat niet werkt
Het is elke ontwikkelaar overkomen. Schrijf de code, controleer of er geen fouten zijn, en toch werkt de pagina op het moment van de waarheid niet zoals het hoort. De console-tool laat zien welke fout optreedt tijdens de uitvoering.
Verlaag de laadtijd
Als het laden van een pagina lang duurt, wordt de gebruiker moe en gaat hij naar een andere site. Gelukkig is het tijdperk van Flash-websites en hun geanimeerde intro's voorbij. Hoe dan ook, het tabblad Netwerken van de Chrome DevTools maakt het gemakkelijker om erachter te komen welke elementen de belasting vertragen. We kunnen de test herhalen voor verschillende verbindingssnelheden.
Wijzig de code
Op het tabblad Elementen kunnen we zie de elementen van een pagina, de gerelateerde html-code en de css-eigenschappen. We kunnen ze ook wijzigen.
We kunnen de tekst van een pagina bewerken met het commando
document.designMode = 'on';
Probeer verschillende schermformaten
Tablets, smartphones, smart-tv's, desktopcomputers. De lijst met apparaten waarmee we op internet surfen, groeit. Met Chrome DevTools kunnen we test of een pagina er goed uitziet bij verschillende formaten.
Benchmarking
In Management betekent de term benchmarking leren van de best practices van degenen die hetzelfde doen als wij. Met Chrome DevTolls kunnen we dat als we het ontwerp van een website leuk vinden bekijk de html-code en css-stylesheets en kopieer ze naar onze site.
Chrome DevTools downloaden
Chrome DevTools is beschikbaar in de browsers Google Chrome en Chromium. Chromium bevindt zich in de opslagplaatsen van de belangrijkste distributies. Het kan ook vanuit winkels worden geïnstalleerd Snappen Wat betreft Google Chrome kan dat kom hier. in DEB- en RPM-indeling