En esta entrada os voy a mostrar una serie de secretos muy interesantes para los desarrolladores, que nos permitirán agilizar los trabajos web, así como sacar provecho al máximo de las herramientas  que poseen los diferentes navegadores para depurar y revisar los códigos (HTML, Javascript, CSS) de las páginas que visitas o creas.

Antiguamente, la depuración de componentes de las páginas era una tarea tediosa, al menos para mi. Muchas depuraciones en javascript se hacían con el comando Alert, mediante diferentes ventanas popup podíamos ver los valores que determinaban ciertos comportamientos de nuestras aplicaciones.

Hoy en día, por fortuna eso ha cambiado, y disponemos de verdaderos entornos de depuración que agilizan el desarrollo web. Pero que no exprimimos, ni sacamos partido. Comencemos categorizando estos secretos.

La gran mayoría de los navegadores proporcionan herramientas de depuración y acceso a los elementos web que han sido descargados.

Las funcionalidades genéricas son: Consola, Elementos/Inspector/HTML, Estilos, Depurador, Profiler (analiza el rendimiento javascript), Herramientas de red (ver el tráfico, carga, etc).

LOS SECRETOS QUE NO TEN HAN CONTADO

Para acceder a estas herramientas incorporadas en los navegadores, en la mayoría de las ocasiones se realiza pulsando la tecla F12, o pulsando  «Cmd» ⌘ «Option» ⌥ y «I» en el Mac. También podemos usar los menús superiores o contextuales (inspeccionar elemento). En navegadores como Safari, tendremos que activar las herramientas de desarrollo, en preferencias avanzadas.

En otras ocasiones, también podemos aumentar y complementar las características de estos entornos, agregando complementos o plugins con bastante calidad. Entre ellos destaca Firebug

Estas herramientas de desarrollo, se encuentran mejorando constantemente.

Pero lo que pocos saben es que existen versiones de navegadores específicas para el desarrollo web.

Podemos destacar la versión experimental de Canary de Chrome.

Visitar web de Canary

Solo como anécdota, os recuerdo que existe un chrome llamado Chromium y que es un proyecto de navegador web de código abierto, a partir del cual se basa el código fuente de Google Chrome. Entre otros detalles Chromium sólo admite Vorbis, Theora y codecs WebM para las etiquetas de audio y video de HTML5, mientras que Google Chrome admite además AAC y MP3. Algunas distribuciones de Linux pueden añadir soporte para los códecs de otros a sus versiones personalizadas de Chromium.

Sigamos … Sobre google (normal), tecleando la dirección: chrome://flags/

Aparecerán una serie de funciones experimentales. Podemos activar la opcion Habilitar experimentos en Herramientas para desarrolladores Mac, Windows, Linux, Chrome OS . Esto habilita experimentos en las Herramientas para desarrolladores. Podemos utilizar el panel de configuración de las Herramientas para desarrolladores para alternar entre experimentos individuales. #enable-devtools-experiments, recuerda relanzar el navegador para aplicar los cambios.

Respecto a otros navegadores como Firefox, tenemos variantes como Firefox Aurora, que muestra las últimas tendencias que se incorporarán en Firefox.

Respecto a Safari el  Webkit Nightly es un lanzamiento nocturno de Safari. Como se trata de una versión nocturna (nightly), es menos estable que los otros navegadores. Sin embargo, con las herramientas de desarrollo de Safari se pueden corregir y estudiar gran parte de los problemas actuales. Webkit Nightly se puede ejecutar junto a Safari.

Respecto a Microsoft Explorer, sólamente podremos probar sus diferentes versiones, y betas. Aquellos navegadores que no posean la barra de desarrollo pulsando la tecla f12, tendremos que instalar el complemento Explorer developer toolbar adicional para explorer.

