Usar Live Reload amb Edge: guia completa amb VS Code

Si desenvolupes per a la web és probable que vulguis veure els canvis a l'instant al navegador sense estar prement F5. Amb Microsoft Edge pots activar recàrrega en viu de diverses maneres, ja sigui amb extensions de VS Code com Live Server o amb la nova Live Preview, i fins i tot recolzant-te en fluxos de treball de hot reload d'altres entorns quan sigui procedent.

En aquesta guia pràctica veureu com activar Live Reload amb Edge des del Visual Studio Code, diferències entre Live Server i Live Preview, com depurar amb Edge DevTools des de VS Code i en quins casos la recàrrega instantània no aplica (per exemple, limitacions típiques del hot reload o quan el teu projecte ja aixeca el seu propi servidor).

Què signifiquen Live Reload, Hot Reload i Hot Restart

Live Reload a web és l'actualització automàtica del navegador quan canvies un fitxer. L'editor detecta la modificació i refresca la pàgina (o injecta estils) sense que ho hagis de fer tu. És ideal per a HTML/CSS/JS estàtic o projectes senzills sense build avançat.

Hot reload (com a Flutter) va un pas més enllà: injecta codi actualitzat en una aplicació en execució, mantenint l'estat sempre que es pugui. En entorns com Flutter funciona sobre la màquina virtual de Dart: en desar, s'actualitzen classes i es reconstrueix l'arbre de ginys sense reiniciar completament l'app. Això és útil per experimentar ràpid amb interfícies, afegir funcions i corregir errors sense perdre el punt en què hi ha l'app.

Hot restart reinicieu l'aplicació des del principi, aplicant els canvis que no pot injectar el hot reload (per exemple, inicialitzadors estàtics). A Flutter, només pots fer hot reload o hot restart en mode debug; si executes des terminal, La comanda flutter run accepta la tecla r per a hot reload. Aquest enfocament conserva l'estat quan és possible, però n'hi ha casos especials en què no veuràs canvis fins a reiniciar.

Limitacions típiques del hot reload: no es reexecuten main() ni initState(); canvis en tipus genèrics, convertir enums a classes (o viceversa), o modificadors d'inicialitzadors estàtics no es reflectiran fins a un hot restart. Els camps estàtics i variables globals es consideren estat i no es reavaluaran en recarregar. En editar alguna cosa que trenca la compilació, es mostrarà l'error a la consola i hauràs de corregir abans de seguir. Són patrons conceptualment similars al que passa quan un servidor web intenta injectar canvis: no tot es pot recalcular en calent.

En el desenvolupament web amb Edge aquests conceptes us ajuden a entendre per què, de vegades, un canvi no apareix després d'una recàrrega automàtica: si el que has tocat no es torna a executar durant el cicle de reconstrucció de la pàgina, pot ser que hagis de forçar un reinici del servidor o un hard refresh del navegador.

Live Server a VS Code: recàrrega ràpida per a HTML i estàtics

Live Server és la clàssica extensió de VS Code que aixeca un servidor local amb recàrrega del navegador. Funciona de meravella per a pàgines estàtiques i també pot servir de pont per a vistes dinàmiques senzilles si uses la seva extensió web complementària.

Dreceres per arrencar/aturar el servidor a VS Code: botó d'estat “Go Live”; clic dret en un fitxer HTML i “Open with Live Server”; menú contextual a l'editor; la drecera alt+L, alt+O per obrir i alt+L, alt+C per tancar (en macOS cmd+L, cmd+O y cmd+L, cmd+C); o des de la paleta amb “Live Server: Open/Stop”. Si no en tens cap .html al workspace, utilitza els mètodes que no depenen del navegador de fitxers.

Funcions que t'interessen amb Edge : recàrrega ràpida del navegador, exclusió d'arxius de la vigilància de canvis, número de port i carpeta arrel configurables, elecció del navegador per defecte, suport per a qualsevol navegador a través de paràmetres de línia d' ordres (pots llançar Edge), adjuntar depuració de Chrome (via js- mòbil). També suporta HTTPS, CORS, servidor intermediari, SVG, multi-root i personalitzar l'etiqueta que injecta l' script de recàrrega.

Instal·lador: obre VS Code, prem Ctrl+P i executa ext install ritwickdey.liveserver. L'extensió és molt polida i manté changelog i FAQ; per exemple, s'han abordat casos d'alt ús de CPU o tancaments inesperats del host d'extensions a macOS. I hi ha un derivat “Live Server++ (beta)” que intenta aplicar canvis sense desar.

Quan utilitzar Live Server : si el teu projecte no té el seu propi dev server (per exemple, React o Angular ja porten HMR), Live Server et dóna una experiència immediata i fluida. Si ja teniu un servidor de desenvolupament, és normal obrir l'URL d'aquest servidor a Edge i utilitzar només la depuració.

Live Preview (Microsoft): servidor integrat i depuració amb Edge

