Share
Eche un vistazo a las nuevas y fantásticas funciones de Chrome 4 para desarrolladores, como la compatibilidad multiplataforma, la increíble integración del inspector web y las nuevas y útiles extensiones. Cada vez es más difícil negar a Chrome el título como el nuevo navegador para desarrolladores web. Si no está del todo allí todavía, será pronto!
Google Chrome ha ganado una respetable cuota de mercado, superando a Safari para convertirse en el 3er navegador más popular en diciembre, con tiempos de carga rápidos, un motor de JavaScript ágil, una sólida base de WebKit y respaldo de grandes nombres. Sin embargo, para los desarrolladores, Firefox ha sido el amor de muchos debido a su capacidad para ejecutarse en cualquier sistema operativo y debido a su rica oferta de complementos de desarrollo web, como Firebug y la Barra de herramientas para desarrolladores web. Pero es importante probar JavaScript en todos los navegadores, y tener un conjunto robusto de herramientas en cada uno (incluido Internet Explorer), es precisamente lo que los desarrolladores necesitan para aprovechar al máximo su código..
Por suerte para nosotros, la gente de Google ha estado trabajando duro para hacer que Chrome sea multiplataforma, integre el fantástico Inspector web de WebKit y agregue extensiones, haciendo de Chrome 4 una herramienta increíblemente útil para el desarrollo web. En este tutorial, demostraré algunas de las características que hacen de Chrome 4 una gran adición al cinturón de utilidad para desarrolladores web.
A partir del 25 de enero, Chrome 4 se lanzó oficialmente como estable para Windows. Los usuarios de Mac y Linux, sin embargo, tenemos que ser un poco más valientes para experimentar todo lo que Chrome 4 tiene para ofrecer. Los usuarios de Mac necesitan descargar la versión "dev", y los usuarios de Linux la versión "beta", ¡y vale la pena! Consulte los siguientes enlaces para obtener una copia de Chrome para su sistema operativo que sea compatible con todo lo que veremos en este artículo:
¡Ahora vamos a entrar en la cuestión de lo esencial! En Firefox, Firebug es una bendición para los desarrolladores, ya que proporciona una consola de depuración, manipulación de HTML y CSS, perfiles de JavaScript y muchas otras bondades. La gente de WebKit se dio cuenta y en los últimos años ha estado perfeccionando un conjunto de herramientas llamado el Inspector Web, que ofrece un conjunto similar de características a Firebug. Dentro de Chrome 4, el Inspector web está etiquetado como "Herramientas de desarrollo".
Además de Chrome 4, el inspector web ha estado en acción durante un tiempo desde versiones anteriores de Chrome y Safari, aunque está un poco oculto. Para acceder al inspector web en varios navegadores:
Si no ha trabajado con Firebug o la consola de Web Inspector, entonces se está perdiendo una gran manera de ayudar a depurar JavaScript. La consola de JavaScript tiene varias funciones importantes, como capturar errores y presentarlos en un formato útil, probar bits cortos de JavaScript y como un lugar conveniente para registrar información útil como valores de variables y tiempos de ejecución. En términos prácticos, uso esta herramienta regularmente para evaluar el rendimiento de mis programas y para garantizar que ciertas variables se calculen correctamente.
Además de la consola de JavaScript, siempre es bueno tener una herramienta que le permite ver rápidamente el HTML y la información de estilo de elementos particulares en la página. El panel Elementos del inspector web ofrece una vista de estructura de árbol del Modelo de objetos de documento (DOM), que le permite profundizar en el documento para seleccionar un elemento de interés. También puede acceder a la información de un determinado objeto haciendo clic derecho en un elemento dentro del navegador y seleccionando "Inspeccionar elemento".
Finalmente, debo señalar que el panel Elementos permite mucho más que una simple inspección. Puede modificar y agregar estilos, editar html y, en las últimas versiones, ver escuchas de eventos adjuntas a un elemento DOM seleccionado. Todas estas características pueden ser muy útiles cuando se trata de pequeños caprichos que no logra entender..
La última característica que me gustaría resaltar en el Inspector Web / Herramientas de desarrollo es la pestaña "Recursos". Si ha trabajado con la pestaña "Red" de Firebug, notará varias similitudes. Esencialmente, la pestaña Recursos proporciona un desglose de toda la información que se intercambia entre su navegador y el servidor, desde las imágenes al código JavaScript y al propio documento. También muestra un montón de información útil, como:
Una elegante herramienta que permite una fácil inspección de la velocidad de la página, la pestaña Recursos puede ayudarlo a identificar y aplastar cuellos de botella en el rendimiento. Pruébelo y vea dónde su página es demasiado gruesa, luego reduzca las imágenes y el código para proporcionar una mejor experiencia a sus usuarios.!
Una visión general completa del Inspector Web / Herramientas de desarrollo podría fácilmente ser un tutorial en sí mismo, ¡pero tenemos más terreno que cubrir! Recomiendo encarecidamente consultar los siguientes recursos para obtener más información:
Ahora, aunque siempre me ha impresionado la velocidad de Safari 4 y Chrome en comparación con Firefox, ambos carecen de una característica crítica: los complementos. En Chrome 4, todo cambia con la adición de "extensiones". Puede agregar funcionalidad a Chrome descargando e instalando extensiones o usando las herramientas estándar de comercio: HTML, CSS y JavaScript, para escribir las suyas. Las extensiones se pueden descargar desde el repositorio de extensiones de Chrome y deben ser bastante simples de instalar. Ya se han creado una serie de extensiones muy convincentes que ayudan al desarrollo web, desde la validación rápida hasta las pruebas de resolución. Echemos un vistazo a algunos.
Un desarrollador web nunca puede estar lo suficientemente obsesionado con el rendimiento, y cuanto más herramientas mejor identifiquen el rendimiento lento. Ahí es donde entra en juego Speed Tracer, una extensión de Chrome desarrollada por Google. Speed Tracer lleva el panel de "Recursos" al siguiente nivel al proporcionar una visualización del tiempo que lleva ejecutar tareas de bajo nivel, como renderizar CSS o analizar HTML y JavaScript. Recomiendo encarecidamente echar un vistazo a un video de demostración de Speed Tracer elaborado por la gente de Google para tener una mejor idea de cómo puede ayudarlo a mejorar el rendimiento de sus aplicaciones..
Al pasar de Firefox a Chrome, una extensión que todos buscarán es un reemplazo de la fantástica barra de herramientas para desarrolladores web. Para aquellos que no lo saben, la barra de herramientas para desarrolladores web se ocupa de las tareas que Firebug no tenía la intención de manejar, como la validación rápida de HTML y CSS, la capacidad de deshabilitar rápidamente JavaScript o imágenes, y una herramienta para verificar los enlaces. Todas las funciones se manejan con estilo por Pendule, que ofrece gran parte de la funcionalidad principal de la Barra de herramientas para desarrolladores web (no del todo), a la vez que ofrece algunas funciones propias, como un selector de color..
Los desarrolladores web a menudo necesitan asegurarse de que sus diseños funcionen en una variedad de resoluciones. La prueba de resolución permite a los desarrolladores cambiar el tamaño de la ventana de su navegador de manera eficiente a una serie de resoluciones comunes para una prueba rápida y fácil. La última versión incluso le permite abrir múltiples ventanas en diferentes resoluciones con solo un par de clics. La prueba de resolución es fantástica para asegurarse de que su público objetivo vea la página que desea que vean.
Hay ocasiones en las que es necesario no solo capturar una captura de pantalla de la parte visible actual de un sitio web, sino una captura de pantalla de toda la página. Por ejemplo, es posible que desee imprimir una página completa para una revisión crítica por pares o para demostrar en su cartera. Anteriormente utilicé una herramienta de escritorio para esto, pero ahora la captura de pantalla de la página web hace un buen trabajo capturando capturas de pantalla de página completa en unos pocos clics.
¿Alguna vez te has topado con una página fantástica y te preguntas "qué están usando para construir esto?" Lo hago, y a menudo me encuentro hurgando en el código fuente tratando de averiguar quién es el hombre detrás de la cortina. Si bien es un ejercicio de entrenamiento útil, y necesario si usted De Verdad Para saber qué está pasando, Chrome Sniffer generalmente puede darle una instantánea de qué marcos de JavaScript y PHP están en uso para una página en particular. Por ejemplo, navegar a NetTuts y Chrome Sniffer nos informa que se ejecuta en Wordpress usando Google Analytics y jQuery.
¡El futuro del desarrollo web sigue pareciendo más y más brillante! Si bien hace solo unos años teníamos un conjunto limitado de herramientas para depurar JavaScript, manipular CSS y ver HTML, hoy tenemos una variedad de opciones poderosas. Ahora que Google Chrome se ha convertido en multiplataforma, que integra totalmente el WebKit Web Inspector y agrega extensiones, es una herramienta versátil para ayudar a los desarrolladores a mejorar sus propias páginas. Les animo a todos a que descarguen una copia para ustedes mismos y les den una oportunidad para ver si puede ayudarles a mejorar sus páginas, luego regresen aquí y compartan sus complementos y herramientas favoritos con el resto de nosotros.!
¿Sabía que puede ganar hasta $ 600 por escribir un tutorial PLUS y / o un screencast para nosotros?? Estamos buscando tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tiene la habilidad, contacte a Jeffrey en [email protected].
Tenga en cuenta que la compensación real dependerá de la calidad del tutorial final y del screencast.
Accentsconagua