Trucos de Consola

 es una herramienta extremadamente útil para ver la salida de depuración sin tener que utilizar las alertas, pero hay algunos otros métodos que puede utilizar para la salida de información para facilitar la visualización de la consola.

 funcionará estilo printf. Así que podemos  hacer cosas como esta: 

 . Podemos utilizar 

 para ver mensajes de información;

 para emitir mensajes de depuración;

 mensajes de advertencia  y 

 mensajes de error. También podemos utilizar el patrón c% al utilizar el segundo argumento como un parámetro. Por ejemplo: 

 .

Firebug mostrará diferentes iconos para estas variaciones, así como caja de los mensajes en fondos de colores.

Firefox mostrará un pequeño icono gris junto a información, advertirá y mostrará mensajes de error para indicar elementos que requieren mayor atención.

Chrome y Safari no mostrarán un icono de información, pero se mostrará un icono azul de depuración, un icono amarillo de advertencia y un icono rojo para el error.

 se puede utilizar para mostrar datos de salida de una matriz de matrices o una lista de objetos en un formato tabular.

 se puede utilizar para poner a prueba si las expresiones son verdaderas o falsas.

Console.time() se puede emplear para emplear un temporizador en la consola. Con console.timeEnd(etiqueta) detenerlo. console.timeStamp para medir cuando se ejecuto una determinada parte de código.

En Chrome a pesar de la consola tiene su propia pestaña, es posible abrirla desde cualquier ficha pulsando la tecla de escape (logicamente si antes hemos pulsado f12).

En Safari, la consola se encuentra en la parte inferior de las herramientas para desarrolladores. La tecla de escape se utiliza para alternar la visibilidad del registro de la consola En Firefox, se puede navegar rápidamente a la consola pulsando Ctrl, Shift y K en Windows o Comando ⌘, ⌥ Opción y K en el mac. Trucos en la Inspección En la era del diseño Responsive, es importante ver cómo nuestros sitios se visualizarán en pantallas de cualquier tamaño. A pesar de que podemos cambiar el tamaño del navegador, existen algunas herramientas adicionales disponibles para nosotros en las herramientas de desarrollo.

En el panel ‘Configuración‘ de las herramientas de desarrollo de Chrome (que se encuentra haciendo clic en el engranaje en la esquina inferior derecha de las herramientas) bajo ‘Overrides‘ se encuentra ‘Métricas de dispositivos» o «Device Metrics» que permite especificar una anchura y altura, junto con una tamaño de la escala de fuente. También podemos acoplar las herramientas de desarrollo a la derecha de la página y los redimensionar al tamaño que deseamos probar.

Las herramientas de desarrollo de Firefox es una herramienta para comprobar  el sitio en cualquier dimensión. La herramienta «Modo Diseño Sensible ‘se puede encontrar en la cabecera de la parte superior derecha de las herramientas de desarrollo.  Firefox también proporciona una opción para rotar las dimensiones para que podamos probar tanto en modos de landscape y  retrato.

Respecto a las fuentes. Firefox viene con un inspector de fuente, que le permite ver las fuentes utilizadas en el elemento que actualmente se está inspeccionando.

Firebug proporciona una información de consejos para cualquier declaración de tipo de letra que aparece en el CSS.

Trucos en la edición de elementos

Si tenemos la necesidad de modificar el margen, el relleno, la anchura o la altura de una web mediante CSS, podemos utilizar las teclas del cursor para aumentar / disminuir el tamaño. Simplemente utilizaremos las teclas de cursor (arriba y abajo) para aumentar / disminuir en una unidad de 1.

Podemos aumentar / disminuir en unidades de 10 manteniendo pulsada la tecla «Shift» mientras presionamos la teclas arriba y abajo del cursor, y se puede aumentar / disminuir en una unidad de 0,1 manteniendo presionada la tecla «Alt» mientras pulsamos las teclas el cursor arriba y abajo.

También podemos aumentar / disminuir en una unidades de 100, manteniendo pulsada la tecla «Shift» mientras pulsamos Página-Up y Page-Down.