Live Preview és l'alternativa oficial de Microsoft (en pre-release) que allotja un servidor local i mostra la vista prèvia embeguda a VS Code, a més de permetre obrir en un navegador extern com Edge. És especialment útil en projectes sense servidor propi.

Previsualització HTML al vol: botó a la part superior dreta de l'editor o menú contextual per obrir la vista. També ofereix un navegador embegut amb historial, barra d'adreces, cerca (amb Ctrl+F) i accés a les DevTools del webview.

Live Refreshing: per defecte actualitza conforme escrius; configurable amb livePreview.autoRefreshPreview per refrescar en desar o desactivar. Les pàgines poden excloure's de la recàrrega afegint-hi data-server-no-reload al <body>.

Servidor persistent amb logging : pots llançar la tasca “Live Preview” per mantenir-lo actiu i veure el trànsit. Des de “Live Preview: Start Server Logging” veuràs peticions i podràs saltar als fitxers servits amb un clic.

Vista externa i depuració : a més de la vista embeguda, pots obrir a Edge i adjuntar depuració gràcies a la integració amb l'extensió js-debug i l' Edge DevTools Extension . Executa “Live Preview: Show Debug Preview” per configurar el flux amb breakpoints i inspecció d'elements.

Com obrir i depurar a Microsoft Edge des de VS Code

Per utilitzar Edge com a navegador objectiu amb recàrrega en viu tens dos camins senzills des de VS Code: Live Server (configurant Edge com a navegador per defecte o passant el path per línia d'ordres) o Live Preview (seleccionant navegador extern Edge). Live Preview facilita a més la depuració integrada.

Pas a pas amb Live Preview per depurar a Edge: obre el fitxer HTML i llança la vista amb Live Preview; utilitza l'ordre “Live Preview: Show Debug Preview”; tria navegació externa i Edge com a objectiu; VS Code obrirà Edge i adjuntarà js-debug, permetent posar punts de ruptura, pausar en excepcions i inspeccionar el DOM amb Edge DevTools.

Consells de depuració: si la vista externa a l'Edge no coincideix amb l'encastada, esborra la memòria cau del navegador; desactiva extensions que injectin scripts; i consulta què fer si Edge no carrega pàgines web. i confirma que no has marcat data-server-no-reload si esperes auto-refresc. Canvis a CSS s'injecten sense recarregar tota la pàgina quan és possible.

Arquitectures amb servidor propi (React, Angular, etc.): aquests frameworks ja porten el servidor i hot module replacement. Fes servir el seu “npm run dev” o equivalent i després “Simple Browser: Show” integrat a VS Code o obre Edge directament. La Live Preview és més útil quan no hi ha cap servidor.

Limitacions habituals i bones pràctiques amb recàrrega

No tota modificació es reaplica amb recàrrega automàtica; consulta actualitzar automàticament una pàgina web per entendre el comportament. Si canvieu un fragment que no es reexecuta durant el cicle normal de render de la pàgina, no veureu resultats fins a un refresc complet. En entorns de hot reload, canvis en inicialitzadors estàtics, genèrics o conversió d'enums/classes requereixen “hot restart”. Els camps estàtics i variables globals es consideren estat i no es reavaluaran en recarregar. En editar alguna cosa que trenca la compilació, es mostrarà l'error a la consola i hauràs de corregir abans de seguir. Són patrons conceptualment similars al que passa quan un servidor web intenta injectar canvis: no tot es pot recalcular en calent.

Estat i escorcoll : els navegadors (inclòs Edge) poden mantenir memòria cau o estat de client. Ajusta capçaleres o desactiva el escorcoll en desenvolupament; prova forçant un hard reload. En Live Preview, l'extern pot diferir de l'embegut per memòria cau o estat ; neteja i reinicia el navegador si detectes discrepàncies.

Exclusió de fitxers i rutes: al Live Server pots excloure patrons perquè no disparin recàrrega, i triar una etiqueta d'injecció alternativa (per defecte body o head). També podeu configurar host preferit (localhost o 127.0.0.1), CORS i proxy si la teva app consumeix APIs locals.

HTTPS, ports i multi-root : Live Server suporta HTTPS i multi-root. El Live Preview també suporta multi-root i mostra els ports oberts des de l'indicador de la barra d'estat. Si treballes sense workspace, les previsualitzacions se serveixen en instàncies separades amb rutes absolutes, cosa que pot afectar enllaços relatius.

Casos avançats: canvis sense guardar, mòbils i pantalles en mode quiosc

Live Server++ (beta) promet veure canvis sense necessitat de desar el fitxer. És útil per a prototipat ultraràpid, encara que en ser beta convé adoptar-ho amb cautela. Si t'interessa reduir fricció al màxim, prova-ho en projectes petits.

Proves en mòbil : tant el Live Server com el Live Preview poden exposar la vista prèvia per WLAN perquè el telèfon intel·ligent carregui la pàgina des de la xarxa local. Això permet veure com Edge Mobile o qualsevol navegador mòbil renderitza la teva app en temps real.

Senyalització digital i quioscos : si distribueixes contingut web en Android encastat, hi ha navegadors tipus “kiosc” que inclouen recàrrega automàtica sota certs esdeveniments (en encendre pantalla, reconnectar xarxa, inactivitat, etc.), bloqueig d'interfície, llistes blanques/negres d'URLs, i administració remota. Aquestes solucions usen el WebView d'Android, no Edge, però il·lustren que la recàrrega automatitzada es pot orquestrar també fora de l'escriptori, amb opcions de reinici, cache cleaning o recuperació davant d'errors.

Auto-reload per esdeveniments en entorns de quiosc: pots reconfigurar que en detectar que torna Internet, després d'un error de càrrega o quan el dispositiu es reactiva, la pàgina es recarregui; fins i tot és possible netejar cookies o emmagatzematge web a cada reload. Això és útil si fas cartelleria dinàmica o dashboards a pantalles sempre enceses.

FAQ i solució de problemes

“Previewing a file that is not a child of the server root…”: el servidor serveix des de l'arrel del workspace o un subdirectori configurat. Si previsualitzes un fitxer fora, alguns enllaços relatius (com els que apunten a l'arrel) es poden trencar. Obre el workspace a l'arrel del projecte o ajusta livePreview.serverRoot.

