Tresjs/docs/es/debug/devtools.md

Herramientas de desarrollo

Una de las cosas más difíciles a las que se enfrenta un desarrollador al crear experiencias 3D en el navegador es la depuración. El canvas del navegador es una caja negra y es difícil saber qué está sucediendo en su interior. La naturaleza imperativa de ThreeJS hace que sea increíblemente difícil depurar, teniendo que depender de console.log para ver qué está sucediendo, o de terceros para ajustar y inspeccionar la escena.

No me hagas empezar con la comprobación del rendimiento de tu escena. 😱

Uno de nuestros objetivos con TresJS es ofrecer la mejor experiencia de desarrollo (DX, por sus siglas en inglés) al trabajar con escenas 3D en el navegador. Gracias a la naturaleza declarativa del ecosistema y a la variedad de soluciones que ofrece el ecosistema de Vue, como Vue Devtools, Nuxt y Vite, podemos ofrecer mejores herramientas para que los desarrolladores depuren sus escenas.

Presentando las Herramientas de Desarrollo

A partir de la versión , estamos introduciendo las Herramientas de Desarrollo de TresJS, una pestaña de inspector personalizada para las Herramientas de Desarrollo de Chrome oficiales de Vue que te permite inspeccionar tus escenas y componentes de TresJS.

Características

• Inspector de Escena: Inspecciona la escena actual y sus componentes utilizando una vista en árbol similar al inspector de componentes de Vue Devtools.
• Asignación de Memoria: Muestra cuánta memoria está utilizando cada componente.
• Inspector de Objetos: Inspecciona las propiedades del objeto seleccionado en la escena, incluidos sus hijos.
• Propiedades Editables: Y sí, puedes editar las propiedades del objeto seleccionado y ver los cambios en tiempo real.

¡Disfruta de las nuevas Herramientas de Desarrollo y dinos qué opinas! 🎉