Usar Google Chrome como apoyo para el desarrollo web

Google Chrome ha marcado un antes y un después en la experiencia de la navegación por Internet, gracias a la flexibilidad y usablidad que ofrece, siendo a su vez, la base de otros navegadores, como Maxthon, vivaldi; e incluso navegadores que no tienen su base en Chromium, pero utilizan el mismo motor de renderizado Blink, como Opera.

El motor de renderizado es lo que realmente importa al desarrollador web ya que éste es el que se encarga de convertir a gráficos e interfaz de usuario las líneas de código que ellos escriban, por lo que hace años, a veces había que escribir código para los navegadores más populares.

Internet explorer: Motor trident.

Firefox: Motor Gecko.

Safari, Chrome (hasta 2012): Webkit.

Opera: Presto.

Una vivencia de casi todo desarrollador web, era que creaba una página y lo cargaba en su navegador, pero si se cargaba desde otro, podría mostrar desfaces, incompatibilidades, errores de javaScript o incluso no podía funcionar más que sus acciones básicas de HTML, así que tenía que escribir parches para hacerlo compatible con cada navegador, dejando afuera navegadores que no eran tan famosos, como Konqueror.

Esto significa que que dos navegadores pueden utilizar un mismo motor de renderizado, por loq ue la página hecha para un navegador, debería funcionar y verse igual que con el segundo navegador, por ejemplo Chrome y Safari. El navegador en sí, es el que ofrece las herramientas, extensiones y demás opciones con respecto a los demás navegadores.

Gracias al proyecto Chromium, y al motor webkit, varios navegadores han adoptado dichos elementos como su base, haciendo que nuestro código sea visualmente parecido y compatible en más navegadores, y ahora con el salto de webkit a Blink se intenta que otros más navegadores puedan ser también compatibles para lograr un estandarizado web y sólo hay que escribir un código y funcione en la mayoría de los navegadores.

Aún así, Internet Explorer, o su alias, Edge, sigue su propio camino, y es hasta el momento uno de los principales obstáculos para el desarrollador, ya que no adopta mucho los estándares web, como el HTML5, además que durante su vida ha intentado crear sus propios estándares, que sólo funcionen para su navegador, por ejemplo ActiveX; haciendo que el usuario deba utilizar  Internet Explorer o Edge, para poder ver la página (Y solo en el sistema operativo compatible, como Windows o Mac).

 

Google Chrome acabó con esto, y hoy en día es una herramienta muy útil para navegar, y para desarrollar.

Pero ¿Cómo podemos usar Google Chrome para el desarrollo de páginas web? Empecemos por su instalación.

Google Chrome es el producto comercial de Google, por lo que no viene en los repositorios de Linux, siendo el  navegador Chromium el que si viene. Por lo que para descargarlo, necesitamos ir a su página web (si desde otro navegador).

Visitamos el sitio

https://www.google.com.mx/chrome/browser/desktop/

Y damos clic en Descargar Chrome

Al hacerlo, nos mostrará una ventana con las opciones del tipo de paquete para nuestra distribución.

Para Debian y derivadas (por ejemplo Mint, Ubuntu, ElementaryOS) se debe seleccionar .deb.

Para Red hat y derivadas (como Fedora, openSUSE, CentOS) se debe elegir rpm.

Puede darse  el caso que al descargar el archivo correspondiente, se ejecute la instalación automáticamente. Si no es así, entonces veremos como instalarlo desde la consola.

Para el caso de la instalación manual, desde la consola se debe ir a la carpeta de descargas y listamos el archivo.

ls *.deb

Ahora lo instalamos las dependencias

sudo apt-get install libappindicator1

Ahora, instalamos chrome

sudo dpkg -i nombredelarchivo.deb

Siendo nombredelarchivo, el nombre con que se descargó google chrome, y nos lo mostró con el comando ls.

Por ejemplo google-chrome-stable_current_amd64.deb

Y esperamos a que termine la instalación.

Ahora podremos abrir Google Chrome.

Ahora ya podremos utilizarlo como herramienta en nuestro desarrollo.

En primer lugar abrimos la página de nuestro desarrollo que queremos probar. Ejemplo:

