Invalidar recursos de página web con copias locales (pestaña Invalidaciones)

  • Artículo

A veces es necesario 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 se conservan; 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 reemplaza el recurso de servidor por la copia local del recurso.

Configuración de la carpeta local para almacenar invalidaciones

  1. Haga clic con el botón derecho en una página web, como https://microsoftedge.github.io/Demos/demo-to-do/y, a continuación, seleccione Inspeccionar. Se abre DevTools.

  2. Seleccione la herramienta Orígenes (icono Orígenes).

  3. En el panel Navegador (a la izquierda), haga clic en la pestaña Invalidaciones (agrupada con la pestaña Página ); Si es necesario, haga clic en el botón Más pestañas (v):

    Herramienta Orígenes con espacio insuficiente para mostrar la opción de invalidaciones

  4. Seleccione la pestaña Invalidaciones y haga clic de nuevo en el botón Más pestañas para contraer las pestañas:

    Selección de la pestaña Invalidaciones

  5. Haga clic en + Seleccionar carpeta para invalidaciones:

    Selección de una carpeta que se va a usar para invalidaciones

  6. En el cuadro de diálogo de navegación de archivos, seleccione una carpeta en el equipo local para almacenar los archivos de recursos que desea reemplazar, como C:\Users\myusername\overrides, y, a continuación, haga clic en el botón Seleccionar carpeta .

    DevTools le advierte de que debe tener acceso completo a la carpeta y que no debe revelar ninguna información confidencial:

    Concesión de acceso de DevTools a una carpeta

  7. Haga clic en el botón Permitir .

    En la pestaña Invalidaciones , se muestra una casilla junto a Habilitar invalidaciones locales. A la derecha de Habilitar invalidaciones locales hay un icono borrar configuración que le permite eliminar la configuración de invalidaciones locales. Ya ha terminado de configurar la carpeta y está listo para reemplazar los recursos activos por recursos locales:

    Instalación correcta de una carpeta overrides

Adición de archivos a la carpeta Invalidaciones

A continuación, agregue archivos a la carpeta Invalidaciones, como se indica a continuación. En este ejemplo se agregará un archivo CSS.

  1. Seleccione la herramienta Elementos y, a continuación, en la pestaña Estilos , haga clic en el nombre de un archivo CSS, como to-do-styles.css:

    Selección de un archivo en el inspector de estilos

    Se abre la herramienta Orígenes , con el archivo seleccionado abierto en una pestaña del panel del editor.

  2. En el panel del editor, haga clic con el botón derecho en la pestaña del archivo, como to-do-styles.css y, a continuación, seleccione Invalidar contenido:

    Haga clic con el botón derecho en un nombre de archivo y, a continuación, seleccione

    En la pestaña del archivo, se agrega un icono de página con un punto púrpura y, en la pestaña Invalidaciones , se agrega el archivo:

    En el editor Orígenes, agregue el nombre del archivo a la lista de invalidaciones.

    En este ejemplo, el archivo aparece como: microsoftedge.github.io/Demos/demo-to-do/styles > to-do-styles.css

    El archivo se almacena en un nuevo directorio que se encuentra en la carpeta overrides (por ejemplo, en C:\Users\myusername\overrides).

  3. En Explorador de archivos o Finder, compruebe que DevTools creó una subcarpeta denominada mediante la dirección URL del archivo (por ejemplo, microsoftedge.github.io) y contiene la estructura de directorios correcta, como C:\Users\myusername\overrides\microsoftedge.github.io\Demos\demo-to-do\styles. El archivo de invalidación se almacena en este directorio.

    En el panel del editor de la herramienta Orígenes , se agrega un icono de página con un punto púrpura a la pestaña del archivo. El punto púrpura indica que el archivo es un archivo local que invalida el archivo devuelto desde el servidor web:

    Al almacenar el archivo en la carpeta overrides, se agrega un punto púrpura al icono de página.

Cambio del estilo mediante el archivo de invalidación

Continuando desde arriba, ahora puede cambiar los estilos de la página web mediante el archivo CSS de invalidación local (en este ejemplo, to-do-styles.css). Agregue un borde rojo grueso alrededor del cuerpo de la página web representada, como se indica a continuación:

  1. En DevTools, seleccione la herramienta Elementos (icono de herramienta Elementos) y, a continuación, asegúrese de que la pestaña Estilos está seleccionada.

  2. Copie la siguiente propiedad de estilo CSS y péguela en la regla CSS de elemento existente body que se encuentra en el archivo de invalidación de CSS, como to-do-styles.css:

    border: 10px solid firebrick

    Cambiar los estilos de página web de forma persistente mediante la edición de un archivo en la carpeta overrides

    Se agrega un borde rojo grueso ("firebrick") alrededor del cuerpo de la página web representada y el archivo CSS modificado se guarda automáticamente en el equipo, en el directorio Invalidaciones.

  3. Actualice la página web.

    El borde rojo grueso permanece visible y no se pierde ningún trabajo, como lo habría sido si se representara el archivo CSS devuelto por el servidor web en lugar de usar el archivo de invalidación local.

Adición de archivos a invalidaciones desde otras pestañas o herramientas

  1. Continuando desde arriba, seleccione la herramienta Orígenes (orígenes). A continuación, a la izquierda, seleccione la pestaña Página (agrupada con la pestaña Invalidaciones ).

  2. En el árbol de archivos de recursos de la página, expanda la carpeta styles . Los archivos que ya están colocados en la carpeta overrides (mediante la pestaña Invalidaciones ), como to-do-styles.css, tienen un punto púrpura en el icono.

  3. Haga clic con el botón derecho en un archivo diferente, como (índice) (que es index.html) y, a continuación, seleccione Invalidar contenido:

    Selección de un archivo de la herramienta Orígenes para invalidaciones

    En la pestaña Página e Invalidaciones de la herramienta Orígenes , el icono del archivo cambia a un icono de página con un punto púrpura (por ejemplo, para index.html) y el archivo se agrega al directorio Invalidaciones de la unidad local.

  4. Seleccione la herramienta Red (icono de herramienta de red), haga clic con el botón derecho en un archivo de recursos para la página web, como to-do.jsy, a continuación, seleccione Invalidar contenido:

    Selección de un archivo de la herramienta Red para invalidaciones

    A lo largo de la interfaz de usuario de DevTools, el icono del archivo cambia a un icono de página con un punto púrpura (por ejemplo, para to-do.js) y el archivo se agrega al directorio Overrides de la unidad local.

    Cuando las invalidaciones están en vigor, se usan los archivos de recursos que se encuentran en el equipo en la carpeta Invalidaciones, en lugar de los archivos de recursos devueltos por el servidor web.

Interacción bidireccional 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 acceden a los archivos de la carpeta invalidaciones.