Aproximadamente una semana después de su publicación, una de las características que más me ha gustado en la ‘beta de Internet Explorer 9’ es la implementación de las ‘Herramientas de desarrollo’.
Dichas herramientas nos permitirán entre otras cosas, poder modificar el código HTML en tiempo real, acceder a todas las propiedades del árbol DOM e incluso realizar depuración de código Javascript.
Este artículo se centrará únicamente en la modificación de código HTML, dejando a un lado la depuración de código Javascript para otro artículo.
Para la visualización del panel de ‘Herramientas de desarrollo’, desde el cual realizaremos todas las operaciones, es necesario presionar ‘F12’ o activar la opción en el menú desplegable que se ve a continuación.
Una vez activo se nos abrirá una nueva ventana, la cual por comodidad, recomiendo anclar al navegador pulsando Control+P.
Para la modificación de código HTML tenemos tres alternativas que son, por un lado la localización directamente a través del árbol DOM del contenido que deseamos modificar, por otro lado la utilización del buscador situado en el lateral derecho, y por último la utilización del puntero del ratón para la selección del elemento deseado.
Una vez más, aconsejo la utilización del puntero para la realización de este tipo de tareas, ya que resulta mucho más cómodo y rápido.
Para activar esta característica, es necesario hacer clic en ‘Buscar -> Seleccionar elemento con un clic’, o pulsar Control+B.
Una vez hayamos realizado el paso anterior, podremos seleccionar en nuestro navegador el elemento a modificar. Si os fijáis bien, veréis que Internet Explorer lo pinta de otro color para facilitarnos su búsqueda.
Ahora podemos modificar sus propiedades, estilos, agregar, eliminar atributos, etcétera. Nosotros en este ejemplo realizaremos un cambio de color a la barra de búsqueda de Bing, añadiéndole el siguiente estilo: style=”background-color:red;”.
De este modo podemos cambiar el aspecto visual, incluso la funcionalidad o validaciones Javascript que dichas páginas realicen. Sin duda una característica muy útil, sobre todo para la comunidad de desarrolladores web.
¡Hasta otra!
No comments:
Post a Comment