Estos accesos directos son especialmente útiles cuando no estamos seguros del tamaño y disposición exacta que deseamos ver. Permiten corregir en tiempo real las «Distorsiones CSS», para cambiarlas posteriormente en la página web a subir.

Otro curioso cambio que podemos realizar con estas herramientas es la posibilidad de tanto en Chrome y Safari de arrastrar y soltar elementos en un orden diferente. Basta con hacer clic y mantener presionado en el elemento que desee mover y arrastrarlo hasta donde deseemos moverlo. Aparecerá una línea que muestra dónde se colocará.

Respecto al Styling Activo en eventos (hover, focus, visited), google Chrome permite cambiar las pseudo-clases. En la Columna de la derecha de la pestaña elementos, en la parte superior se pueden marcar los checkbox para los distintos eventos. En Firebug esto esta más escondido y es necesario pulsar la flecha desplegable de style.

En Firefox, aparece como un menu desplegable al lado del DOM, cuando se hace clic en el modo inspeccionar. En Opera se muestra como un botón con opciones desplegables. En Safari en la opción «Forced Pseudo-Classes» a modo de menu.

Curiosidades sobre  el rendimiento y mejoras WPO a considerar para los SEO

Cada navegador permite desactivar la caché de la página web, asegurando que sus recursos provienen de un servidor cada vez. Esto es útil para evitar «sustos», puesto que podemos estar viendo una representación antigua de la web. En algunos navegadores para borrar la cache, es necesario pulsar la tecla Control+F5

Respecto a la velocidad de carga, podemos emplear el siguiente truco para ordenar las solicitudes de red que se efectúan de forma individual y buscar los posibles cuellos de botella.

Esto se suele realizar en la pestaña «red«. Podemos ordenar campos comunes como nombres, dominios, tipos de recursos, estado de HTTP, tamaños.

Chrome va un paso más allá y permite hacer clic en el encabezado del «Timeline» para mostrar una gama adicional de opciones de ajuste.

• Hora de inicio es la opción predeterminada y ordena por el momento en que se inicia cada solicitud de red.
• Tiempo de Respuesta ordena por el tiempo que se tardó en obtener una respuesta de la solicitud de red.
• Instante final  de  la solicitud que se ha completado.
• Duración, ordena por el momento de petición que se tardó en completar.
• Latencia es la cantidad de tiempo para que el navegador reciba una respuesta después de la petición inicial. Esta opción nos permite ordenar la latencia para ver qué recursos están llevando más tiempo en responder. La  Latencia puede depender de la distancia que el usuario tiene hasta el servidor, y puede ser mejorada mediante la creación de redes de distribución de contenidos (CDN) próximas al usuario. Utilizando concatenación de los archivos CSS y JavaScript, imagenes, etc … podemos reducir el número de recursos necesarios, y por lo tanto la reducción de la latencia total.

Podemos exportar el timeline de red como un archivo HAR. Los archivos HAR (HTTP Archive) se pueden utilizar para una variedad de técnicas de análisis de rendimiento y depuración. El desarrollador puede ejecutar los archivos HAR de forma local, para averiguar que puede suceder.

Por lo que podemos exportar el timeline de la pestaña RED a formato HAR haciendo clic derecho sobre «Save as HAR with content»

ChromeHAR es una herramienta en línea que proporciona la misma interfaz de línea de tiempo de Chrome y se puede utilizar para este propósito.

Chrome muestra en una línea de tiempo o timeline  la velocidad de fotogramas lo que permite la capacidad de depurar un sitio en base a los frames.

Para crear una línea de tiempo , primero es necesario abrir las Herramientas para desarrolladores de Chrome y seleccionar la pestaña «Timeline». En la parte inferior de la pestaña hay una serie de iconos que incluyen un círculo negro que representa el ‘record’. Pulsaremos una vez para activar la grabación de la línea de tiempo y una segunda vez para detener la grabación. Durante la grabación, se puede interactuar con la página de la manera habitual y el modo de fotogramas se grabarán todos los frames la de acción.

