Esta guía le ofrecerá una visión general del uso de los fragmentos de código y de la función de temporización dentro de las Herramientas para desarrolladores de Chrome. Los fragmentos de código permiten crear fragmentos de código reutilizables que pueden resultar útiles a la hora de programar y probar el código. También le mostramos cómo medir el tiempo de ejecución del código JavaScript para optimizar el rendimiento de sus aplicaciones. Estas funciones pueden ser cruciales para conocer mejor tu entorno de desarrollo de JavaScript.
Enseñanzas clave
- Los fragmentos de código son fragmentos de código reutilizables que se almacenan en las Herramientas para desarrolladores de Chrome.
- Puedes crear, editar y ejecutar fragmentos para automatizar tareas comunes.
- Puedes utilizar las funciones console.time() y console.timeEnd() para medir el tiempo de ejecución de los fragmentos de código.
- El manejo correcto de las llamadas a Tim y timeEnd es crucial para obtener valores de medición correctos.
Guía paso a paso
Crear y gestionar fragmentos de código
En primer lugar, veamos cómo crear y gestionar fragmentos de código en las Herramientas para desarrolladores de Chrome.
Para acceder a los fragmentos, abre las Herramientas para desarrolladores de Chrome, haz clic en la pestaña "Fuentes" y localiza el panel Fragmentos. Puedes acceder al panel de fragmentos personalizando la vista o a través del menú.
Aquí puedes crear nuevos fragmentos. Haga clic en "Nuevo fragmento" para crear uno nuevo. Se le pedirá que introduzca un nombre para su fragmento; por ejemplo, llámelo "Prueba".
En cuanto haya dado nombre al fragmento, podrá editarlo directamente. Aquí puede introducir el código JavaScript deseado, que se ejecutará cuando ejecute el fragmento.
Los cambios se guardan temporalmente hasta que los guarde pulsando Ctrl + S (o Comando + S en Mac). Tenga en cuenta que los fragmentos se guardan independientemente del sitio web visitado, lo que significa que puede utilizarlos en cualquier página.
Para ejecutar un fragmento, basta con hacer clic en el icono de reproducción o utilizar la combinación de teclas Ctrl + Intro (o Comando + Intro en Mac).
Cuando ejecute el fragmento, recibirá la salida directamente en el área de consola de las Herramientas de desarrollo.
Medición del tiempo con console.time() y console.timeEnd()
Ahora que ha creado fragmentos de código con éxito, veamos cómo puede medir el rendimiento de sus códigos JavaScript utilizando las funciones console.time() y console.timeEnd().
Puedes iniciar una medición de Tim insertando console.time('Loop') al principio del fragmento de código que quieres medir. Asegúrate de utilizar la misma cadena en console.timeEnd('Loop') al final del código en cuestión. El tiempo intermedio se mostrará en milisegundos.
Si las dos cadenas no coinciden o se olvida de llamar a la función timeEnd, recibirá una advertencia.
Ejemplo de medición del tiempo
Tomemos un ejemplo sencillo en el que se realiza un bucle sobre 100.000 elementos y se escriben en un array.
Establece console.time('Loop') antes del bucle y console.timeEnd('Loop') después del bucle. Esto te permitirá medir el tiempo que tarda en ejecutarse el bucle.
Una vez que hayas probado esta funcionalidad, verás que la medición del tiempo te ayuda a identificar y optimizar los cuellos de botella.
Notas importantes sobre su uso
Tenga en cuenta que el uso de console.time() y console.timeEnd() no se recomienda para entornos de producción. Estas funciones sólo deben utilizarse para pruebas, ya que pueden tener un soporte diferente en distintos entornos JavaScript.
Conclusión
Ya has aprendido los conceptos básicos del uso de fragmentos y de los métodos console.time() y console.timeEnd() en las Herramientas para desarrolladores de Chrome. Estas funciones son muy útiles para trabajar de forma más eficiente y comprender mejor el rendimiento de tus aplicaciones.
Para resumir
En resumen, el uso de fragmentos de código y de temporización en las Herramientas para desarrolladores de Chrome te proporciona herramientas valiosas para aumentar la eficacia de tu desarrollo y conocer mejor los tiempos de ejecución de tus códigos JavaScript.
Preguntas más frecuentes
¿Cómo creo un fragmento en las Herramientas para desarrolladores de Chrome? Haz clic en "Nuevo fragmento" en la pestaña "Fuentes" y dale un nombre a tu fragmento.
¿Cómo ejecuto un fragmento? Haz clic en el símbolo de reproducción o utiliza la combinación de teclas Ctrl + Intro o Comando + Intro.
¿Cómo mido el tiempo de ejecución de un código?Utilice console.time('label') al principio y console.timeEnd('label') al final de su código para medir el Tim.
¿Puedo utilizar fragmentos en cualquier páginaweb? Sí, los fragmentos se almacenan en las Herramientas para desarrolladores de Chrome y pueden utilizarse en cualquier página web.
¿Hay alguna restricción en el uso de console.time()?Sí, console.time() no debe incluirse en el código de producción, ya que puede dar lugar a errores inesperados.