Codespaces i vista embeguda : en entorns remots, obre manualment els ports reenviats (p. ex., 3000/3001) des de la pestanya “Ports” de l'editor i permet els redireccionaments del navegador. Després, la vista embeguda hauria de funcionar.

Diferències entre Edge i la vista embeguda : estil o layout poden variar per escorcoll o estat del client al navegador extern. Neteja memòria cau i reinicia Edge si notes inconsistència davant del webview embegut.

No tinc cap HTML a l'espai de treball : amb Live Server, utilitza la paleta d'ordres o les dreceres generals per iniciar el servidor (els mètodes de clic dret requereixen un HTML obert). Assegureu-vos que l'arrel del servidor apunta on són els fitxers.

Vull pausar la recàrrega en una pàgina concreta: a Live Preview afegeix data-server-no-reload al <body> d'aquesta pàgina perquè s'exclogui de l'autorefresh.

Configuració pràctica: Edge com a navegador per defecte

Amb Live Server : a les configuracions de l'extensió pots establir el navegador predeterminat. Alternativament, arrenca amb arguments de línia per obrir a Edge. Si utilitzeu port fix (per exemple, 5500), afegiu una configuració perquè no xoqui amb altres serveis.

Amb Live Preview : selecciona la destinació de previsualització externa i tria Edge. Per depurar, utilitza “Show Debug Preview” perquè js-debug adjunti automàticament i tinguis DevTools d'Edge disponibles des de VS Code.

HTTPS local : si necessites provar service workers, credencials o APIs que requereixen context segur, habilita HTTPS al servidor de desenvolupament que utilitzis (Live Server ho suporta). Recordeu confiar en el certificat local a Edge si el generes tu.

Proxy i CORS : si el vostre front truca a una API local amb CORS, configura el proxy de l'extensió o habilita CORS al servidor de l'API. Evita desactivar polítiques del navegador excepte per a una prova puntual: val més simular l'entorn real des de ja.

Quan no utilitzar Live Reload i alternatives

Frameworks amb dev server propi : React, Angular, Vue i similars porten hot reload/HMR. No necessites Live Server/Live Preview per aixecar, només obre la URL del dev server a Edge i depura amb js-debug i DevTools.

Apps natives o híbrides : a Flutter, el hot reload/hot restart gestiona el cicle de vida i estat. Edge no és el navegador objectiu, però el patró mental de quan un canvi s'aplica i quan has de reiniciar és anàleg: si canvies inicialitzadors estàtics o la forma de tipus, necessitaràs reinici complet.

Pàgines amb autenticació complexa : si depens de NTLM/Kerberos o descarregues per POST especials, l'entorn de previsualització local pot no replicar la integració exacta. En aquests casos, prova sobre un entorn staging amb HTTPS real i fes servir les DevTools d'Edge amb la sessió vàlida.

Entorns amb restricció severa : si el vostre cas d'ús és kiosko amb bloqueig total del sistema, planteja't navegadors específics que incloguin recàrrega per esdeveniments, llistes blanques i administració remota; Live Reload en escriptori no resoldrà la gestió de dispositiu.

Pots activar recàrrega en viu amb Edge de manera fiable: Live Server per a prototips i estàtics, Live Preview per a una experiència integrada amb depuració a Edge, i dev servers propis per a frameworks moderns. Si alguna modificació no apareix a l'instant, revisa limitacions de hot reload, memòria cau i si el codi afectat es reexecuta després de la recàrrega; amb una configuració correcta, el cicle “escriure-veure-depurar” es torna àgil i sense friccions.