Categorías destacadas
Artículo
|
Developer Tools en Internet Explorer 9 |
Hoy iniciamos el desarrollo de una serie de artículos técnicos con los que vamos a pretender acercar al usuario las diversas funcionalidades que incorporan las herramientas de desarrollo (developer tools) disponibles a partir del navegador Internet Explorer 8. Podemos definir las Developer Tools como una “herramienta de desarrollo que nos va a permitir depurar nuestras páginas web, estableciendo un seguimiento y un control de los elementos de diseño que conforman la estructura de nuestros sitios, proporcionando un mecanismo para intentar solucionar los posibles problemas que se puedan presentar en un sitio web”.
Descripción de funcionalidades
Antes de ver la parte más práctica de las Developer Tools, queremos indicar de forma teórica cuales son sus principales características o puntos fuertes de uso:
- Integradas y fáciles de usar
Integradas, porque cada instalación de Internet Explorer viene “de serie” con una instancia de las Developer Tools que nos va a permitir realizar depuración de los sitios web explorados. Se dispone además de la ventaja de poderlas utilizar cuando necesitemos limitar el impacto en el rendimiento que pueda producir un posible mal uso del código o de la programación existente que interprete el navegador. Fáciles de usar, gracias a una interfaz sencilla que además nos va a permitir realizar depuración de scripts para un determinado proceso del navegador en lugar de habilitar la depuración para toda la aplicación Internet Explorer.
- Interfaz visual para la plataforma
Mediante la interfaz visual proporcionada podemos analizar y observar los códigos Scripts, HTML, CSS, etc. que se ejecutan dentro de Internet Explorer lo que nos va a permitir obtener de forma cómoda y rápida una visualización de la estructura de nuestros sitios. Esto nos repercute positivamente, reduciendo el tiempo que invertimos muchas veces en depurar determinados sitios dinámicos, donde la inspección de los mismos a través del código fuente no es fácil. Piénsese, también en aquellos casos donde el comportamiento de una determinada funcionalidad que se ejecuta en Internet Explorer, requiere de un análisis profundo que no puede proporcionarnos una herramienta de edición genérica como por ejemplo el simple pero todopoderoso Bloc de Notas.
- Habilitar experimentación rápida
Cuando se habla de experimentación rápida, siempre me viene a la mente algún diseñador realizando cambios sobre la estructura de una página, probando algún nuevo diseño o mejorando un determinado código. El proceso, antes de la existencia de las Developer Tools, consistía en editar el código, guardarlo y a continuación refrescar la página en el navegador, para más tarde volver a repetir todo el proceso. Ahora, mediante el uso de las Developer Tools, podemos acotar acortar este proceso editando nuestros sitios para ver los cambios de forma inmediata.
- Optimización del rendimiento de las aplicaciones
Mediante las Developer Tools vamos a poder identificar y solucionar posibles problemas potenciales de rendimiento. Gracias al analizador de scripts, es posible recopilar estadísticas y procesarlas en un informe que nos proporcione datos valiosos referidos al rendimiento. Ejemplos de ello pueden ser análisis del tiempo de ejecución invertido para la carga de determinada página web o el número de veces que se ha realizado una llamada a una determinada función JavaScript.
Bien, pasemos a la parte práctica. Para poder activar las herramientas de desarrollo, tan sólo hemos de proceder a la pulsación de la tecla F12 desde el navegador Internet Explorer. Recuerde que las Developer Tools se encuentran presentes en las versiones del navegador Internet Explorer 8 y 9, esta última disponible actualmente en Release Candidate.
Al proceder a la apertura de las Developer Tools lo primero que vamos a apreciar es la existencia de las pestañas HTML, CSS, Consola, Script, Generador de Perfiles y Red.
Además, revisando los menús, podemos observar que disponemos de opciones interesantes como por ejemplo la posibilidad de indicar el tipo de navegación que deseamos realizar, siendo posible seleccionar el modo de explorador que deseamos ejecutar (IE 7, IE 8, IE 9 o vista compatibilidad IE 9) o la gestión de Caché o Cookies a realizar.
Vamos a empezar hablando de una simple pero útil opción que encontramos en el menú Buscar denominada Seleccionar elemento con un clic (Control + B). A través de ella vamos a poder seleccionar la sección de código que deseemos con un simple clic, lo que se traducirá en una selección inmediata de dicho elemento en la vista diseño y a la inversa. Esto es, si nos situamos en vista diseño sobre un elemento, se seleccionará su zona de código correspondiente en vista código HTML. Para mostraros un ejemplo de uso, procedemos a situarnos sobre un enlace (dentro de una lista de enlaces) en el sitio SharePoint www.puntocompartido.com. Esta acción se ha traducido rápidamente en la selección de la celda HTML que hace referencia a dicho enlace.
Otra de las posibilidades que encontramos es la de deshabilitar momentáneamente determinados elementos de la página, para poder llevar a cabo una inspección más cómoda tanto de carácter visual como del comportamiento de nuestros sitios. Esto va a permitir por ejemplo activar o desactivar el Bloqueador de Elementos Emergentes o los scripts que pueden estar degradando el rendimiento de nuestros sitios motivado por una larga ejecución de los mismos, o por hecho de comprobar el soporte y compatibilidad de un sitio web sin JavaScript.
Para poder hacer lo indicado, disponemos del menú Deshabilitar a través del cual será posible entre otras acciones desactivar las hojas de estilo que se estén aplicando en nuestros sitios. En la siguiente imagen hemos procedido a mostrar lo indicado, deshabilitando las hojas de estilo del sitio de SharePoint www.puntocompartido.com.
Otro ejemplo, de lo comentado ha sido proceder a deshabilitar los scripts del sitio puntocompartido, para a continuación, con una rápida comprobación del resultado obtenido, poder observar que las funciones de JavasScript que utilizaba dicho sitio dejaban de funcionar. Eso sí, para activar esta funcionalidad, los sitios han de estar agregados como sitios de confianza (Trusted Sites) en las opciones de seguridad de Internet Explorer.
Continuaremos esta serie de entradas para seguir informándoos sobre las Developer Tools que IE9 pone a nuestra disposición y que como veréis pueden ser de suma utilidad.
Autor del artículo: Rubén Alonso Cebrián
Descripción de funcionalidades
Antes de ver la parte más práctica de las Developer Tools, queremos indicar de forma teórica cuales son sus principales características o puntos fuertes de uso:
- Integradas y fáciles de usar
Integradas, porque cada instalación de Internet Explorer viene “de serie” con una instancia de las Developer Tools que nos va a permitir realizar depuración de los sitios web explorados. Se dispone además de la ventaja de poderlas utilizar cuando necesitemos limitar el impacto en el rendimiento que pueda producir un posible mal uso del código o de la programación existente que interprete el navegador. Fáciles de usar, gracias a una interfaz sencilla que además nos va a permitir realizar depuración de scripts para un determinado proceso del navegador en lugar de habilitar la depuración para toda la aplicación Internet Explorer.
- Interfaz visual para la plataforma
Mediante la interfaz visual proporcionada podemos analizar y observar los códigos Scripts, HTML, CSS, etc. que se ejecutan dentro de Internet Explorer lo que nos va a permitir obtener de forma cómoda y rápida una visualización de la estructura de nuestros sitios. Esto nos repercute positivamente, reduciendo el tiempo que invertimos muchas veces en depurar determinados sitios dinámicos, donde la inspección de los mismos a través del código fuente no es fácil. Piénsese, también en aquellos casos donde el comportamiento de una determinada funcionalidad que se ejecuta en Internet Explorer, requiere de un análisis profundo que no puede proporcionarnos una herramienta de edición genérica como por ejemplo el simple pero todopoderoso Bloc de Notas.
- Habilitar experimentación rápida
Cuando se habla de experimentación rápida, siempre me viene a la mente algún diseñador realizando cambios sobre la estructura de una página, probando algún nuevo diseño o mejorando un determinado código. El proceso, antes de la existencia de las Developer Tools, consistía en editar el código, guardarlo y a continuación refrescar la página en el navegador, para más tarde volver a repetir todo el proceso. Ahora, mediante el uso de las Developer Tools, podemos acotar acortar este proceso editando nuestros sitios para ver los cambios de forma inmediata.
- Optimización del rendimiento de las aplicaciones
Mediante las Developer Tools vamos a poder identificar y solucionar posibles problemas potenciales de rendimiento. Gracias al analizador de scripts, es posible recopilar estadísticas y procesarlas en un informe que nos proporcione datos valiosos referidos al rendimiento. Ejemplos de ello pueden ser análisis del tiempo de ejecución invertido para la carga de determinada página web o el número de veces que se ha realizado una llamada a una determinada función JavaScript.
Bien, pasemos a la parte práctica. Para poder activar las herramientas de desarrollo, tan sólo hemos de proceder a la pulsación de la tecla F12 desde el navegador Internet Explorer. Recuerde que las Developer Tools se encuentran presentes en las versiones del navegador Internet Explorer 8 y 9, esta última disponible actualmente en Release Candidate.
Al proceder a la apertura de las Developer Tools lo primero que vamos a apreciar es la existencia de las pestañas HTML, CSS, Consola, Script, Generador de Perfiles y Red.
Además, revisando los menús, podemos observar que disponemos de opciones interesantes como por ejemplo la posibilidad de indicar el tipo de navegación que deseamos realizar, siendo posible seleccionar el modo de explorador que deseamos ejecutar (IE 7, IE 8, IE 9 o vista compatibilidad IE 9) o la gestión de Caché o Cookies a realizar.
Vamos a empezar hablando de una simple pero útil opción que encontramos en el menú Buscar denominada Seleccionar elemento con un clic (Control + B). A través de ella vamos a poder seleccionar la sección de código que deseemos con un simple clic, lo que se traducirá en una selección inmediata de dicho elemento en la vista diseño y a la inversa. Esto es, si nos situamos en vista diseño sobre un elemento, se seleccionará su zona de código correspondiente en vista código HTML. Para mostraros un ejemplo de uso, procedemos a situarnos sobre un enlace (dentro de una lista de enlaces) en el sitio SharePoint www.puntocompartido.com. Esta acción se ha traducido rápidamente en la selección de la celda HTML que hace referencia a dicho enlace.
Otra de las posibilidades que encontramos es la de deshabilitar momentáneamente determinados elementos de la página, para poder llevar a cabo una inspección más cómoda tanto de carácter visual como del comportamiento de nuestros sitios. Esto va a permitir por ejemplo activar o desactivar el Bloqueador de Elementos Emergentes o los scripts que pueden estar degradando el rendimiento de nuestros sitios motivado por una larga ejecución de los mismos, o por hecho de comprobar el soporte y compatibilidad de un sitio web sin JavaScript.
Para poder hacer lo indicado, disponemos del menú Deshabilitar a través del cual será posible entre otras acciones desactivar las hojas de estilo que se estén aplicando en nuestros sitios. En la siguiente imagen hemos procedido a mostrar lo indicado, deshabilitando las hojas de estilo del sitio de SharePoint www.puntocompartido.com.
Otro ejemplo, de lo comentado ha sido proceder a deshabilitar los scripts del sitio puntocompartido, para a continuación, con una rápida comprobación del resultado obtenido, poder observar que las funciones de JavasScript que utilizaba dicho sitio dejaban de funcionar. Eso sí, para activar esta funcionalidad, los sitios han de estar agregados como sitios de confianza (Trusted Sites) en las opciones de seguridad de Internet Explorer.
Continuaremos esta serie de entradas para seguir informándoos sobre las Developer Tools que IE9 pone a nuestra disposición y que como veréis pueden ser de suma utilidad.
Autor del artículo: Rubén Alonso Cebrián
 |
Publicado por: Angel Carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
