Estas son algunas de las características más interesantes de Chrome Developer Tools, la herramienta orientada a diseñadores web e integrada en Google Chrome.

¡Ojo! Hago directos en Twitch sobre desarrollo web, ¿Te apuntas? ManzDev

desarrollo
161

Escrito por

Hoy en día, Chrome es, con diferencia, el navegador web más utilizado. Siempre habrán opiniones y matices sobre si es el mejor navegador, sin embargo, de lo que no hay duda es de que llevan un buen ritmo a la hora de ir implementando mejoras y perfeccionando sus características. De hecho, Chrome Developer Tools, uno de sus pilares, suele ser bastante infrautilizado respecto a su gran cantidad de interesantes características y funciones orientadas a diseñadores web.

En este artículo vamos a dar un repaso por encima a algunas de las funcionalidades de Chrome Developer Tools, algo que recomiendo a cualquier desarrollador o diseñador web.

1. ¡Usa el inspector de elementos!

Pulsando la combinación de teclas CTRL+U en un navegador web como Chrome o Firefox puedes acceder al código fuente de la página para ver sus tripas y como está hecho cierto detalle de la misma. Sin embargo, en muchas ocasiones este sistema no es práctico puesto que la página web tiene el código minificado (condensado, para que ocupe menos).

Código fuente minificado y sin minificar

Para que nos sea más útil tenemos dos alternativas: utilizar el Inspector de elementos de Google Chrome Dev Tools, pulsando CTRL+SHIFT+I y dirigiéndonos a la pestaña Elements. La pestaña Source también nos ofrece la opción de abrir cualquier componente de nuestra web, pudiendo pulsar el botón {} (Pretty Print) para pasar de código minificado a código legible con un sólo clic de ratón.

Además, si optamos por utilizar el Inspector de elementos, podemos simplemente pulsar con botón derecho en el elemento de la página web que queremos investigar y seleccionar la opción Inspeccionar. Así se nos abrirá el inspector justo en la etiqueta HTML deseada.

Pulsando en el botón de la esquina superior-izquierda (CTRL+SHIFT+C) también podemos mover el ratón sobre la página y ver en un sólo vistazo las etiquetas HTML que se resaltan, sus dimensiones o los márgenes y rellenos que se aplican al elemento en cuestión, algo muy útil para evitar problemas con el modelo de cajas de CSS.

2. Modifica el HTML o CSS en tiempo real

Cuando estamos diseñando una página, una característica muy interesante sería la de ir añadiendo características al CSS, o editar el HTML hasta conseguir el resultado deseado. Esto es algo muy sencillo de hacer con Chrome Dev Tools mediante el inspector de elementos.

Por ejemplo, sobre esta tabla periódica interactiva de los elementos HTML5 podemos ir desmarcando propiedades CSS o modificando sus valores, para observar el resultado si se realizaran esos cambios.

Por su parte, el HTML también puede ser modificado. Simplemente pulsamos con botón derecho sobre el elemento HTML en cuestión y elegimos la opción Añadir atributo (para insertar clases o ids, por ejemplo) o la opción Editar HTML, si queremos hacer cambios de forma más libre.

Nota: ¡Recuerda que las tecnologías de front-end nativas del navegador como HTML5, CSS3 o Javascript se ejecutan desde tu sistema! Esto quiere decir que no estás realizando cambios permanentes, sino que sólo haces cambios sobre archivos temporales de tu navegador.

Algunas propiedades CSS tienen gestores más avanzados, como es el caso de los colores CSS, que tienen su propio ColorPicker. Dicho gestor nos permite seleccionar el color y grado de transparencia rápidamente y de forma visual. Además, también nos permite cambiar entre los diferentes esquemas de color (hexadecimal, RGB, HSL), ir guardando los colores más utilizados e incluso utilizar un ColorDropper (cuentagotas) para extraer el color de alguna imagen o componente de la web.

Color Picker de Chrome Dev Tools

También podemos variar las propiedades CSS que utilicen medidas o unidades simplemente girando la rueda del ratón colocándonos encima, cambiar los valores de las propiedades gracias al autocompletado del cuál dispone, o como vimos anteriormente, desmarcar las casillas de verificación que aparecen a la izquierda de las propiedades CSS para desactivarlas.

Además, podemos pulsar sobre el + de la esquina superior-derecha para añadir nuevas reglas CSS.

Truco: Puedes pulsar SHIFT+Click de ratón sobre un color para cambiar su esquema de hexadecimal a RGB o HSL.

3. Emula los sensores o valores del GPS

En el inspector de elementos de Chrome podemos pulsar en el menú con tres puntos en la esquina superior-derecha y seleccionar la opción Show console (o simplemente pulsar ESC). Con esto aparecerá un nuevo panel inferior, donde podemos mostrar varias pestañas.