Damos clic derecho y después “Inspeccionar”.

Y nos desplegará una barra con diversas herramientas.

Éste es el panel desplegado con todas las herramientas.

Podemos ver la primera pestaña que es “Elements”, y en ella estarán dos paneles, el del lado izquierdo veremos el código fuente de la página, y cabe destacar que en el componente o parte de la página web donde demos clic derecho y elijamos la opción “Inspeccionar”, en la sección “Elements nos mostrará directamente ese fragmento de código”. En el panel derecho podremos ver los valores de los estilos aplicados de CSS. Todo esto nos ayudará para ir revisando el estilo y en dado caso hacer cambios al vuelo sin necesidad de ir al código fuente, cambiarlo y cargar de nuevo la página. Como lo veremos en el siguiente ejemplo.

Se dio clic derecho al fragmento de texto “Panel de control” y se seleccionó la opción “Inspeccionar” lo cual nos muestra lo siguiente.

Podemos ver que nos muestra su respectivo fragmento de código fuente del elemento en cuestión, además, si pasamos el cursor en los tags del código fuente, podremos ver que en la página web se resalta la parte de la interfaz que corresponde a ese tag.

Del lado derecho, en los valores CSS, podemos ver la lista de las actuales propiedades y valores de los componentes HTML, así como un checkbox indicando si están activados, o no.

Si queremos desactivar una propiedad CSS de un componente, podemos dar clic en su respectivo checkbox, con lo cual se aplicará su efecto de forma inmediata sin que exista un cambio real en el código fuente. En el siguiente ejemplo, podremos observar que se desactivó el margin y font-size del título de la sección de la página, con el texto “panel de control”.

Además, podemos editar los valores para verificar inmediatamente como se mostraría en el navegador. Solo se debe hacer clic en los valores y cambiarlos.

También podemos hacer cambios al texto html, o a los tags, recordando que estas modificaciones no modifican el código fuente, son solo para ayudarnos a hacer depuraciones y modificaciones de como quedaría la interfaz, sin el peligro de hacer cambios verdaderos.

En la pestaña “Console” podremos ver si hay errores de javascript o errores de carga de archivos. Muy útil para detectar dependencias rotas de css, imágenes, o bibliotecas js, además podremos ver el resultado de debug de JavaScript.

Si damos clic a un elemento que no se pudo cargar, nos mandará a la pestaña “network” con la lista de archivos referenciados y su código de respuesta, siendo los más comunes 200 para cargado exitosamente, 404 para archivo no encontrado, y 500 para archivos con errores internos del servidor.

En la pestaña “sources” nos mostrará en modo árbol, la lista de archivos que se carga en nuestra página con la particularidad que podremos ver el resultado final del archivo, mas no el código fuente original. Es decir, si utilizo php para generar un js o un css modificado dependiendo de las circunstancias, aquí podremos ver como quedó el archivo y como lo recibió el cliente.

Si tenemos la pestaña “Timeline” abierta en el momento que cargamos una página web, nos mostrará el tiempo tardado para la carga, así como información detalla sobre cuanto tiempo tardó en cargar cada uno de los elementos, muy útil si queremos optimizar el tiempo de carga de nuestro sitio.

Google Chrome tiene más pestañas que en éste momento no son motivo de revisión en esta publicación.

Por último, otra de las características que Chrome nos ofrece para el desarrollo es la posibilidad de ver nuestros sitios emulando un dispositivo móvil, ya que hoy en día el acceso a las páginas web son cada vez más comunes a través de dispositivos como móviles y tabletas, es importante que podamos verificar la experiencia que tendrá el usuario al navegar por nuestro sitio. Para activarlo, damos clic en el botón que tiene el icono de un celular y tableta, y que está a la izquierda de la pestaña “Elements”.

Al activarlo, nos mostrará nuestro sitio emulando una terminal móvil.

 

En la parte superior tenemos herramientas para emular dispositivos en específico, o bien, poder colocar la resolución que queremos mostrar.

Como podemos ver Google Chrome es una herramienta de mucha utilidad para nuestro desarrollo web diario.

Anterior: Instalar FTP Filezilla

Siguiente: Servidor Apache para desarrollar php