Al pasar por las filas de encabezado en la línea de tiempo se muestra la duración del frame, los FPS , el el tiempo de CPU y el tiempo acumulado de las acciones dentro del frame. Al Pasar por encima de los registros, se puede ver un desglose de la duración de cada tarea, junto con otra información útil. Respecto a las solicitudes de red XHR, tanto Chrome como Firebug  si deseamos volver a ejecutar una petición XHR sin tener que recargar la página o volver a ejecutar el evento, podemos hacer clic derecho sobre el recurso y seleccionar «Replay XHR» («Reenviar» en Firebug). XMLHttpRequest (XHR), también referida como XMLHTTP (Extensible Markup Language / Hypertext Transfer Protocol), es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web.

Para los datos transferidos se usa cualquier codificación basada en texto, incluyendo: texto plano, XML, JSON, HTML y codificaciones particulares específicas. La interfaz se implementa como una clase de la que una aplicación cliente puede generar tantas instancias como necesite para manejar el diálogo con el servidor.

El uso más popular, si bien no el único, de esta interfaz es proporcionar contenido dinámico y actualizaciones asíncronas en páginas WEB mediante tecnologías construidas sobre ella como por ejemplo AJAX.

OPCIONES DE DEPURACION

Con Chrome, se puede lograr emular eventos táctiles directamente en el navegador. Para ello el panel de la configuración (el icono de engranaje en la parte inferior derecha de Chrome Developer Tools), selecciona la opción «anulaciones» y elegir la opción «Emular Touch Events».

En Chrome Canary, este reemplazará el cursor con un círculo lo que no sólo se puede saber en qué modo se encuentra, sino también qué  grande puede ser la superficie de un toque de clic.

A veces puede ser útil para hacerse pasar por un navegador o dispositivo diferente para la depuración, especialmente si trabajamos en un sitio que emplea la detección de dispositivos.

Desde Chrome, si abrimos el panel de configuración (el icono de engranaje en la parte inferior derecha) y seleccionamos la opción «Overrides» , encontramos la opción «User Agent». Podemos seleccionar uno de los incorporados en las opciones o seleccionar «Otro» y introducir  el nuestro . Chrome  ajustará el navegador a las dimensiones correctas si se selecciona un dispositivo móvil o tableta – pudiendo ser desactivado en caso de problemas.

Con el navegador podemos usar breakpoints condicionales e interrupciones XHR (depurar peticiones AJAX).

El empleo de breakpoints o puntos de interrupción de Javascript, puede ser muy útil, pero cuando trabajamos con archivos minified, suele ser bastante complicado depurar. Este interesante truco, permite que algunos navegadores puedan un-minify o desefuscar el javascript.

Minificación (también minimización o reducción al mínimo ), en los  lenguajes de programación y sobre todo JavaScript , es el proceso de eliminación de todos los caracteres innecesarios del código fuente sin cambiar su funcionalidad. Es decir desofuscar el código. Aclarar su lógica a nuestros ojos.

En Chrome y Safari, sólo tenemos que seleccionar la pestaña ‘Scripts’, encontrar el archivo correspondiente y luego presionar el botón «{}» (Pretty Print) en el icono situado en el panel inferior. En Internet Explorer, es necesario hacer clic en el icono de la herramienta de la selección hasta encontrar la opción para formatear el JavaScript. Opera aclara automáticamente el JavaScript minified.

Y para rematar…

ANULACIÓN de la geolocalización

La geolocalización permite que tu navegador informe a las páginas web que lo soliciten, sobre los datos de tu localización actual, algo que normalmente se usa para que la información que la página te ofrezca sea filtrada por tu localización; por ejemplo, si visitas Google Maps y Google Chrome sabe donde estás, te mostrará un mapa de tu zona, en vez de una versión genérica.

