Home-theater-designers
Chrome DevTools is een essentiële troef voor ontwikkelaars. Terwijl andere browsers behoorlijk handige tools voor probleemoplossing bieden, is Chrome DevTools uw aandacht waard vanwege de multifunctionele interface en populariteit.
Chrome is de populairste browser voor ontwikkelaars vanwege de krachtige reeks foutopsporingstools. Het gebruik van Chrome DevTools is eenvoudig, maar u moet begrijpen hoe het werkt om er het maximale uit te halen.
Hoe de Chrome Developer Tools werken
Met Chrome DevTools kunt u problemen op een website oplossen via de foutconsole en andere hulpprogramma's voor foutopsporing en controle. Het gebruik van DevTools legt mazen in de frontend bloot en laat u controleren hoe uw website wordt weergegeven op mobiele apparaten en tablets.
Met DevTools kunt u realtime bewerkingen uitvoeren op de code van een website, zoals JavaScript, HTML en CSS, en direct resultaat van uw wijzigingen krijgen.
De wijzigingen die u aanbrengt via de DevTools hebben geen blijvende invloed op de website. Ze geven slechts tijdelijk het verwachte resultaat weer alsof u ze op de daadwerkelijke broncode hebt toegepast. Hiermee kunt u manieren bedenken om uw website veel sneller te laten laden en het gemakkelijker maken om bugs op te lossen.
Toegang krijgen tot Chrome DevTools
U kunt op verschillende manieren toegang krijgen tot Chrome DevTools. Om de ontwikkelaarstools te openen met de snelkoppelingsmethode op Mac OS, drukt u op Cmd + Opt + I . Als u het Windows-besturingssysteem gebruikt, drukt u op de Ctrl + Shift + I toetsen op uw toetsenbord.
U kunt ook toegang krijgen tot de Chrome-ontwikkelaarstools door op de drie stippen in de rechterbovenhoek van het scherm te klikken. ga naar Meer hulpmiddelen en selecteer Ontwikkelaarstools . Een andere optie is om met de rechtermuisknop op de webpagina te klikken en op de Inspecteren optie.
De Chrome Developer Tools gebruiken voor websitediagnose
Chrome DevTools bieden verschillende manieren om een webpagina aan te passen en problemen op te lossen. Laten we eens kijken naar enkele manieren waarop DevTools u kan helpen.
Bekijk hoe uw website eruitziet op een smartphone
Zodra u uw Chrome-browser overschakelt naar de ontwikkelaarsmodus, wordt een halve versie van uw webpagina weergegeven. Dit geeft u echter geen echt beeld van hoe het eruit zou zien op een smartphone of tablet.
Gelukkig kun je met Chrome DevTools, naast het instellen van de schermgrootte van een webpagina, ook schakelen tussen verschillende mobiele schermtypen en versies.
Om toegang te krijgen tot die optie, schakelt u de Inspecteren modus. Klik vervolgens op de Snel reagerend drop-down in de linkerbovenhoek van de DevTools en selecteer uw favoriete mobiele apparaat. De webpagina wordt vervolgens gerenderd en aangepast aan de grootte van het mobiele apparaat dat u hebt geselecteerd.
hoe een kapotte koptelefoonaansluiting te verwijderen
Toegang tot de bronbestanden van een webpagina
U hebt toegang tot de bestanden waaruit een webpagina bestaat via Chrome DevTools. Om toegang te krijgen tot deze bestanden, klikt u op de bronnen optie in het bovenste gedeelte van het DevTools-menu. Dit onthult het bestandssysteem van de website en geeft je ook bewerking.
U kunt ook zoeken naar bronbestanden, wat handig kan zijn als u te maken heeft met een webpagina met veel bronnen. Om een bronbestand te zoeken via DevTools, klikt u op de Zoeken optie net boven de console.
Als u de . echter niet kunt vinden Zoeken optie, is een beter alternatief om sneltoetsen te gebruiken. Druk in Mac OS op de Cmd + Opt + F toetsen om naar een bronbestand te zoeken. Als u Windows OS gebruikt, drukt u op de Ctrl + Shift + F toets om toegang te krijgen tot de zoekbalk van het bronbestand.
Live bewerkingen uitvoeren op een webpagina
Een van de belangrijkste doelen van het gebruik van DevTools is het uitvoeren van een instant nep-editing van de elementen op een webpagina . Zodra u overschakelt naar de ontwikkelaarstools, kunt u de HTML-inhoud van een website bewerken door op de elementen optie. Klik vervolgens met de rechtermuisknop op een punt waarop u wijzigingen wilt toepassen in de code-editor en selecteer Bewerken als HTML .
Als u CSS-eigenschappen wilt bewerken die niet inline zijn, selecteert u bronnen . Selecteer vervolgens het CSS-bestand dat u wilt bewerken. Plaats uw cursor op de regel van uw keuze in de codeconsole om een live bewerking uit te voeren. Als u dit doet, krijgt u direct feedback over eventuele stijlwijzigingen die u op de webpagina toepast.
Houd er rekening mee dat wanneer u een pagina bewerkt via de DevTools, het opnieuw laden van de pagina in uw browser deze in zijn oorspronkelijke vorm terugzet en de bewerking alleen voor u zichtbaar is. Bewerken via DevTools heeft geen invloed op de goede werking of het gebruik van die website voor andere gebruikers.
Debug JavaScript-code met de DevTools-console
Een van de beste manieren om JavaScript te debuggen, is door de ontwikkelaarstools van Chrome te gebruiken. Het geeft je een direct rapport van ongeldige scripts en de exacte locatie van de bug.
Het is een goede gewoonte om DevTools altijd open te houden tijdens het ontwerpen van een website met JavaScript. Bijvoorbeeld, het uitvoeren van de console.log() opdracht van JavaScript op een reeks instructies geeft het resultaat van dat logboek weer in de DevTools-console als het programma succesvol wordt uitgevoerd.
Standaard rapporteert de console eventuele JavaScript-problemen op uw website. U kunt de console vinden in het onderste gedeelte van de DevTools of u kunt er toegang toe krijgen door te klikken op de Troosten optie bovenaan het Chrome DevTools-venster.
Bewaken van het laden van bronnen vanuit een database
Naast het debuggen van JavaScript, kan de console u ook een detail geven van bronnen die niet correct worden geladen vanuit de database van de website.
Hoewel dit niet altijd de beste manier is om backend-problemen te debuggen, vertelt het u nog steeds welke bronnen terugkeren 404 fout na het uitvoeren van een databasequery van die elementen.
Gerelateerd: Veelvoorkomende websitefouten en wat ze betekenen
De oriëntatie van Chrome Developer Tools wijzigen
Om de positie van de Chrome-ontwikkelaarstools te wijzigen, klikt u op de drie menupunten in de DevTools (niet de belangrijkste in de browser). Selecteer vervolgens uw voorkeurspositie uit de Dokzijde optie.
Chrome DevTools-extensies installeren
U kunt ook taal- of framework-specifieke extensies installeren die werken met Chrome DevTools. Door deze extensies te installeren, kunt u efficiënter fouten op uw webpagina opsporen.
U hebt toegang tot een lijst met beschikbare extensies voor Chrome DevTools in Chrome's Aanbevolen DevTools-extensies galerij.
Controleren op beveiligingsproblemen op een website
Met Chrome DevTools kunt u beoordelen hoe veilig uw website is, op basis van parameters zoals beschikbaarheid van webbeveiligingscertificaten en hoe veilig de verbinding is, onder andere. Om te controleren of uw website veilig is, klikt u op de Veiligheid optie bovenaan de DevTools.
De Veiligheid tabblad geeft u een overzicht van de beveiligingsdetails van uw website en vertelt u eventuele bedreigingen.
Controleer uw website
Chrome DevTools heeft een functie waarmee u de algehele prestaties van uw website kunt controleren op basis van specifieke parameters.
Om toegang te krijgen tot die functie, selecteert u de Vuurtoren optie bovenaan het DevTools-venster. Selecteer vervolgens de parameters die u wilt controleren en vink vervolgens ofwel de Mobiel of Bureaublad opties om te zien hoe uw webpagina presteert op verschillende platforms.
Klik vervolgens op Rapport genereren om een analyse van uw webpagina uit te voeren op basis van de parameters die u eerder hebt geselecteerd.
U kunt ook de runtime- of laadprestaties van een website beoordelen door op de Uitvoering optie. Om een test uit te voeren, klikt u op het pictogram naast de Klik op de opnameknop optie om een runtime-analyse uit te voeren. U kunt ook op de herlaadknop eronder klikken om de laadtijdprestaties te beoordelen. Klik op Stop om de analysator te stoppen en de resultaten weer te geven.
Profiteer van Chrome DevTools
Afhankelijk van waar je het voor nodig hebt, kun je met Chrome DevTools meer doen dan alleen eenvoudige foutopsporing voor websites. Gelukkig zijn DevTools gemakkelijk te gebruiken voor programmeurs van alle vaardigheidsniveaus. U kunt zelfs enkele basisprincipes van frontend-ontwikkeling van websites leren door de broncode op te zoeken van websites die u bezoekt.
hoe spookaanraking op iphone te repareren
Mogelijk ontdekt u ook enkele andere opties die we in dit artikel niet hebben besproken. Dus voel je vrij om te spelen met de beschikbare functies. Bovendien is het aanpassen van deze functies niet schadelijk voor een website.
Deel Deel Tweeten E-mail Chrome OS gebruiken op een Raspberry PiKunt u zich geen Chromebook veroorloven? Op zoek naar een alternatief voor Raspbian? Hier leest u hoe u een versie van Chrome OS op uw Raspberry Pi installeert.
Lees volgende Gerelateerde onderwerpen- internet
- Programmeren
- HTML
- Webontwikkeling
- JavaScript
- Google Chrome
Idowu is gepassioneerd door alles wat slimme technologie en productiviteit betreft. In zijn vrije tijd speelt hij met coderen en schakelt hij over naar het schaakbord als hij zich verveelt, maar hij vindt het ook heerlijk om af en toe uit de routine te stappen. Zijn passie om mensen de weg te wijzen in moderne technologie motiveert hem om meer te schrijven.
Meer van Idowu OmisolaAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren