Share
Google Chrome es uno de los jugadores más grandes en la Web hoy en día. Es rápido, confiable, está lleno de características y es extremadamente útil, especialmente si eres un desarrollador web. Chrome también permite la instalación de extensiones de terceros. Construimos estas extensiones con HTML puro, CSS y JavaScript. El equipo de Google hace un trabajo maravilloso. En este artículo, veremos varias herramientas útiles, en Chrome, que ayudan con nuestros procesos de desarrollo..
Hoy en día la capacidad de respuesta está en todas partes. Con el aumento de los dispositivos móviles, tenemos que hacer que nuestras aplicaciones se ejecuten en muchas resoluciones diferentes. Las últimas versiones de Chrome contienen instrumentos maravillosos para facilitar nuestro trabajo. Comencemos definiendo una página simple y continuando haciéndola receptiva. Aquí está el marcado HTML:
Diseño web adaptable
El diseño web sensible (RWD) es un enfoque de diseño web ...
Hay un estilo básico en la página. Las reglas de CSS, flotan los enlaces de navegación y hacen que las dos secciones se coloquen una al lado de la otra. El resultado se ve así:
Ahora, teniendo el HTML y el CSS básico en su lugar, podemos comenzar a experimentar. Coloquemos los puntos de ruptura de nuestras consultas de medios. Es importante elegirlos en función del contenido y de dónde empiece a verse mal. Establecer resoluciones como 1024x768, solo porque es popular, no es una buena práctica.
Nuestro contenido se rompe y queremos ver el tamaño exacto de la ventana gráfica. Así que tenemos que cambiar el tamaño de la ventana del navegador. Bajo Chrome, somos capaces de abrir el panel de herramientas para desarrolladores y aumentar su tamaño allí.
Observe que mientras estamos cambiando el tamaño de la ventana gráfica, vemos su tamaño en el esquina superior derecha. Esta pequeña información sobre herramientas elimina la necesidad de una comprobación de tamaño manual. En nuestro caso, ambas secciones debajo de la navegación se volvieron demasiado aplastadas, alrededor de 500px. Entonces, ese es el lugar para nuestra primera consulta de medios:
sección flotador: izquierda; ancho: 50%; @media all y (max-width: 550px) section float: none; ancho: 100%;
Si vamos un poco por debajo de 550px, veremos que la navegación provoca un desplazamiento horizontal alrededor de 540px. Una nueva definición de consulta de medios resuelve ese problema.
.nav estilo de lista: ninguno; margen: 10px auto; relleno: 0; ancho: 510px; .nav li float: left; margen: 0 20px 0 0; @media all y (max-width: 540px) .nav width: auto; .nav li float: none; margen: 0; relleno: 0; text-align: center;
El resultado es una página web que funciona en una amplia gama de pantallas. Sí, nuestra página es simple y tiene solo dos puntos de interrupción, pero el proceso de selección será el mismo, incluso si tenemos un sitio web gigante.
A menudo recibimos informes de errores que indican que nuestra aplicación no funciona correctamente en algún dispositivo específico. Chrome puede simular varios dispositivos, para ayudar a resolver este problema. Establece la resolución de pantalla exacta y define los encabezados HTTP correctos. Por lo tanto, podemos ver de cerca lo que ve el usuario real. La detección del navegador JavaScript también funcionará porque el navegador modifica los encabezados de solicitud.
Digamos que necesitamos simular un dispositivo iPhone5. Hay un pequeño botón que abre el cajón panel y luego hay una Emulación lengüeta.
Elegimos el dispositivo y Chrome aplica todas las configuraciones en Pantalla, Agente de usuario y Sensores secciones El navegador incluso emula eventos táctiles..
Nuestra página ahora es receptiva, pero en algún momento tenemos que hacer modificaciones. Nuevamente, podemos usar Chrome como herramienta y ver qué estilos se aplican al documento. Por ejemplo, el texto en la primera sección es demasiado grande. Queremos cambiar eso y establecer un nuevo color..
los Elementos El panel también es útil si necesitamos ver una regla CSS específica, pero no sabemos dónde está la definición de esa regla. Hay una sección en el lado derecho, que muestra los estilos computados aplicados al elemento seleccionado actualmente y luego podemos modificarlo.
Y, finalmente, a veces necesitamos buscar ciertos estilos CSS, pero es difícil encontrarlos porque hay muchas definiciones. En el herramientas de desarrollo Panel, tenemos un buen campo de filtro. Digamos que queremos acceder a las reglas de nuestra etiqueta que tiene la concepto clase aplicada, así es como podríamos hacer eso:
Google Chrome es una herramienta universal. Cuenta con instrumentos para apoyar a los diseñadores como lo hicimos en la última sección de este tutorial. Pero puede hacer lo mismo para los desarrolladores, como veremos ahora..
Hay un buen depurador de JavaScript, integrado dentro de Chrome. También hay una maravillosa consola y visor de código fuente. Para ilustrar cómo funciona todo, agregaremos un poco de lógica a nuestro ejemplo. Queremos cambiar la etiqueta. Ejemplos en el menu principal para Ejemplos impresionantes cuando nosotros hacer clic en el enlace Usaremos jQuery como ayudante, para poder enfocarnos mejor en el ejemplo:
Accentsconagua
. console.log ('no hacer nada ...');); Probablemente ya sepa el problema, pero veamos cómo funciona el código anterior..
No importa lo que nosotros hacer clic obtenemos hacer nada… en la consola Entonces, se parece a nuestra Si La cláusula es siempre falsa. Vamos a establecer un punto de interrupción para ver qué está pasando.
El depurador se detiene en nuestro punto de interrupción y nos muestra las variables locales definidas. La variable hecho clic, apunta al elemento de navegación y no a la elemento. Entonces, es internalHTML la propiedad definitivamente no es Ejemplos. Es por eso que tenemos hacer nada… cada vez. Para solucionar el error, simplemente podríamos utilizar .nav a en lugar de solo .nav.
Arriba está el enfoque tradicional que funciona si sabemos dónde establecer exactamente el punto de interrupción. Pero si trabajamos con una base de código grande y especialmente si tenemos que depurar el archivo concatenado, se vuelve un poco problemático. Empezamos colocando console.log Aquí y allá y revisa la consola. Funcionará, pero pronto tendremos una gran cantidad de datos, será difícil filtrar los datos y encontrar la información necesaria. Chrome también tiene una solución para ese problema. Podríamos diseñar la salida en la consola agregando %do Delante del texto, pasado a la .Iniciar sesión método. Después de eso, adjunte un segundo parámetro que contiene nuestros estilos. Por ejemplo:
Hay algo más que podríamos agregar. los consola El objeto tiene dos métodos no tan populares. - grupo y grupoEnd. Nos dan la posibilidad de agrupar nuestros registros..
También hay una biblioteca que combina tanto el estilo como la agrupación de la salida, Deb.js. Lo único que tenemos que hacer, es incluirlo en nuestra página antes de los otros scripts y adjuntarlo. .debutante() Al final de la función que queremos inspeccionar. También hay .debc () Versión que envía grupos colapsados a la consola..
Con esta biblioteca, podemos obtener los argumentos pasados a la función, su valor de retorno de seguimiento de pila y el tiempo de ejecución. Como mencionamos anteriormente, los mensajes están bien agrupados y anidados entre sí, por lo que es mucho más fácil seguir el flujo de la aplicación.
Una de las características principales del navegador de Google es el ecosistema de la extensión. Podemos crear programas instalables que se ejecutan en el navegador y hay docenas de API útiles que podemos usar. Sin embargo, lo más importante es que no tenemos que aprender un nuevo idioma. Las tecnologías que usaremos son las habituales de HTML, CSS y JavaScript. Verifique la siguiente introducción al desarrollo de extensiones de Chrome..
Incluso hay una sección separada en la tienda web de Chrome llamada desarrollo web. Contiene instrumentos útiles hechos específicamente para nosotros - desarrolladores. Hay uno llamado Yez !. Aporta funcionalidades de tipo terminal en el panel Herramientas de desarrollo. Podemos ejecutar comandos de shell y obtener su salida en tiempo real..
La extensión en sí no es suficiente para ejecutar comandos de shell. Eso es porque no tenemos acceso al sistema operativo. Es por eso que hay un módulo Node.js que actúa como un proxy. Yez! se conecta a la aplicación Node.js en ejecución a través de sockets web. Podríamos instalar el módulo a través del gestor de paquetes Node.js usando npm instalar -g yez.
Yez! También tiene una buena integración con Git y nos muestra la rama en el directorio actual. Podemos ejecutar comandos de terminal y obtener su salida inmediatamente..
La extensión fue desarrollada originalmente como un corredor de tareas. Así que tiene una interfaz para definiciones de tareas. De hecho, eso es solo una serie de comandos de shell que se ejecutan uno tras otro. Estamos logrando los mismos resultados creando shell scripts..
También podemos ver la salida del terminal en tiempo real. Así que la extensión es adecuada para desarrollar aplicaciones Node.js. Normalmente tenemos que reiniciar el proceso Node.js, pero ahora, todo está visible dentro de Chrome.
Como desarrolladores web, a menudo sucede que tenemos que realizar una solicitud HTTP a nuestras aplicaciones. Tal vez desarrollamos una API REST o tenemos un script PHP que acepta parámetros POST. Hay una herramienta de línea de comandos disponible llamada cURL. Es probablemente el instrumento más utilizado para consultar la web..
Con cURL, no tenemos que saltar a la terminal. Hay DHC (REST HTTP API Client) disponible. Es una extensión que nos da el control total de la solicitud HTTP. Podríamos cambiar el método de solicitud, los encabezados o los parámetros GET y POST. También muestra el resultado de la solicitud, con sus encabezados. Un instrumento muy útil..
Todos sabemos la importancia de las pruebas. Es extremadamente importante para nosotros saber que nuestros programas se comportan correctamente. A veces, la escritura de exámenes puede ser un reto. Especialmente si necesitamos probar la interfaz de usuario. Afortunadamente, hay un módulo Node.js que controla nuestro navegador (Chrome) y desencadena acciones como visitar una página, hacer clic en un enlace o rellenar un formulario. Se llama DalekJS. Es fácilmente instalable ejecutando:
npm instalar -g dalek-cli
Hagamos un pequeño experimento y veamos cómo funciona todo. En un directorio recién creado, necesitamos un paquete.json Archivo con el siguiente contenido:
"name": "project", "description": "description", "version": "0.0.1", "devDependencies": "dalekjs": "0.0.8", "dalek-browser-chrome": "0.0.10"
despues de correr npm instalar en el mismo directorio obtendremos dalekjs y dalek-browser-chrome instalado en un nodo_módulos carpeta. Pondremos nuestra prueba dentro de un archivo llamado test.js. Guardémoslo en la misma carpeta. Aquí hay un breve script que prueba la funcionalidad de búsqueda de GitHub:
var url = 'https://github.com/'; module.exports = 'debería realizar una búsqueda en GitHub': function (test) test .open (url) .type ('# js-command-bar-field', 'dalek') .submit ('# top_search_form') .assert.text ('. repolist h3 a', 'dalekjs / dalek', 'Hay un enlace con la etiqueta dalekjs') .click ('[href = "/ dalekjs / dalek"]') .assert.text (' .repository-description p ',' DalekJS Base framework ',' Es el repositorio correcto ') .done (); Para ejecutar la prueba, tenemos que disparar. dalek ./test.js -b chrome en nuestra consola El resultado es que DalekJS lanza una instancia del navegador Google Chrome. A continuación, abre el sitio de GitHub, en el que puede escribir dalek en el campo de búsqueda y va al repositorio correcto. Al final, Node.js simplemente cierra la ventana abierta. La salida en la consola se ve así:
DalekJS es compatible con PhantomJS, Firefox, InternetExplorer y Safari. Es una herramienta útil, y funciona en Windows, Linux y Mac. La documentación está disponible en la página oficial dalekjs.com.
Cuando estamos frente a nuestra computadora, pasamos la mayor parte de ese tiempo en el navegador. Es bueno saber que Google Chrome no es solo un programa para navegar en la Web, sino que también es un poderoso instrumento para el desarrollo web..
Ahora, hay un montón de extensiones útiles y una comunidad en constante crecimiento, por lo que le insto a probar Google Chrome, si aún no lo está utilizando para su próxima aplicación web.
