En este tutorial aprenderás cómo utilizar las herramientas para desarrolladores de Chrome para ajustar estilos y scripts sin realizar cambios en el código original. Se muestra cómo realizar extensas pruebas y ajustes en tu sitio web usando Overrides y el Workspace de Chrome, sin necesidad de modificar el archivo original en el servidor.
Principales Conclusiones
- Con Overrides puedes sobrescribir archivos localmente para realizar pruebas y ajustes.
- El Workspace te permite conectar tu carpeta de desarrollo local con las herramientas para desarrolladores de Chrome para realizar cambios directamente.
- Ambas funciones son extremadamente útiles para depurar problemas en el entorno de producción sin afectar el código del servidor original.
Guía paso a paso
Para utilizar eficazmente las herramientas para desarrolladores de Chrome, sigue estos pasos:
1. Uso de Overrides
Primero, queremos utilizar la función de Overrides de Chrome. Selecciona un archivo JavaScript, por ejemplo main.js, que se carga desde el servidor.
Haz clic con el botón derecho en el archivo y selecciona "Sobrescribir contenido" en el menú contextual.
Se abrirá un cuadro de diálogo donde puedes seleccionar la ubicación del archivo local. Asegúrate de haber creado previamente una carpeta donde deseas guardar tus archivos de sobrescritura.
Selecciona la carpeta deseada y haz clic en "Seleccionar carpeta". Esto establecerá la conexión entre el archivo original y tu archivo local.
Ahora debes concederle al navegador acceso a este directorio. Haz clic nuevamente en el menú de Overrides y asegúrate de que se haya activado el permiso de acceso al directorio deseado.
2. Crear un archivo local
Ahora puedes crear un nuevo archivo en la carpeta de Overrides. Abre el archivo y escribe un simple script de alerta, por ejemplo.
Puedes ajustar el contenido según tus necesidades. Guarda el archivo y actualiza la página para ver que ahora aparece la ventana de alerta en lugar del archivo que originalmente se cargó desde el servidor.
3. Verificar la actividad de red
Para asegurarte de que el archivo ya no se carga desde el servidor, abre la pestaña de Red en las herramientas para desarrolladores. Deberías ver que el archivo main.js ya no se solicita al servidor, sino que se muestran los contenidos sobrescritos localmente.
Si deseas agregar más Overrides o eliminar existentes, ve a la sección de Overrides, donde puedes ver una lista de todos los Overrides activados.
4. Trabajar con el Workspace
A continuación, queremos configurar el Workspace. Esto te permite vincular tu carpeta de desarrollo local con las herramientas para desarrolladores. Dirígete a la configuración de las herramientas para desarrolladores y busca la opción "Workspace".
Selecciona la carpeta donde se encuentran tus proyectos. Chrome también necesita permiso para acceder a esta carpeta, así que asegúrate de haber otorgado los permisos correspondientes.
5. Modificar el código
Ahora puedes trabajar directamente en el Workspace. Por ejemplo, abre tu archivo main.js, haz cambios y guarda el archivo. El código se recargará automáticamente desde el servidor, y podrás ver de inmediato cómo afecta la personalización en tu sitio web.
6. Depuración en el Workspace
Una ventaja práctica del Workspace es que puedes establecer puntos de interrupción para depurar eficientemente tu código. Coloca puntos de interrupción en las líneas de tu código y actualiza la página para detener la ejecución y verificar el estado actual de las variables.
7. Ventajas y desventajas
Aunque el Workspace es útil, muchos desarrolladores recomiendan hacer cambios directamente en un editor de código como Visual Studio Code y guardar los archivos allí. Esto garantiza que puedas ver mejor qué versión de archivos se está utilizando. Al utilizar el Workspace, puede ser confuso, especialmente si la vinculación con los archivos originales no está clara.
Sin embargo, si solo estás editando archivos CSS simples o código sin transpilar, el Workspace puede ser una buena opción.
Resumen
En esta guía has aprendido cómo trabajar con los Overrides y el Workspace en las Chrome Developer Tools para ajustar estilos y scripts sin afectar el archivo original del servidor. Con Overrides puedes hacer cambios rápidamente, mientras que el Workspace te permite trabajar directamente con tu carpeta de desarrollo.
Preguntas frecuentes
¿Puedo utilizar Overrides también para archivos CSS?Sí, puedes usar Overrides también para archivos CSS. Simplemente selecciona el archivo CSS deseado y activa el Override.
¿Cómo desactivo los Overrides?Puedes desactivar los Overrides yendo a los Developer Tools, accediendo a Overrides y desactivándolos o eliminándolos.
¿Existen limitaciones para el Workspace?Sí, a veces puede ser problemático identificar el Workspace correcto, especialmente con código transpilado.
¿Por qué debería usar Overrides en lugar del Workspace?Los Overrides proporcionan una forma más clara de hacer cambios sin confundirte con diferentes versiones de archivos. Suelen ser más fáciles de manejar si no deseas modificar directamente los archivos originales.
