Saltar al contenido principal

Ejecutar DevTools desde VS Code

Aprende a iniciar y usar DevTools desde VS Code.

Añadir las extensiones de VS Code

#

Para usar DevTools desde VS Code, necesitas la extensión de Dart. Si estás depurando aplicaciones de Flutter, también deberías instalar la extensión de Flutter.

Iniciar una aplicación para depurar

#

Inicia una sesión de depuración para tu aplicación abriendo la carpeta raíz de tu proyecto (la que contiene pubspec.yaml) en VS Code y haciendo clic en Run > Start Debugging (F5).

Iniciar DevTools

#

Una vez que la sesión de depuración esté activa y la aplicación haya iniciado, los comandos Open DevTools pasan a estar disponibles en la paleta de comandos de VS Code (F1):

Captura de pantalla mostrando los comandos de Open DevTools

La herramienta elegida se abrirá integrada dentro de VS Code.

Captura de pantalla mostrando DevTools integrado en VS Code

Puedes elegir tener DevTools siempre abierto en un navegador con el ajuste dart.embedDevTools, y controlar si se abre como una ventana completa o en una nueva columna al lado de tu editor actual con la configuración dart.devToolsLocation.

Una lista completa de configuraciones de Dart/Flutter está disponible en dartcode.org o en el editor de configuración de VS Code. Algunas recomendaciones de configuración para Dart/Flutter en VS Code también se pueden encontrar en dartcode.org.

También puedes ver si DevTools se está ejecutando e iniciarlo en un navegador desde el área de estado de lenguaje (el icono {} al lado de Dart en la barra de estado).

Captura de pantalla mostrando DevTools en el área de estado de lenguaje de VS Code