Las Herramientas para desarrolladores proporcionan un panel de asistencia de IA que te ayuda a comprender tu sitio web y solucionar problemas a través de un chat con un agente de IA integrado.
El panel de asistencia de IA funciona con Gemini y hace lo siguiente:
- Se especializa en el desarrollo web.
- Puede responder preguntas generales sobre toda la página web y proporcionar estadísticas específicas sobre una variedad de temas, incluidos, entre otros, el diseño, la red, el rendimiento y mucho más.
- Reduce y selecciona de forma autónoma un contexto específico para que chatees, como elementos DOM, solicitudes de red, eventos de seguimiento de rendimiento y mucho más.
- Puede realizar acciones autónomas, como ejecutar auditorías y registrar seguimientos de rendimiento.
- Proporciona un recorrido paso a paso de sus acciones y razonamientos, y vínculos a las partes pertinentes de las Herramientas para desarrolladores, para que puedas inspeccionarlas con un clic.
- Puede sugerir cambios de código y generar una instrucción con sus estadísticas para que tu agente de programación la ejecute.
Con asistencia de IA, puedes depurar el diseño, la red, el rendimiento, las fuentes de tu sitio web y mucho más.
Para chatear con Gemini en el panel de asistencia de IA de manera eficaz, aprende a abrir el panel, escribir instrucciones y controlar el flujo de conversación.
Abre el panel de asistencia de IA
El panel de asistencia de IA se abre en el cajón de forma predeterminada.
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 conversación seleccionado directamente desde los paneles Elements, Network, Sources o Performance de dos maneras:
Haz clic en el botón
Debug with AI 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 seguimiento, y selecciona una de las opciones de instrucción comunes en el menú contextual Debug with AI.
Desde el menú de comandos
Para abrir la 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.
Desde 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 ofrece instrucciones de ejemplo 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.
Como alternativa, escribe 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?Primero, la asistencia de IA ejecutará una auditoría de Lighthouse para 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 Network, para que puedas seleccionar una solicitud como contexto de conversación con un clic.
What performance issues exist on the page?La asistencia de IA registrará automáticamente un seguimiento de rendimiento con la configuración seleccionada para responder a esta instrucción.
Las instrucciones como
How do I use the Animation panel?oWhere is the high contrast setting in DevTools?proporcionarán ayuda directa con las Herramientas para desarrolladores.
Una vez que inicies el chat, la asistencia de IA actualizará de forma inteligente el contexto en función de tus acciones cuando el chat esté vacío, respetando 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, para que puedas chatear específicamente sobre lo que seleccionaste.
En cualquier momento, puedes cambiar el contexto de forma manual seleccionando un elemento en Elements, una solicitud en Network, una entrada de seguimiento en Performance o un archivo en Sources.
También puedes copiar partes de un archivo, por ejemplo, del panel Sources , y pegarlo en el chat para preguntar qué hace.
A continuación, obtén más información sobre el flujo de conversación en la asistencia de IA.
Flujo de conversación
Enviar una instrucción inicia la conversación con el agente. Para obtener la información necesaria para responder mejor a 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 del paso inicial es Investigating….
La etiqueta del paso inicial se actualiza a medida que el agente ejecuta acciones más específicas para responder a tu instrucción.
Según lo que estés depurando, el agente también puede ejecutar acciones en las Herramientas para desarrolladores, como registrar un seguimiento de rendimiento o ejecutar auditorías de Lighthouse.
Explicación del agente
Una vez que el agente genera una respuesta a tu instrucción, la etiqueta del paso inicial cambia a Show agent walkthrough o Show thinking, que puedes expandir para ver los pasos que siguió el agente para analizar los datos en un panel lateral a la derecha.
Los pasos incluyen lo siguiente:
- Fragmentos de código expandibles que el agente ejecutó junto con los datos que se muestran. Puedes copiar el código y ejecutarlo en la consola.
- Widgets que presentan los resultados en un formato más legible.
Los widgets tienen un botón Reveal en la esquina superior derecha que te lleva a la parte pertinente de las Herramientas para desarrolladores.
Instrucciones de seguimiento
Una vez que el agente llega a una respuesta final, puede sugerir instrucciones de seguimiento. Haz clic en cualquiera para continuar la conversación.
Genera una instrucción para tu agente de programación
Para generar una instrucción para tu agente de programación, haz clic en Copy to coding agent.
El agente resumirá sus resultados y estadísticas, y proporcionará una instrucción procesable, en forma minimizada o en formato Markdown legible, que puedes copiar al portapapeles y seguir programando con un agente de IA de tu elección.
Conversaciones en pausa
Es posible que la asistencia de IA genere 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 pausa, revisa el código propuesto por el agente. Haz clic en Continuar para continuar o en Cancelar para evitar la ejecución.
Puedes inspeccionar los cambios de código sugeridos en el Changes panel.
El agente aplica los cambios dentro de las Herramientas para desarrolladores, pero puedes configurar tu lugar de trabajo para permitir que las Herramientas para desarrolladores guarden los cambios en tus fuentes.
Guarda los cambios en tu lugar de trabajo
Con una carpeta de lugar de trabajo conectada, puedes guardar los cambios de estilo sugeridos por la asistencia de IA en los archivos fuente CSS de tu computadora.
Para ello, sigue estos pasos:
Primero, genera un archivo de metadatos y conecta una carpeta de lugar de trabajo.
Como alternativa, puedes agregar una carpeta de forma manual.
Inicia un chat desde el panel Elements.
Escribe una instrucción para que la asistencia de IA modifique tu CSS.
Es posible que la asistencia de IA genere código y pause la ejecución. Revisa el código y haz clic en Continuar para probar los cambios en vivo.
Expande la sección Unsaved changes y haz clic en Apply to workspace.
Revisa los cambios en un
diffy haz clic en Save all.
Para aprender este flujo de trabajo, consulta lo siguiente:
No se reconoció ninguna respuesta
Es posible que la asistencia de IA no proporcione 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 siguiente se basa en tus 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 vuelvan a cargar las Herramientas para desarrolladores o Chrome.
Usa los controles 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 envía 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 Me gusta y No me gusta que se encuentran debajo de la respuesta.
Denuncia las respuestas
Para denunciar contenido inapropiado, haz clic en el botón junto a los botones de votación.