Puedes permitir que algunos sitios que visitas utilicen la información de tu ubicación para que la información que muestran te resulte más útil. Por ejemplo, si compartes tu ubicación con un sitio especializado en opiniones de restaurantes, el sitio puede personalizar los resultados y mostrar opiniones de restaurantes próximos a tu ubicación. Puedes decidir si quieres compartir tu ubicación con otros sitios o no.

Google Chrome nunca comparte la información de tu ubicación sin tu permiso. De forma predeterminada, cuando te encuentres en un sitio que quiera utilizar la información de tu ubicación, Google Chrome mostrará un mensaje de advertencia en la parte superior de la página. Tu ubicación se envía al sitio solo si haces clic en la opción Permitir que aparece en el mensaje.

Si aceptas compartir tu ubicación con el sitio, aparecerá el icono de ubicación  en la barra de direcciones como recordatorio de que has concedido permiso a este sitio (o a algún elemento insertado en el sitio como, por ejemplo, un mapa) para acceder a tu ubicación. Haz clic en el icono para obtener más información o para eliminar los permisos de acceso a la información sobre ubicación del sitio.

¿Cómo desactivar la geolocalización en Google Chrome?

Se encuentra en:
Haz clic en el menú de Chrome  en la barra de herramientas del navegador.

1. Selecciona Configuración.
2. Haz clic en Mostrar opciones avanzadas…
3. En la sección «Privacidad», haz clic en Configuración de contenido.
4. En el cuadro de diálogo que aparece, desplázate hasta la sección «Ubicación». Selecciona el tipo de permiso predeterminado que quieras establecer para las solicitudes de información sobre la ubicación.
   • Permitir que los sitios realicen un seguimiento de mi ubicación física: selecciona esta opción para permitir el acceso automático de todos los sitios a tu ubicación.
   • Preguntarme cuando un sitio intente realizar un seguimiento de mi ubicación física: selecciona esta opción si deseas que Google muestre un mensaje de advertencia cuando un sitio solicite información de tu ubicación.
   • No permitir que los sitios puedan realizar un seguimiento de mi ubicación física: selecciona esta opción para denegar de forma automática las solicitudes de ubicación de los sitios.

En Firefox, la ubicación del API puede ser alterada temporalmente como en Chrome.

En este caso, tendremos  que confiar e instalar  el addon Geolocater.
sitio web oficial de Mozilla addon .

Después de la instalación, vamos al menú «Herramientas», «Geolocater», «Administrar». A partir de aquí, seremos capaces de añadir directamente una «falsa» geolocalización. Después, seremos capaces de anular la geolocalización y cambiar entre geolocalizaciones predefinidas. Podemos confirmar el comportamiento en html5demos de Geolocalización

Respecto a Internet Explorer 11
IE11, disponible para windows 7 y 8.x, ofrece un nuevo conjunto de herramientas de desarrollo.
Nuevas características del Inspector del DOM, herramientas de rendimiento(UI Responsiveness Tool), características de emulación, Windows phone, Falsificación de geolocalizacion, nuevas características del debugger, etc

Enlaces a la documentación detallada sobre las herramientas de desarrollo

Otros enlaces interesantes de toolbars:

Web developers tools para mozilla.

Web Developer para Chrome (5 estrellas).

Plugins para Chrome

Pagespeed Insights
http://netm.ag/insights-256

Coffee Console
http://netm.ag/coffee-246

Tincr (permite editar y grabar los cambios fuente)
http://netm.ag/tincr-246

AngularJSm Batarang
http://netm.ag/angularjsbatarang-246

Knockoutjs context debugger:
http://netm.ag/contextdebugger-246

Grunt Devtools
http://netm.ag/grunt-246

Complementos para Firebug

FireSass:
https://addons.mozilla.org/es/firefox/addon/firesass-for-firebug/

Pixel Perfect:

https://addons.mozilla.org/es/firefox/addon/pixel-perfect/

YSlow:
https://addons.mozilla.org/es/firefox/addon/yslow/