La pestaña Sensors nos permite emular en el navegador las coordenadas GPS que podríamos obtener con un dispositivo móvil o la orientación del dispositivo a través de los valores alfa, beta y gamma (ejes X, Y y Z), correspondiente a la posición/orientación en la que está colocado el dispositivo y que obtiene gracias al giroscopio.

Emulador de sensores y GPS de Chrome Developer Tools

4. Prepara tu web con Responsive Design (RWD)

Nuestro Chrome Dev Tools viene preparado para gestionar la apariencia de nuestra web mediante las media queries de CSS de una forma muy agradable y cómoda. Basta con pulsar el segundo icono de la esquina superior-izquierda (Toogle Device Toolbar) o pulsar CTRL+SHIFT+M.

Al hacerlo, activaremos el modo Responsive del navegador, en el cuál tendremos las herramientas necesarias para ver la página como si lo estuvieramos viendo en un dispositivo móvil o tablet, ya que en la zona superior de la página podremos colocar el dispositivo que queremos emular, mostrándonos sus dimensiones de pantalla, el zoom y la orientación actual del móvil (horizontal o vertical).

Truco: Si el móvil que queremos emular no está en la lista, se puede añadir fácilmente desde el menú o pulsando F1 desde el Inspector de elementos, pulsando la pestaña Devices y el botón Add custom device.... Esto nos permitirá añadir nuevos dispositivos a emular, con sus dimensiones de pantalla, tipo, e incluso el User Agent para simular ser un navegador concreto.

Este panel no sólo mostrará la apariencia móvil y aplicará las media queries de nuestra web, sino que también simulará los taps o swipes con nuestro puntero del ratón, así como mostrar otros datos a través del menú superior-derecho.

Responsive Web Design en Chrome Dev Tools

En dicho menú podremos mostrar una regla visual, capturar pantalla móvil o mostrar una franja visual para ver las media queries disponibles en la página actual.

Para salir de este modo, simplemente volvemos a pulsar en el icono Toggle Device Toolbar o CTRL+SHIFT+M sobre el inspector de elementos.

5. Suaviza las transiciones

Al igual que con los colores CSS, es posible personalizar las transiciones CSS mediante un gestor especialmente diseñado para este fin. En él se nos muestra la función de tiempo que se aplica para las transiciones, pudiendo cambiarlas entre los modos definidos (ease-in, linear, ease-out...) o personalizar uno mediante cubic-bezier.

Chrome Dev Tools: Transiciones

Para ello, sólo tenemos que mover cada uno de los puntos morados de los extremos de la función de tiempo y personalizar la función de la transición.

6. Simula una conexión móvil (2G, 3G, HDSPA...)

Como veremos más adelante, una parte muy importante de una página web es la velocidad de carga de la misma, ya no sólo por los aspectos de posicionamiento (SEO) que puedan repercutir, sino por la experiencia de usuario (UX) y satisfacción del mismo al obtener una respuesta rápida.

Con Chrome Developer Tools podemos activar la opción Network throttling, presente en el panel que aparecía en el inspector de elementos al pulsar ESC. En dicha opción, se nos permite emular la velocidad de una conexión móvil con GPRS, 2G, 3G, 4G o conexión WiFi en nuestro navegador. Algo muy útil para comprobar la experiencia de usuario si navegamos desde un dispositivo móvil en zonas de baja cobertura. Si se quiere añadir alguna personalizada, se puede hacer desde la pestaña Throttling en el menú Settings o pulsando F1 sobre el inspector de elementos.

Emular conexión móvil en Chrome

En la parte superior tenemos una opción Disk cache que nos permite desactivar el caché del navegador y poder hacer pruebas continuamente. Recuerden siempre desactivar esta opción de limitación de red cuando se termine de utilizar.

7. Instala un tema oscuro de Chrome Dev Tools

Si eres de los que les gustan los temas oscuros en los editores de código, debes saber que existe también una opción de cambiar el tema del Google Chrome Dev Tools a uno un poco más oscuro. Para ello, sólo tenemos que realizar los siguientes pasos:

  1. Abrimos la siguiente URL: chrome://flags/#enable-devtools-experiments
  2. Habilitamos la opción Experimentos de Herramientas para desarrolladores.
  3. Reiniciamos el navegador.
  4. Accedemos al inspector de elementos CTRL+SHIFT+I.
  5. Accedemos al menú Settings (o pulsamos F1) y luego al menú Experiments.
  6. Activamos la opción Allow custom UI themes.
  7. Instalamos la extensión DevTools Theme Zero Dark y reiniciamos el Chrome Dev Tools.

Si aún no nos muestra el tema oscuro, en el menú de preferencias F1, apartado Preferences / Appearance, comprobamos que está marcado Dark en Themes.

