En este instructivo, se ofrece la oportunidad de practicar la configuración de un lugar de trabajo para que puedas usarlo en tus propios proyectos. Workspace te permite guardar los cambios que realizas dentro de Herramientas para desarrolladores en el código fuente que se almacena en tu computadora.
Descripción general
El espacio de trabajo te permite guardar un cambio que realices en Herramientas para desarrolladores en una copia local del mismo archivo en tu computadora. Por ejemplo, supongamos:
- Tienes el código fuente del sitio en tu computadora de escritorio.
- Estás ejecutando un servidor web local desde el directorio del código fuente para que se pueda acceder al sitio en
localhost:8080
. - Tienes
localhost:8080
abierto en Google Chrome y estás usando las Herramientas para desarrolladores para cambiar la CSS del sitio.
Con el espacio de trabajo habilitado, los cambios de CSS que realices en Herramientas para desarrolladores se guardarán en el código fuente de tu escritorio.
Limitaciones
Si usas un framework moderno, es probable que transforme tu código fuente de un formato fácil de mantener a un formato optimizado para ejecutarse lo más rápido posible. Por lo general, Workspace puede volver a asignar el código optimizado a tu código fuente original con la ayuda de mapas de origen.
La comunidad de Herramientas para desarrolladores trabaja para admitir las capacidades que proporcionan los mapas de origen en diversos frameworks y herramientas. Si tienes problemas mientras usas un espacio de trabajo con el framework que prefieras o si logras que funcione después de una configuración personalizada, inicia una conversación en la lista de distribución o haz una pregunta en Stack Overflow para compartir tus conocimientos con el resto de la comunidad de Herramientas para desarrolladores.
Función relacionada: Anulaciones locales
Las anulaciones locales son otra función de las Herramientas para desarrolladores similar al espacio de trabajo. Usa anulaciones locales para simular contenido web o encabezados de solicitudes sin esperar a los cambios del backend o cuando quieras experimentar con cambios en una página, y necesitas ver esos cambios entre las cargas de páginas, pero no te importa asignar los cambios al código fuente de la página.
Paso 1: Configuración
Completa este instructivo para adquirir experiencia práctica en un lugar de trabajo.
Configura la demostración
- Clona este repositorio de demostración en algún directorio de tu computadora. Por ejemplo, a
~/Desktop
. Inicia un servidor web local en
~/Desktop/devtools-workspace-demo
. A continuación, se muestra un código de muestra para iniciarSimpleHTTPServer
, pero puedes usar el servidor que prefieras.cd ~/Desktop/devtools-workspace-demo # If your Python version is 3.X # On Windows, try "python -m http.server" or "py -3 -m http.server" python3 -m http.server # If your Python version is 2.X python -m SimpleHTTPServer
Durante el resto de este instructivo, este directorio se denominará
/devtools-workspace-demo
.Abre una pestaña en Google Chrome y ve a la versión del sitio alojada localmente. Deberías poder acceder a él a través de una URL como
localhost:8000
. El número de puerto exacto puede ser diferente.
Cómo configurar Herramientas para desarrolladores
Abre Herramientas para desarrolladores en la página de demostración alojada de forma local.
Navega a Fuentes > Espacio de trabajo y configura un lugar de trabajo en la carpeta
devtools-workspace-demo
que clonaste. Puedes hacerlo de varias maneras:- Arrastra y suelta la carpeta en el Editor en Fuentes.
- Haz clic en el vínculo seleccionar carpeta y selecciona la carpeta.
- Haz clic en Agregar carpeta y selecciónala.
En la ventana de la parte superior, haz clic en Allow para que Herramientas para desarrolladores pueda leer y escribir el directorio.
En la pestaña Espacio de trabajo, ahora hay un punto verde junto a index.html
, script.js
y styles.css
. Estos puntos verdes indican que Herramientas para desarrolladores estableció una asignación entre los recursos de red de la página y los archivos en devtools-workspace-demo
.
Paso 2: Guarda un cambio de CSS en el disco
Abre
/devtools-workspace-demo/styles.css
en un editor de texto. Observa cómo la propiedadcolor
de los elementosh1
se establece enfuchsia
.Cierra el editor de texto.
En Herramientas para desarrolladores, haz clic en la pestaña Elementos.
Cambia el valor de la propiedad
color
del elemento<h1>
a tu color favorito. Para ello, sigue estos pasos:- Haz clic en el elemento
<h1>
en Árbol del DOM. - En el panel Estilos, busca la regla de CSS
h1 { color: fuchsia }
y cambia el color a tu favorito. En este ejemplo, el color se establece en verde.
El punto verde junto a
styles.css:1
en el panel Estilos significa que cualquier cambio que realices se asignará a/devtools-workspace-demo/styles.css
.- Haz clic en el elemento
Vuelve a abrir
/devtools-workspace-demo/styles.css
en un editor de texto. La propiedadcolor
ahora está configurada con tu color favorito.Vuelve a cargar la página. El color del elemento
<h1>
sigue configurado en tu color favorito. Esto funciona porque cuando hiciste el cambio y Herramientas para desarrolladores lo guardaron en el disco. Luego, cuando volviste a cargar la página, tu servidor local entregó la copia modificada del archivo desde el disco.
Paso 3: Guarda un cambio HTML en el disco
Intenta cambiar el código HTML desde el panel Elementos.
- Abre la pestaña Elementos.
Haz doble clic en el contenido de texto del elemento
h1
, que diceWorkspaces Demo
, y reemplázalo porI ❤️ Cake
.Abre
/devtools-workspace-demo/index.html
en un editor de texto. El cambio que acabas de hacer no está ahí.Vuelve a cargar la página. La página vuelve a su título original.
Opcional: Por qué no funciona
- El árbol de nodos que se muestra en el panel Elementos representa el DOM de la página.
- Para mostrar una página, un navegador recupera el código HTML a través de la red, lo analiza y, luego, lo convierte en un árbol de nodos del DOM.
- Si la página tiene JavaScript, este puede agregar, borrar o cambiar nodos del DOM. CSS también puede cambiar el DOM mediante la propiedad
content
. - Con el tiempo, el navegador usa el DOM para determinar qué contenido debe presentar a los usuarios del navegador.
- Por lo tanto, el estado final de la página que ven los usuarios puede ser muy diferente del código HTML que recuperó el navegador.
- Esto dificulta que las Herramientas para desarrolladores resuelvan dónde se debe guardar un cambio realizado en el panel Elements, ya que el DOM se ve afectado por HTML, JavaScript y CSS.
En resumen, el árbol del DOM !==
HTML.
Cómo cambiar el código HTML desde el panel Sources
Si deseas guardar un cambio en el código HTML de la página, hazlo en el panel Fuentes.
- Navega a Fuentes > Página.
- Haz clic en (índice). Se abrirá el código HTML de la página.
- Reemplaza
<h1>Workspaces Demo</h1>
por<h1>I ❤️ Cake</h1>
. - Presiona Comando + S (Mac) o Control + S (Windows, Linux o ChromeOS) para guardar el cambio.
Vuelve a cargar la página. El elemento
<h1>
aún muestra el texto nuevo.Abre
/devtools-workspace-demo/index.html
. El elemento<h1>
contiene el texto nuevo.
Paso 4: Guarda un cambio de JavaScript en el disco
En el panel Sources, también puedes realizar cambios en JavaScript. Sin embargo, a veces necesitas acceder a otros paneles, como Elements o Console, mientras realizas cambios en tu sitio. Hay una forma de tener el panel Fuentes abierto junto a otros paneles.
- Abre la pestaña Elementos.
- Presiona Comando + Mayúscula + P (Mac) o Ctrl + Mayúscula + P (Windows, Linux y ChromeOS). Se abrirá el menú de comandos.
Escribe
QS
y, luego, selecciona Mostrar fuente rápida. En la parte inferior de la ventana de Herramientas para desarrolladores, ahora hay una pestaña Fuente rápida.La pestaña muestra el contenido de
index.html
, que es el último archivo que editaste en el panel Sources. La pestaña Código rápido te proporciona el editor del panel Fuentes, para que puedas editar archivos mientras tienes otros paneles abiertos.Presiona Comando + P (Mac) o Control + P (Windows, Linux o ChromeOS) para abrir el diálogo Abrir archivo.
Escribe
script
y, luego, selecciona devtools-workspace-demo/script.js.Observa el vínculo
Edit and save files in a workspace
en la demostración. Se le aplica estilo con regularidad.Agregue el siguiente código al final de script.js en la pestaña Fuente rápida.
document.querySelector('a').style = 'font-style:italic';
Presiona Comando + S (Mac) o Control + S (Windows, Linux o ChromeOS) para guardar el cambio.
Vuelve a cargar la página. El vínculo de la página ahora está en cursiva.
Próximos pasos
Puedes configurar varias carpetas en un lugar de trabajo. Todas estas carpetas se enumeran en Configuración > Espacio de trabajo.
A continuación, aprenderás a usar las Herramientas para desarrolladores para cambiar el CSS y depurar JavaScript.