Las Herramientas para desarrolladores proporcionan un panel de asistencia de IA que te ayuda a comprender tu sitio web y solucionar problemas conversando con un agente de IA.
Con la asistencia de IA, puedes depurar el diseño, la conexión de red, el rendimiento y las fuentes de tu sitio web.
Para chatear con Gemini de manera eficaz en el panel de asistencia de IA, aprende a abrir el panel, a dar instrucciones y a controlar el flujo de la conversación.
Abrir el panel de asistencia de IA
Se abrirá el panel de asistencia de IA en el panel lateral.
Para abrir el panel, haz clic en el botón Asistencia de IA ubicado en el punto de entrada global a la derecha de la barra de herramientas principal en la parte superior.
Desde los paneles
Puedes abrir el panel, con el contexto de la conversación seleccionado, directamente desde los paneles Elements, Network, Sources o Performance de dos maneras:
Haz clic en el botón
Depurar con IA junto a un elemento, una solicitud de red, un archivo fuente o una estadística de rendimiento expandida.
Haz clic con el botón derecho en un elemento, una solicitud, un archivo o una entrada de registro y selecciona una de las opciones de mensaje comunes del menú contextual Debug with AI.
Desde el menú de comandos
Para abrir Asistencia de IA desde el menú de comandos, escribe AI y, luego, ejecuta el comando Show AI assistance, que tiene la insignia Drawer junto a él.
En el menú "Más herramientas"
Como alternativa, en la esquina superior derecha, selecciona Más opciones > Más herramientas > Asistencia de IA.
Instrucciones
Cuando inicias una conversación nueva, la asistencia de IA te ofrece ejemplos de instrucciones para ayudarte a comenzar rápidamente.
Haz clic en cualquiera de las instrucciones para completar previamente el campo de entrada de instrucciones en la parte inferior del panel.
También puedes escribir tu propia instrucción o pregunta en el campo de entrada.
Para enviar una instrucción, presiona Enter o haz clic en la flecha que se encuentra en el lado derecho del campo de entrada.
Instrucciones abiertas sin contexto
Con el cuadro de chat de formato libre, puedes hacer preguntas abiertas de nivel superior sin contexto previo. Por ejemplo:
How to use DevTools to debug accessibility?La asistencia de IA primero ejecutará una auditoría de Lighthouse sobre la accesibilidad para responder mejor tu instrucción.
What are the slowest network requests on this page?La asistencia de IA proporcionará una lista de solicitudes sospechosas y vínculos a ellas en el panel Red, para que puedas seleccionar una solicitud como contexto de conversación con un solo clic.
What performance issues exist on the page?La asistencia de IA registrará automáticamente un registro de rendimiento con la configuración que seleccionaste para responder a esta instrucción.
Las instrucciones como
How do I use the Animation panel?oWhere is the high contrast setting in DevTools?te brindarán ayuda directa con las Herramientas para desarrolladores.
Una vez que inicies el chat, la asistencia de IA actualizará de forma inteligente el contexto según tus acciones cuando el chat esté vacío, y respetará tus selecciones manuales cuando las realices.
Instrucciones con contexto
Cuando abres la Asistencia de IA desde un panel, se selecciona el contexto de conversación correspondiente en el cuadro de chat, por lo que puedes chatear específicamente sobre lo que seleccionaste.
En cualquier momento, puedes cambiar el contexto seleccionando un elemento en Elements, una solicitud en Network, una entrada de registro en Performance o un archivo en Sources.
También puedes copiar partes de un archivo, por ejemplo, del panel Fuentes, y pegarlas en el chat para preguntar qué hacen.
A continuación, obtén más información para usar la asistencia de IA con diferentes paneles.
Asistencia de IA para el diseño
Usa el panel de Asistencia de IA para aplicar estilos y comprender el diseño general de un sitio web, los estilos de elementos específicos y obtener correcciones generadas por IA para errores de CSS.
Abrir la asistencia de IA desde el panel de elementos
Para abrir la Asistencia de IA desde el panel Elements, cuando inspecciones un nodo DOM, haz clic con el botón derecho en el nodo y selecciona la opción Ask AI.
Cuando abres la Asistencia de IA de esta manera, el elemento DOM inspeccionado ya está preseleccionado como elemento de contexto para la conversación.
También puedes hacer clic en el botón flotante adjunto a un nodo del DOM sobre el que se coloca el cursor.
Contexto de la conversación
Los chats con asistencia de IA siempre se relacionan con el elemento que se está inspeccionando en ese momento, que es el último elemento seleccionado en el árbol del DOM del panel Elementos. En la esquina inferior izquierda del panel, se muestra una referencia a este elemento.
Cambia el contexto con el selector de elementos que se encuentra junto al elemento actual o seleccionando el árbol del DOM del panel Elementos.
Con el contexto seleccionado, puedes capturar una captura de pantalla de la ventana gráfica y enviarla a tu chat. Haz clic en el botón Tomar captura de pantalla junto al campo de entrada del chat.
Puedes usar capturas de pantalla para proporcionar contexto visual adicional a tus instrucciones, por ejemplo, para verificar si todos los botones visibles tienen el mismo espaciado.
Si bien el elemento inspeccionado actualmente es la base de la conversación, la asistencia de IA tiene acceso a todas las APIs web para recopilar más información de la página inspeccionada. Esto incluye consultar otros elementos con document.querySelector o evaluar los estilos calculados.
Asistencia de IA para la red
Usa el panel de asistencia de IA para la red y comprender las solicitudes que envía tu sitio web.
Cómo abrir la asistencia de IA desde el panel de red
Para abrir la asistencia de IA desde el panel de red, haz clic con el botón derecho en una solicitud y selecciona la opción Preguntarle a la IA.
Cuando abres la Asistencia de IA de esta manera, la solicitud de red seleccionada se preselecciona como contexto para la conversación.
Como alternativa, haz clic en el botón flotante junto a la solicitud de red sobre la que colocas el cursor.
Contexto de la conversación
Los chats con asistencia de IA se relacionan con la solicitud de red seleccionada actualmente en la lista de solicitudes del panel Network. En la esquina inferior izquierda del panel, se muestra una referencia a esta solicitud.
Para cambiar el contexto, haz clic en otra solicitud en el panel Red.
La asistencia de IA usa la URL de la solicitud, los encabezados, los tiempos y la cadena del iniciador de la solicitud para responder tus preguntas.
Importante: Los encabezados que podrían contener información sensible se ocultan automáticamente.
Haz clic en el botón Expandir en el chip Analyzing network data después de iniciar una conversación para ver los datos sin procesar que usa la asistencia de IA.
Asistencia de IA para el rendimiento
Usa el panel de asistencia de IA para el rendimiento y comprender los perfiles de rendimiento registrados en el panel de rendimiento.
Cómo abrir la asistencia de IA desde el panel Rendimiento
Para abrir la asistencia de IA desde el panel de Rendimiento, primero registra un perfil de rendimiento.
Según lo que quieras investigar, puedes abrir el panel de **Asistencia de IA** desde las estadísticas de rendimiento individuales o para las actividades en la vista de registro de rendimiento.
Estadísticas de rendimiento
En la pestaña Estadísticas, abre una estadística, por ejemplo, **LCP por fase, luego haz clic en el botón Preguntar a la IA**.
Herramientas para desarrolladores abre el panel de Asistencia de IA con esta estadística de rendimiento preseleccionada como contexto para la conversación.
Vista de registro de rendimiento
Para abrir la Asistencia de IA desde la vista de seguimiento, haz clic con el botón derecho en una actividad y selecciona la opción Preguntarle a la IA.
En este caso, esta actividad se preselecciona como contexto para la conversación.
Contexto de la conversación
La actividad de rendimiento seleccionada se usa como contexto para tu conversación con la asistencia de IA. En la esquina inferior izquierda del panel, se muestra una referencia a esta actividad.
Estadísticas de rendimiento
Si hiciste clic en Pregúntale a la IA para obtener una estadística de rendimiento específica, verás esta estadística como contexto seleccionado. Puedes hacer clic en Preguntar a la IA en otras estadísticas para cambiar tu selección.
Después de iniciar una conversación, expande la sección Analyzing insight: ... para ver los datos sin procesar que usa la asistencia de IA.
Vista de Trace
Puedes seleccionar diferentes elementos en el registro de rendimiento y el contexto cambiará según corresponda.
La asistencia de IA usa los tiempos del árbol de llamadas seleccionado para responder tu instrucción.
Haz clic en el botón del chip Analyzing call tree después de iniciar una conversación para ver los datos sin procesar que usa la Asistencia de IA.
Asistencia de IA para las fuentes
Usa el panel de asistencia de IA para conocer las fuentes y comprender los archivos que carga y usa tu sitio web.
Abrir la asistencia de IA desde el panel Fuentes
Para abrir la Asistencia de IA desde el panel Fuentes, haz clic con el botón derecho en un archivo y selecciona la opción Preguntarle a la IA.
Cuando abres la Asistencia de IA de esta manera, el archivo seleccionado se preselecciona como contexto para la conversación.
También puedes hacer clic en el botón flotante cuando coloques el cursor sobre un archivo.
Contexto de la conversación
El archivo seleccionado se usa como contexto para tu conversación con la asistencia de IA. En la esquina inferior izquierda del panel, se muestra una referencia a este archivo.
Para cambiar el contexto, haz clic en otro archivo del panel Sources.
La asistencia de IA usa el nombre, la URL, el mapa de origen (si está disponible) y el contenido del archivo seleccionado para responder tus preguntas.
Haz clic en el botón en el chip Analyzing file después de iniciar una conversación para ver los datos sin procesar que usa la Asistencia de IA.
Flujo de conversación
El envío de una instrucción inicia la conversación con el agente de diseño. Para obtener la información necesaria para responder mejor tu instrucción, el agente genera y ejecuta JavaScript que llama a las APIs web. El progreso del agente se muestra en pasos. El estado inicial del paso es Investigating….
La etiqueta del paso se actualiza a medida que el agente ejecuta acciones más específicas para responder tu pregunta.
Una vez que el agente llega a una respuesta final, esta se muestra debajo de los pasos de investigación, incluidas las sugerencias de instrucciones de seguimiento.
Haz clic en cualquiera de las instrucciones sugeridas para continuar la conversación. Haz clic en .
de un paso de investigación para comprender mejor qué hizo la asistencia de IA tras bambalinas.
Cuando expandes un chip de progreso, ves el código que ejecutó el agente junto con su valor de devolución. Copia el código ejecutado para usarlo más adelante, por ejemplo, para ejecutarlo con el panel de la consola.
Conversaciones pausadas
La asistencia de IA podría generar código con efectos secundarios. Cuando eso sucede, la conversación se pausa antes de que se ejecute el código.
Cuando la conversación se detenga, revisa el código que propuso el agente. Haz clic en Continuar para proceder o en Cancelar para evitar la ejecución.
Cómo guardar los cambios en tu lugar de trabajo
Con una carpeta de espacio de trabajo conectada, puedes guardar los cambios de estilo que sugiere la asistencia de IA en los archivos fuente de CSS de tu computadora.
Para ello, sigue estos pasos:
Primero, genera un archivo de metadatos y conecta una carpeta de espacio de trabajo.
Como alternativa, puedes agregar una carpeta de forma manual.
Inicia un chat desde el panel Elementos.
Pídele a la asistencia de IA que modifique tu CSS.
La asistencia de IA puede generar código y pausar la ejecución. Revisa el código y haz clic en Continuar para probar los cambios en vivo.
Expande la sección Cambios sin guardar y haz clic en Aplicar al lugar de trabajo.
Revisa los cambios en un
diffy haz clic en Guardar todo.
Para aprender este flujo de trabajo, consulta lo siguiente:
No se proporcionó ninguna respuesta
La asistencia de IA podría no proporcionar respuestas por varios motivos.
Si crees que tu instrucción es algo que la asistencia de IA debería poder analizar, registra un error.
Historial de conversación
Una vez que inicias una conversación, cada respuesta posterior se basa en las interacciones anteriores entre tú y la IA.
La asistencia de IA guarda tu historial de conversaciones entre sesiones, por lo que puedes acceder a tus chats anteriores incluso después de que se recarguen las Herramientas para desarrolladores o Chrome.
Usa los controles que se encuentran en la esquina superior izquierda del panel para controlar tu historial de conversaciones.
Comenzar una medición nueva
Para iniciar una conversación nueva con el contexto de conversación seleccionado actualmente, haz clic en el botón .
Continuar
Para continuar una conversación anterior, haz clic en el botón de y selecciónala en el menú contextual.
Borrar
Para borrar una conversación del historial, haz clic en el botón .
Califica las respuestas y proporciona comentarios
La asistencia de IA es una función experimental. Por lo tanto, buscamos activamente tus comentarios para saber cómo podemos mejorar la calidad de las respuestas y la experiencia general.
Vota las respuestas
Califica una respuesta con los botones de Me gusta y No me gusta que se encuentran debajo de la respuesta.
Denunciar respuestas
Para denunciar contenido inapropiado, haz clic en el botón junto a los botones de votación.