Tema oscuro para Chrome Developer Tools

En DevThemez tenemos varios temas instalables para Chrome Developer Tools, por si queremos curiosear un rato. Si lo que quieres son temas para editores de código, prueba con este tuit con themes.

8. Mapea preprocesadores CSS en Chrome Dev Tools

Si nos hemos acostumbrado a utilizar preprocesadores como LESS o SASS, puede ser bastante molesto llevar mentalmente la traducción del preprocesador a CSS (y viceversa) cuando realizamos cambios.

Para evitarlo, podemos utilizar los CSS Source Maps. Lo primero que necesitaremos será generarlos en nuestro editor. Si utilizas ATOM, LESS y PostCSS, puedes utilizar el paquete less-postcss-autocompile. Dicho paquete nos permite generar el archivo CSS final ya minificado, con autoprefixer y además generar el source maps que mencionamos al guardar el archivo LESS.

Veremos que esto genera un archivo index.css.map junto a nuestros archivos LESS y CSS. Si activamos la opción Enable CSS source maps, dentro del menú Settings / Preferences / Sources del inspector de elementos, tendremos los archivos de estilos mapeados con nuestros preprocesadores.

Preprocesadores LESS o SASS en Chrome Dev Tools

De la misma forma, podemos activar la opción Enable Javascript source maps para hacer lo mismo con preprocesadores como CoffeeScript, BabelJS o TypeScript.

9. Edita animaciones desde el navegador

En las últimas versiones de Chrome Dev Tools se han añadido algunas mejoras sobre las animaciones CSS. Por ejemplo, Chrome Dev Tools nos muestra los keyframes con los fotogramas de las animaciones junto al CSS, e incluso podemos visualizar las diferentes animaciones de una página y modificar la velocidad o tiempo que tardan con un par de clics.

Gestor de animaciones CSS desde Chrome Dev Tools

Este ejemplo pertenece a la animación CSS de Bernard Bernoulli (Día del Tentáculo), que puedes ver en este pen de CodePen. En el siguiente video podemos observar como es muy sencillo cambiar la velocidad o tiempos de diferentes animaciones, de forma visual, para ajustar la animación.

10. Rendimiento y optimización web

Si nos dedicamos a tareas de optimización web o estamos muy interesados en el rendimiento y eficiencia de nuestra página, podemos utilizar la pestaña Network de Chrome Developer Tools, la cuál nos muestra las peticiones (y sus características) que se han realizado para cargar la página.

Network tab en Chrome Dev Tools

Esto nos da una interesante herramienta de análisis para detectar cuales son los archivos que más ralentizan la carga de la web, así como un panel de gestión para detectar problemas o errores.

Si se quiere profundizar en este tema, recomiendo utilizar WebPageTest, la mejor herramienta en su género, que nos da muchísima información al respecto, así como una valoración del rendimiento web y múltiples detalles adicionales.

WebPageTest: Optimización web

Por último, si se busca algo aún más avanzado, recordar también que disponemos de la pestaña Timeline de Chrome Developer Tools, que nos ofrece información más exhaustiva y específica: uso de memoria RAM, uso de memoria de tarjeta gráfica, número de listeners Javascript utilizados, nodos HTML, así como actividad de dibujado de la página y otros datos técnicos. Una auténtica navaja suiza del desarrollo web.

Profiling (Timeline tab) en Chrome Dev Tools

RELACIONADOS Browser Wars: La historia de la guerra de navegadores RELACIONADOS 20 curiosidades y teorías de Firewatch RELACIONADOS Animar personajes con animaciones CSS
x Browser Wars: La historia de la guerra de navegadores
Manz

161 comentarios

1 2 3 4

Mind Lab PRO Nootrop
101

I have read your excellent post. This is a great job. I have enjoyed reading your post first time. I want to say thanks for this post. Thank you...

ws
107

Bang Bang und eine Gruppe talentierter junger Menschen,DENIM GIRL на ROLLING ACID има ново определение с цялостно лого и копчета на коленете и лактите,nunca falta público para estos "modelos suplentes de gran nombre".cena publiczna 210.000,zwei inklusive Steuern insgesamt 110.000 US-Dollar,top qualität saint laurent taschenEs ist auch eine Lifestyle-Marke,og hotba's seneste aktiviteter er også meget aktive.but like PP,Sanotaan myös,creando así una marca sostenible.replica omega de ville to know the maintenance is a cycle,jossa on söpö persoonallisuus.e fu fuso solo in metallo prezioso.avec une lunette sertie de diamants,men også løse t-shirts,cheap mont blanc muses editionColoro che sono sicuri che Eisenhower indossava un Rolex DD lo credono,Camouflage-Prints und Leopardenprints,Det nye drama starter i næste uge,certifiée par le COSC.W rzeczywistości,los precios de reparación ordinaria Rolex probablemente se enumeran,dass Sie sich dafür einsetzen,Ora molto popolare PVD riparazione placcatura colore una volta anche circa un migliaio di dollari,

