In deze handleiding leer je hoe je Chrome Developer Tools kunt gebruiken om stijlen en scripts aan te passen zonder wijzigingen aan de originele code aan te brengen. Er wordt getoond hoe je met behulp van Overrides en de Workspace van Chrome uitgebreide tests en aanpassingen aan je website kunt uitvoeren zonder de originele serverbestanden aan te raken.
Belangrijkste inzichten
- Met Overrides kun je bestanden lokaal overschrijven om tests en aanpassingen uit te voeren.
- De Workspace stelt je in staat om je lokale ontwikkelmap te koppelen aan de Chrome Developer Tools om directe wijzigingen door te voeren.
- Deze beide functies zijn uiterst nuttig om problemen in de productieomgeving te debuggen zonder de originele servercode te beïnvloeden.
Stapsgewijze handleiding
Om de Developer Tools van Chrome effectief te gebruiken, volg deze stappen:
1. Gebruik van Overrides
Laten we eerst de Overrides-functie van Chrome gebruiken. Zoek een JavaScript-bestand, bijvoorbeeld main.js, dat door de server wordt geladen.
Klik met de rechtermuisknop op het bestand en kies in het contextmenu "Inhoud overschrijven".
Er verschijnt een dialoogvenster waarin je de locatie voor het lokale bestand kunt selecteren. Zorg ervoor dat je al een map hebt gemaakt waarin je je overschrijvingsbestanden wilt plaatsen.
Selecteer de gewenste map en klik op "Map selecteren". Hierdoor wordt de verbinding tussen het originele bestand en je lokale bestand tot stand gebracht.
Geef de browser nu toegang tot deze map. Klik opnieuw op het Overrides-menu en zorg ervoor dat de toestemming voor toegang tot de beoogde map is ingeschakeld.
2. Aanmaken van een lokaal bestand
Je kunt nu een nieuw bestand in de Overrides-map maken. Open het bestand en schrijf bijvoorbeeld een eenvoudig alert()-script.
Je kunt de inhoud aanpassen naar jouw behoeften. Sla het bestand op en vernieuw de pagina om te zien dat nu het waarschuwingsvenster verschijnt in plaats van het bestand dat oorspronkelijk door de server werd geladen.
3. Controleren van netwerkactiviteit
Om ervoor te zorgen dat het bestand niet meer van de server wordt geladen, open je het tabblad Netwerk in de Developer Tools. Je zou moeten zien dat het main.js-bestand nu niet meer van de server wordt opgehaald, maar in plaats daarvan de lokaal overschreven inhoud.
Als je meer Overrides wilt toevoegen of bestaande wilt verwijderen, ga dan naar het Overrides-gebied waar je een overzicht krijgt van alle geactiveerde Overrides.
4. Werken met de Workspace
Als volgende stap willen we de Workspace instellen. Hier kun je je lokale ontwikkelmap verbinden met de Developer Tools. Ga naar de instellingen van de Developer Tools en zoek naar de optie "Workspace".
Selecteer de map waar je projecten zich bevinden. Chrome heeft ook hier toestemming nodig om toegang te krijgen tot deze map, dus zorg ervoor dat je de juiste machtigingen hebt verleend.
5. Aanpassingen aan de code
Je kunt nu direct in de Workspace werken. Open bijvoorbeeld je main.js-bestand, maak wijzigingen en sla het bestand op. De code wordt dan automatisch opnieuw geladen vanaf de server, zodat je onmiddellijk kunt zien hoe de aanpassing van invloed is op je website.
6. Debuggen in de Workspace
Een praktisch voordeel van de Workspace is dat je breakpoints kunt instellen om je code efficiënt te debuggen. Stel breakpoints in op de regels van je code en vernieuw de pagina om de uitvoering te onderbreken en de huidige status van de variabelen te controleren.
7. Voor- en nadelen
Hoewel de Workspace handig is, raden veel ontwikkelaars aan om wijzigingen rechtstreeks aan te brengen in een code-editor zoals Visual Studio Code en de bestanden daar op te slaan. Dit zorgt ervoor dat je beter kunt zien welke versie van bestanden wordt gebruikt. Bij gebruik van de Workspace kan het verwarrend worden, vooral als de koppeling naar de originele bestanden niet duidelijk is.
Toch, als je alleen eenvoudige CSS-bestanden of niet-getranspileerde code bewerkt, kan de Workspace een goede optie zijn.
Samenvatting
In deze handleiding heb je geleerd hoe je met de Overrides en de Workspace in Chrome Developer Tools kunt werken om stijlen en scripts aan te passen zonder het originele serverbestand aan te raken. Met Overrides kun je snel wijzigingen aanbrengen, terwijl de Workspace je in staat stelt om rechtstreeks met je ontwikkelmap te werken.
Veelgestelde vragen
Kan ik Overrides ook voor CSS-bestanden gebruiken?Ja, je kunt Overrides ook voor CSS-bestanden gebruiken. Selecteer eenvoudig het gewenste CSS-bestand en schakel de Override in.
Hoe schakel ik de Overrides uit?Je kunt Overrides uitschakelen door in de Developer Tools naar de Overrides te gaan en ze daar uit te zetten of te verwijderen.
Zijn er beperkingen voor de Workspace?Ja, soms kan het problematisch zijn om de juiste Workspace te identificeren, vooral bij getranspileerde code.
Waarom zou ik Overrides gebruiken in plaats van de Workspace?Overrides bieden een duidelijkere manier om wijzigingen aan te brengen zonder in de war te raken met verschillende versies van de bestanden. Ze zijn vaak gemakkelijker te beheren als je de originele bestanden niet direct wilt aanpassen.
