Het kan lastig zijn om VS Code soepel te laten werken met het opstarten van de browser, vooral bij het debuggen of het live bekijken van je webapp vanuit de editor. Soms weigert de editor het browservenster te openen, hoe vaak je ook op ‘Uitvoeren’ of ‘Debuggen’ klikt. De oorzaak is niet altijd duidelijk – het kan een verkeerd geconfigureerde launch.json zijn, een sluipend extensieconflict of zelfs een vreemde machtigingsfout. Hier is een overzicht van een paar praktische trucs die je misschien wel even uit je hoofd kunnen helpen; het doel is om de browser te laten opstarten wanneer je weer op F5 drukt of op de debugknop klikt.
Verwacht dat deze oplossingen je zullen helpen om je lokale server of webbuild automatisch de browser te laten starten, wat erg handig is bij snelle tests. Dit zijn geen gegarandeerde oplossingen, maar in een handvol configuraties hebben ze geholpen om de blokkade op te lossen, vooral als VS Code koppig is met het openen van de juiste browser of helemaal niet wil starten. Als je vastloopt, probeer deze dan eens – soms is een kleine aanpassing in de instellingen al voldoende.
Hoe u browserstartproblemen in VS Code kunt oplossen
Oplossing 1 – VS Code uitvoeren zonder beheerdersrechten
Deze veroorzaakt nogal wat problemen. Als VS Code als admin draait, kan het problemen ondervinden bij het openen of koppelen aan je browser, vooral als je browser een standaardgebruiker of sandbox is. Normaal draaien (niet als admin) helpt dus om alles beter te synchroniseren — Windows is niet altijd even vriendelijk tegenover applicaties die in beide modi werken.
- Zoek naar Visual Studio Code in het startmenu. Klik met de rechtermuisknop en kies Bestandslocatie openen.
- Klik vervolgens met de rechtermuisknop op de VS Code-snelkoppeling en selecteer opnieuw Bestandslocatie openen om naar de daadwerkelijke installatiemap te gaan.
- Klik met de rechtermuisknop op Code.exe en klik op Eigenschappen.
- Ga naar het tabblad Compatibiliteit en haal het vinkje weg bij Dit programma als administrator uitvoeren. Want Windows moet het natuurlijk moeilijker maken dan nodig is.
- Klik op OK en start VS Code volledig opnieuw op. Probeer nu je build opnieuw te starten. Soms, in sommige configuraties, maakt dit echt een verschil.
Oplossing 2 – Controleer en pas launch.json aan voor een correcte browserconfiguratie
Dit lost een hoop problemen op. Het bestand launch.json vertelt VS Code hoe je browser moet worden gestart en welke parameters moeten worden doorgegeven. Als het verkeerd is geconfigureerd, opent VS Code mogelijk niets of helemaal niet. Controleer eerst of je het juiste ’type’ voor je doelbrowser gebruikt. Voor Edge gebruik je ‘msedge’ en voor Chrome ‘pwa-chrome’ of ‘pwa-msedge’ als je de PWA-versies target.
- Open uw projectmap in VS Code.
- Klik op het Debug- pictogram aan de zijkant en vervolgens op het ⚙️-pictogram om launch.json te openen. Als het daar niet staat, maak er dan een aan in de root of in de map.vscode.
- Zorg ervoor dat uw startconfiguratie er als volgt uitziet. Pas indien nodig het ’type’ aan:
{ "version": "0.2.0", "configurations": [ { "type": "msedge", // or "pwa-chrome" for Chrome "request": "launch", "name": "Launch my app", "url": "http://localhost:3000" } ] } // For Chrome "type": "pwa-chrome" // For Edge "type": "pwa-msedge" { "type": "msedge", // or "pwa-chrome" "request": "launch", "name": "Launch Edge", "url": "http://localhost:8080", "runtimeExecutable": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe" } Oplossing 3 – Zorg ervoor dat de VS-code up-to-date is
De standaard updatecontrole is niet alleen bedoeld voor beveiligingsbugs: Vscode-updates kunnen ook bugs oplossen die verband houden met debuggen en het starten van browsers. Als je VS Code een paar versies achterloopt, is het een goed idee om te updaten.
- Start VS Code en klik op Help > Controleren op updates.
- Het downloadt de nieuwste versie en vraagt je dan om opnieuw op te starten. Doe dat, herlaad je project en probeer het nog een keer. Soms lost een update de vreemdste problemen al op.
Oplossing 4 – Antivirus/Firewall tijdelijk uitschakelen
Let op: beveiligingssoftware kan voorkomen dat VS Code browsers start of debug-interfaces koppelt. Als het tijdelijk uitschakelen ervan geen probleem is, probeer het dan eens.
- Open Windows-beveiliging en ga naar Virus- en bedreigingsbeveiliging.
- Klik op Instellingen beheren.
- Schakel Realtimebeveiliging en gerelateerde functies zoals Cloudbeveiliging uit.
- Probeer uw web-app opnieuw te starten vanuit VS Code. Mogelijk wordt het browservenster dan wel opgestart.
Schakel de beveiliging uiteraard weer in na het testen. Laat het niet voor altijd uit.
Oplossing 5 – Gebruik de ingebouwde debugger van VS Code en overweeg externe hulpmiddelen
Het mooie van VS Code is de eigen debugger, die JS, Node en andere debugdoelen aankan zonder dat er externe browserplug-ins nodig zijn. Als je vermoedt dat de browserconfiguratie niet goed werkt, probeer dan te debuggen met de ingebouwde debugger in plaats van externe debuggers zoals Chrome Debugger (die trouwens nogal verouderd is).
Als u echt wilt debuggen in Chrome, kunt u Chrome DevTools ook rechtstreeks vanuit de browser starten of de debugger van VS Code koppelen aan een reeds actieve Chrome-instantie. Dat is echter een heel ander verhaal.
Oplossing 6 – VS Code opnieuw installeren
Als bovenstaande oplossingen niet werken, kan een schone herinstallatie soms de willekeurige storing in uw installatie verhelpen.
- Typ VS Code in het zoekvak, klik met de rechtermuisknop en kies Verwijderen.
- Download het nieuwste installatieprogramma van de officiële site.
- Herinstalleer, herlaad je project en kijk of de browser nu verschijnt. Het werkte voor mij op een paar machines — ik hoop dat het ook voor die van jou werkt.