Invalidar recursos de página web con copias locales mediante Microsoft Edge DevTools
A veces, necesita probar algunas correcciones posibles para una página web, pero no tiene acceso a los archivos de origen, o cambiar la página requiere un proceso de compilación lento y complejo. Puede depurar y corregir todo tipo de problemas en DevTools. Pero los cambios no persisten; después de actualizar el archivo local, todo el trabajo ha desaparecido. La característica Invalidaciones de la herramienta Orígenes le ayuda a resolver este problema.
Ahora puede tomar un recurso de la página web actual y almacenarlo localmente. Al actualizar la página web, el explorador no carga el recurso desde el servidor. En su lugar, el explorador lo reemplaza por la copia local del recurso.
Configurar la carpeta local para almacenar invalidaciones
Vaya a la herramienta Orígenes.
En el panel Navegador (a la izquierda), elija la pestaña Invalidaciones. Si no se muestra la pestaña Invalidaciones, elija la opción
≫.Elija una carpeta en el equipo local para almacenar los archivos de recursos que desea reemplazar.
- Para buscar una carpeta, elija + Seleccionar carpeta para invalidaciones.
DevTools le advierte que debe tener acceso total a la carpeta y que no debe revelar información confidencial. En la barra de advertencias, elija Permitir conceder acceso.
En la pestaña Invalidaciones, se muestra una casilla junto a Habilitar invalidaciones locales. A la derecha de Habilitar invalidaciones locales se encuentra un icono Borrar configuración que permite eliminar la configuración de invalidaciones locales. Ya ha terminado de configurar la carpeta y está listo para reemplazar los recursos en directo por los locales.
Agregar archivos a la carpeta Invalidaciones
Para agregar archivos a la carpeta invalidaciones, abra la herramienta Elementos e inspeccione la página web. Para editar, elija el nombre del archivo CSS en el inspector de estilos.
Elegir un archivo en el inspector de estilos
En el editor de orígenes, mantenga el mouse sobre el nombre de archivo del archivo elegido, abra el menú contextual (haga clic con el botón secundario) y elija Guardar para invalidaciones.
En el editor de orígenes, agregue el nombre del archivo a invalidaciones
En el menú contextual, elija Guardar para invalidaciones
El archivo se almacena en la carpeta invalidaciones. Compruebe que DevTools cree una carpeta que se denomina mediante la dirección URL del archivo con la estructura de directorio correcta. El archivo se almacena dentro. El nombre de archivo del editor ahora también muestra un punto púrpura que indica que el archivo es local y no uno vivo.
Almacenado correctamente el archivo en la carpeta invalidaciones
En el siguiente ejemplo, ahora puede cambiar los estilos de la página web. Para agregar un borde rojo alrededor del archivo, en el editor de estilos, copie el siguiente estilo y agrégálo al elemento body.
border: 10px solid firebrick
El archivo se guarda automáticamente en el equipo. Si actualiza el archivo, se muestra el borde y no se pierde nada de su trabajo.
En la herramienta Orígenes, en la sección Página, mantenga el mouse en cualquier archivo, abra el menú contextual (haga clic con el botón secundario) y agrégálo a invalidaciones. De nuevo, los archivos que ya están en la carpeta invalidaciones tienen un punto púrpura en el icono.
Elegir un archivo de la herramienta Orígenes para invalidaciones :::image-end:::
Como alternativa, en la herramienta Red, mantenga el mouse en cualquier archivo, abra el menú contextual (haga clic con el botón secundario) y agrégálo a invalidaciones. Cuando las invalidaciones están en vigor, los archivos que se encuentran en el equipo y no desde la página web en directo. Cuando las invalidaciones estén en vigor, en la herramienta Red, busque un icono de advertencia junto al nombre del archivo.
Elegir un archivo de la herramienta Red para invalidaciones :::image-end:::
Interacción en dos sentidos de invalidaciones
Use el editor proporcionado con la herramienta Orígenes de DevTools o cualquier editor que desee cambiar los archivos. Los cambios se sincronizan en todos los productos que tienen acceso a los archivos de la carpeta invalidaciones.