Alison Parker
108

Are you wondering if I may pay someone to provide me with Best Dissertation Help Online? We should be your best option since we have a variety of services available. We manage your dissertations with the utmost precision and ensure that you get the desired grades. So, sign up with us today!

cradle
114

http://cradle-info.com/ http://guestblogging.pro/ http://worldinsport.com/ http://gadgetfreeks.com/ http://dailyjunkies.com/ http://arenapile.com/ http://eminetra.co.uk/ http://phoneswiki.com/ http://whatsnew2day.com/ http://sportzcraazy.com/ http://wikiramp.com/ http://latestceleb.com/ http://unfoldedmagzine.com/ http://flickprime.com/ http://assistsuite.com/ http://mycelebritylife.co.uk/

johnson45
116

This post is very informative. But if you are searching for the website where you can find the information about the website development then you can visit this site I am suggesting you and read the article available here. The answers to all of your questions will be satisfied here.

evajames
129

The experts at Programming Assignment Help is the platform where a pool of qualified experts helps the students through their academic writing service for different subjects. There are many reasons which may help you in deciding to choose Online Programming Assignment for services such as PHP Assignment Help services online for your academics. Here, you get a package full of the featured services with quality at the reasonable low rate. We well understand the situation of students to balance the extra curricular activities, their hard work towards their vision and dreams, the expectation of higher and the best grades while staying calm overall. The java assignment help are not just the writers for their subjects rather they are the known industry consultants in their respective fields. Moreover, they are the pillars of Python Assignment Help who put their efforts to provide the solution in an writing service domain.

Helene
131

A very awesome article post. We are really grateful for your article post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up.

Joe
133

In addition to physical training, brain training is also indispensable for anyone. But, if we can choose to passively train our brains with highly entertaining games, why not give it a try? And Sudoku Puzzles is a recommendation of mine! (if you have a better and more useful game, please share it with me! Thanks for that!).

Laucharge Company
137

Для современного и успешного интернет проекта очень важно обладать сервисом онлайн-платежей. С онбордингом таких решений вам помогут главные специалисты Laucharge. Мы имеем в своем арсенале решения по всем методам и видам транзакций. Текущая сфера интернет бизнеса очень конкурентна и не позволяет работать хуже остальных. Владельцы брендов хотят принимать дежежные переводы с разных уголков планеты, расширяя географию своих услуг и увеличивая обороты. Электронный мерчант счёт - это сервис, предоставляемый платёжным оператором, позволяющий проводить онлайн-платежи. Суть онлайн мерчанта очень проста - клиент передает платёжную информацию в форму, а платежный оператор передаёт их в банк эквайер по безопасному шлюзу. Подключение актуальных методов и технологий транзакций даёт возможность Laucharge быстро находить решения для любого бизнеса с доступными условиями и легким комплаенс. For a modern and successful Internet project, it is very important to have an online payment service. With the onboarding of such solutions, the main specialists of Laucharge will help you. We have in our arsenal solutions for all methods and types of transactions. The current sphere of Internet business is very competitive and does not allow you to work worse than others. Brand owners want to accept cash transfers from all over the world, expanding the geography of their services and increasing turnover. An electronic merchant account is a service provided by a payment operator that allows you to make online payments. The essence of the online merchant is very simple - the client submits payment information to the form, and the payment operator transfers them to the acquiring bank via a secure gateway. Connecting up-to-date transaction methods and technologies enables Laucharge to quickly find solutions for any business with affordable conditions and easy compliance. recurring transaction payment gateway paypal

eaasa
139

use the service apps and entice to them, show the benefits of self services. Customers need apps that can be easily downloaded and installed readily in their devices. All customers expect that their apps are secure and simple enough for them to easily understand. theology assignment help assignment help computer science assignment help capstone project help online article writer content writer for hire content writing services online freelance writer for hire ghost writer for hire online write my assignments for me

Antonio Alejos
144

Hola!! Desconocía la capacidad que tiene Google Chrome como navegador y el uso extenso que se puede hacer, con esto me acabo de convencer para dejar a un lado firefox y meterme de cabeza con Chrome. Muchas Gracias.

Janvi Sharma
148

I am Janvi sharma from Manali, Himachal Pradesh, India Welcome to our Manali escorts agency for booking best high-profile call girls in Manali. Contact (7678486691)

Five Guys UK Menu
150

Whether you're building your MVP or scaling with new customers and the best talent, the tools you need are right here. Join us for Asia Pacific's premier ...

1 2 3 4

Publica tu opinión