Categorías destacadas
Artículo
|
Developer Tools en Internet Explorer 9 (III de VII) |
Damos entrada al tercero de los artículos de la serie que estamos dedicando a las Developers Tools, y que como venimos comentando en las anteriores entradas de la serie, presentan como objetivo fundamental hacer al usuario conocedor de las funcionalidades que estas herramientas aportan desde su aparición en la versión 8 de Internet Explorer.
Sigamos por lo tanto describiendo las mencionadas funcionalidades existentes en el Panel de Contenido Primario. Tras habernos quedado en la entrada anterior abordando los aspectos relacionados con la Pestaña Consola, continuamos en esa línea.
Descripción de funcionalidades – Panel de Contenido Primario (continuación)
4º - Pestaña Script
La pestaña Script está preparada para permitirnos realizar depuración avanzada de secuencias de comandos JScript. Hasta ahora, las pestañas disponibles que hemos visto en el Panel de Contenido Primario se centraban principalmente en las posibilidades que proporcionan las herramientas de desarrollo para realizar sitios atractivos y dinámicos, mediante el uso de CSS sin utilizar JScript, aunque la mayoría de los sitios complejos que se desarrollan hoy día requieren de ejecución de secuencias de comandos.
Debido a esto, se hace necesario contar con un buen depurador para poder manejar la programación que pueda demandar un sitio web. Y eso es precisamente lo que aportan las herramientas de desarrollo mediante el comando Script. Haciendo uso de éste vamos a poder depurar todas las secuencias de comandos disponibles en una página, ya sea bien accediendo a archivos separados del sitio (por ejemplo archivos externos *.js), o bien haciéndolo a secuencias de comandos embebidas en la propia página web. Para ello, el comando dispone de un selector de scripts a través de un menú de lista desplegable en la barra de herramientas. Observe como en la siguiente imagen hemos procedido a seleccionar un script específico mediante el selector de scripts.
1º - Habilitar la depuración de scripts
Para iniciar el proceso de depuración de nuestros sitios con Internet Explorer debe asegurarse que se permite la depuración de scripts por parte del navegador. Esta opción puede configurarse mediante las Opciones Avanzadas de Internet Explorer desactivando la casilla de verificación Deshabilitar la depuración de Scripts (Internet Explorer).
A continuación, tan sólo hay que hacer clic en el botón Iniciar depuración disponible en las herramientas de desarrollo en el comando Scripts, momento en el que se refrescará la página (observe que este hecho desancla las herramientas de desarrollo) para iniciar dicho proceso. Será este punto donde dispondremos de las funcionalidades aportadas por el depurador. Recuérdese que en cualquier momento es posible iniciar o detener las herramientas de desarrollo a través del botón Iniciar/Detener depuración.
2º- Panel Consola
Mediante el uso del Panel Consola podemos proceder a la introducción de secuencias de código personalizado para probarlo en tiempo de depuración. Para ello, debe introducirse el código deseado y proceder a su ejecución mediante el botón Ejecutar script. Para la inserción de código se dispone de los modos de una línea o de múltiples líneas. En el ejemplo mostrado en la imagen siguiente hemos procedido a registrar un mensaje de salida a través de la consola donde se devuelve el valor de la variable m.
3º- Panel Ver
También podemos utilizar el Panel Ver para poder inspeccionar una lista de variables y su valor en tiempo de ejecución. A diferencia del Panel Variables Locales, que nos muestra todo el listado de variables que se ejecutan en el código, más la visualización de los métodos o funciones disponibles, el Panel Ver nos permite registrar una lista de variables personalizadas. En la siguiente imagen, hemos optado por incluir de forma manual (tan simple como hacer clic con el ratón) las variables m y f, separándolas del resto de variables a la hora de realizar una inspección, lo que permite de forma limpia y clara visualizar el valor de retorno devuelto para cada una de ellas.
4º- Panel Variables Locales
En el caso de que se desee realizar la depuración de una forma más detallada, y siempre que tengamos dudas de donde introducir los puntos de inspección en el código, pueden utilizarse los botones disponibles en la barra de herramientas del comando Script. Son varias las opciones de depuración posibles: Paso a paso por instrucciones, paso a paso por procedimientos o paso a paso para salir. Según se vaya avanzando en el proceso de depuración, es posible ir observando el resultado de la ejecución de código a través del panel Variables locales, desde el que podemos inspeccionar entre otros, el valor que se va obteniendo para cada una de las variables utilizadas en el código. La siguiente imagen nos muestra el valor retornado para las variables f y m, destinadas a recuperar información de fechas en el sistema.
5º- Panel Pila de Llamadas
A través del uso del Panel de Pila de Llamadas, se nos proporcionará una lista de contexto de ejecución cuando el depurador detenga la ejecución en un punto de interrupción, procediéndonos a informar de cuál ha sido la naturaleza de la llamada de ejecución (si ha sido un evento onChange, una ejecución de código global en JScript, etc).
6º- Panel Puntos de Interrupción
Para una depuración lo más óptima posible a la hora de controlar la ejecución del código, se puede pausar la ejecución del mismo en los lugares que se consideren apropiados, como por ejemplo dentro de funciones o manejadores de eventos, mediante el uso de puntos de interrupción (breakpoints). Esta es la forma más tradicional y habitual por parte de los programadores, y quizá uno de los puntos fuertes a la hora de depurar los códigos de programación en JScript. Nos referimos al entorno visual proporcionado, depurando el código a través de los tradicionales puntos de inspección.
Situándose en la línea de código que desee, la forma más rápida de introducir un punto de interrupción es la de hacer clic con el botón izquierdo del ratón sobre la parte derecha de la numeración de línea (zona gris), aunque también se puede seleccionar la opción de menú Insertar Punto de Interrupción, como muestra la siguiente imagen, donde podemos observar la inserción de dos puntos de interrupción, uno de ellos de carácter condicional.
Damos por finalizada aquí la tercera entrada de esta serie sobre las Developer Tools. Seguiremos aportándoos información de valor en las siguientes entradas hasta completar la serie.
Autor del artículo: Rubén Alonso Cebrián
Sigamos por lo tanto describiendo las mencionadas funcionalidades existentes en el Panel de Contenido Primario. Tras habernos quedado en la entrada anterior abordando los aspectos relacionados con la Pestaña Consola, continuamos en esa línea.
Descripción de funcionalidades – Panel de Contenido Primario (continuación)
4º - Pestaña Script
La pestaña Script está preparada para permitirnos realizar depuración avanzada de secuencias de comandos JScript. Hasta ahora, las pestañas disponibles que hemos visto en el Panel de Contenido Primario se centraban principalmente en las posibilidades que proporcionan las herramientas de desarrollo para realizar sitios atractivos y dinámicos, mediante el uso de CSS sin utilizar JScript, aunque la mayoría de los sitios complejos que se desarrollan hoy día requieren de ejecución de secuencias de comandos.
Debido a esto, se hace necesario contar con un buen depurador para poder manejar la programación que pueda demandar un sitio web. Y eso es precisamente lo que aportan las herramientas de desarrollo mediante el comando Script. Haciendo uso de éste vamos a poder depurar todas las secuencias de comandos disponibles en una página, ya sea bien accediendo a archivos separados del sitio (por ejemplo archivos externos *.js), o bien haciéndolo a secuencias de comandos embebidas en la propia página web. Para ello, el comando dispone de un selector de scripts a través de un menú de lista desplegable en la barra de herramientas. Observe como en la siguiente imagen hemos procedido a seleccionar un script específico mediante el selector de scripts.
1º - Habilitar la depuración de scripts
Para iniciar el proceso de depuración de nuestros sitios con Internet Explorer debe asegurarse que se permite la depuración de scripts por parte del navegador. Esta opción puede configurarse mediante las Opciones Avanzadas de Internet Explorer desactivando la casilla de verificación Deshabilitar la depuración de Scripts (Internet Explorer).
A continuación, tan sólo hay que hacer clic en el botón Iniciar depuración disponible en las herramientas de desarrollo en el comando Scripts, momento en el que se refrescará la página (observe que este hecho desancla las herramientas de desarrollo) para iniciar dicho proceso. Será este punto donde dispondremos de las funcionalidades aportadas por el depurador. Recuérdese que en cualquier momento es posible iniciar o detener las herramientas de desarrollo a través del botón Iniciar/Detener depuración.
2º- Panel Consola
Mediante el uso del Panel Consola podemos proceder a la introducción de secuencias de código personalizado para probarlo en tiempo de depuración. Para ello, debe introducirse el código deseado y proceder a su ejecución mediante el botón Ejecutar script. Para la inserción de código se dispone de los modos de una línea o de múltiples líneas. En el ejemplo mostrado en la imagen siguiente hemos procedido a registrar un mensaje de salida a través de la consola donde se devuelve el valor de la variable m.
3º- Panel Ver
También podemos utilizar el Panel Ver para poder inspeccionar una lista de variables y su valor en tiempo de ejecución. A diferencia del Panel Variables Locales, que nos muestra todo el listado de variables que se ejecutan en el código, más la visualización de los métodos o funciones disponibles, el Panel Ver nos permite registrar una lista de variables personalizadas. En la siguiente imagen, hemos optado por incluir de forma manual (tan simple como hacer clic con el ratón) las variables m y f, separándolas del resto de variables a la hora de realizar una inspección, lo que permite de forma limpia y clara visualizar el valor de retorno devuelto para cada una de ellas.
4º- Panel Variables Locales
En el caso de que se desee realizar la depuración de una forma más detallada, y siempre que tengamos dudas de donde introducir los puntos de inspección en el código, pueden utilizarse los botones disponibles en la barra de herramientas del comando Script. Son varias las opciones de depuración posibles: Paso a paso por instrucciones, paso a paso por procedimientos o paso a paso para salir. Según se vaya avanzando en el proceso de depuración, es posible ir observando el resultado de la ejecución de código a través del panel Variables locales, desde el que podemos inspeccionar entre otros, el valor que se va obteniendo para cada una de las variables utilizadas en el código. La siguiente imagen nos muestra el valor retornado para las variables f y m, destinadas a recuperar información de fechas en el sistema.
5º- Panel Pila de Llamadas
A través del uso del Panel de Pila de Llamadas, se nos proporcionará una lista de contexto de ejecución cuando el depurador detenga la ejecución en un punto de interrupción, procediéndonos a informar de cuál ha sido la naturaleza de la llamada de ejecución (si ha sido un evento onChange, una ejecución de código global en JScript, etc).
6º- Panel Puntos de Interrupción
Para una depuración lo más óptima posible a la hora de controlar la ejecución del código, se puede pausar la ejecución del mismo en los lugares que se consideren apropiados, como por ejemplo dentro de funciones o manejadores de eventos, mediante el uso de puntos de interrupción (breakpoints). Esta es la forma más tradicional y habitual por parte de los programadores, y quizá uno de los puntos fuertes a la hora de depurar los códigos de programación en JScript. Nos referimos al entorno visual proporcionado, depurando el código a través de los tradicionales puntos de inspección.
Situándose en la línea de código que desee, la forma más rápida de introducir un punto de interrupción es la de hacer clic con el botón izquierdo del ratón sobre la parte derecha de la numeración de línea (zona gris), aunque también se puede seleccionar la opción de menú Insertar Punto de Interrupción, como muestra la siguiente imagen, donde podemos observar la inserción de dos puntos de interrupción, uno de ellos de carácter condicional.
Damos por finalizada aquí la tercera entrada de esta serie sobre las Developer Tools. Seguiremos aportándoos información de valor en las siguientes entradas hasta completar la serie.
Autor del artículo: Rubén Alonso Cebrián
 |
Publicado por: Angel Carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
