¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Trucos y consejos para desarrollo y diseño web con Chrome

Yo no se vosotros, pero ya hace tiempo que Google Chrome es mi navegador principal. Yo era de los acérrimos de Firefox hasta no hace mucho, pero me cansé del elevado uso de memoria que hace Firefox y las herramientas de desarrollo han mejorado muchísimo. Me resulta curioso que todo el navegador esté perfectamente traducido al castellano pero las herramientas de desarrollo no lo estén, pero no tiene demasiada importancia.

A lo largo del tiempo, he ido aprendiendo ciertos trucos que me ha parecido útil compartir, ya que me ayudan enormemente en el trabajo del día a día.

Antes de continuar, he de aclarar que estas herramientas forman parte de Webkit por lo que Safari también debe incorporarlas. No obstante, dada la naturaleza de Google Chrome y sus actualizaciones silenciosas, es más común disfrutar rápidamente de cualquier mejora que tengan.

Obtén los recursos de la web

En muchas ocasiones, si trabajáis en este mundillo, os veréis en la tesitura de tener que obtener logos de páginas o imágenes. Bastante fácil, ¿no? ¿Y si os topáis con una web en Flash? Ahí la cosa cambia.

Recuerdo con Muebles Marpe que tuvimos que obtener fotos de los muebles de las webs de los fabricantes, y el 50% de éstas estaban en Flash.

Afortunadamente, podemos encontrarlas dentro de la pestaña Resources:

Sé que es algo bastante situacional pero os aseguro que a mi me salvó la vida.

Modifica y ejecuta el código JavaScript a tu antojo

¿Cuántas veces no te habrás visto en la necesidad de modificar temporalmente o ajustar algo de código JavaScript para probar algo? ¿Quizá una solución sin tener que ir al fuente? En Chrome, desde la pestaña Scripts, puedes modificar directamente un script.

Puedes añadir un console.log() para ver una variable en la consola o puedes simplemente intentar arreglar algo. Ten en cuenta que si refrescas la página perderás los cambios por lo que solo nos sirve para hacer algún apaño temporal.

Embellecedor de código JavaScript

Algunas veces intentas descubrir un bug que está ocurriendo y… ¡oops! el JavaScript está comprimido (minified). Intentar comprender el funcionamiento de un script comprimido es prácticamente imposible. ¿Cómo vas a colocar un punto de ruptura?

Por suerte, Chrome viene con una útil herramienta llamada Pretty Print, que “descomprime” un archivo JavaScript y lo formatea de forma sencilla. Tan solo tenemos que hacer click en el icono “{ }” en la barra inferior. Por desgracia los nombres seguirán siendo letras del abecedario, pero al menos podrás revisar el código más cómodamente.

Esta función no decodifica aquellas que vemos como eval(function(p,a,c,k,e,d){ pero, si os veis en la necesidad, JsBeautifier sí que los decodifica.

Puntos de ruptura al cambiar elementos en el DOM

Supongamos que estás viendo un script que manipula algún elemento del DOM. Si el script es largo, puede ser difícil encontrar el código que hace la modificación, especialmente si tienes una gran aplicación web o si, sencillamente, estás revisando código que no es tuyo.

Chrome tiene una gran herramienta para estos casos ya que puedes detener el código de JavaScript si:

  • Se modifica cualquier sub-elemento.
  • Se modifica cualquier atributo del elemento.
  • Se elimina algún nodo.

De esta forma puedes localizar rápidamente el código encargado de realizar el cambio.

Ten en cuenta que el punto puede llevarte a una librería como jQuery. No obstante, en el panel Call Stack (pila de invocación de funciones), puedes localizar el código que ha invocado este cambio.

Cambia las hojas de estilos a tu antojo

Al igual que hiciéramos con los scripts, las hojas de estilo también se pueden editar.

Desde la pestaña Recursos (Resources) podremos podemos buscar la hoja de estilos que necesitemos y, al hacer doble click podremos hacer cambios. Lo mejor es que si estábamos inspeccionando el elemento, podemos hacer click sobre la regla CSS aplicada y que nos lleve directamente a este apartado para poder modificarla a placer.

Inspeccionar pseudo-clases de selectores CSS

Muchas veces nos veremos en la tarea de modificar el estado :hover (por ejemplo) de un botón. ¿Cómo dejamos el ratón ahí encima del botón y a la vez editamos en Chrome para ver cómo queda?.

Con las herramientas de desarrollo puedes acceder al panel de estilos haciendo click en la flecha dentro del recuadro (ver imagen). Ahora podemos marcar/desmarcar las pseudo-clases que queramos examinar.

Configura las cosas a tu manera

En las herramientas de desarrollo podemos configurar algunas cosas que nos puedan parecer interesantes. Entre ellas tenemos las del apartado Console que nos permite registrar las peticiones XMLHttp o, quizá la más interesante (preserve log upon navigation) que nos permite guardar las peticiones de la pestaña Network y lo que quede en Console, en una misma pestaña.

¿Y tú? ¿Qué trucos tienes con Chrome?

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!