Introducción a DevTools

Las dev tools son herramientas de desarrollo que vienen en todos los navegadores. No todas son iguales por lo que hay tools muy particulares dependiendo del navegador.

estos son los atajos que podemos usar para navegar más rápido por los devtools:
https://developers.google.com/web/tools/chrome-devtools/shortcuts

se ve que sera un buen curso!

Algo que me gusta mucho de DevTools es precisamente la modificación de la página en tiempo real, sobre todo con CSS porque puedo empezar a crear estilos CSS desde el DevTools e ir viendo en tiempo real los cambios, y una vez está todo listo simplemente copias y pegas, es increíble.

Y aunque existen muchas DevTools para cada navegador, por lo general prefiero el de Chrome, aunque las DevTools de Firebox me gustan trabajarlas con CSS Grid porque siento que pone todo de forma más cómoda jaja

Chrome DevTools es un conjunto de herramientas de creación web y depuración integrado en Google Chrome.
By: https://bit.ly/34agM6r

Estaba viendo firefox y me parece sus devtools son superiores

Hasta hace poco mi navegador favorito era Chrome, pero ṕrobe la Edition de Firefox para desarrolladores y ha sido brutaaal… Se las recomiendo si quieren probarla

https://www.mozilla.org/es-ES/firefox/developer/

Chrome DevTools

Todos los navegadores tienen sus propias DevTools, estas son la herramientas de desarrollo donde podemos revisar nuestro código o el de otros.

F12 (tecla), para abrir los DevTools

Para los interesados en las DevTools de Firefox
Hay un playground con el que se puede aprender cómo usar CSS Grid y el Debugger de Firefox

https://mozilladevelopers.github.io/playground/

Con Dev Tools se pueden hacer cosas muy cool.

Las DevTools son unas herramientas que nos ofrecen distintos navegadores para poder así debuggear nuestro código de una manera más eficiente y en tiempo real.

• Existen varios tipos de DevTools pero estaremos utilizando el DevTools de Chromium.
• Podemos ver una lista de shortcuts para teclado en el icono de tres puntos y shortcuts.
  
  

También un navegador muy bueno para hacer esto es Firefox Developer Edition.

|Para estar informados de las Chrome devTools

yo estaba haciendo dibujos con css y con esta herramienta me ayudo mucho para modificar cosas y cuando ya se colocaban en donde yo queria simplemente copiaba el codigo y lo pegaba en mi archivo.css pero queria llegar a esta clase para saber que otras cosas hay

Es increible de como se puede usar el devtools con los estilos y como estos se editan en la pagina web. Ahora si el profe Granda llamo mucho mi atencion con ese punto. A darle con todo.

Vamos DevTools

espero aprender nuevos trucos con las devtools

Algo que me gustaría aportar es que hacer los estilos se vuelven mucho mas agiles cuando los modificamos desde las dev tools, ya que podemos ver en tiempo real como se vería en el producto final. Eso me ha ayudado mucho al momento de hacer los estilos

A seguir aprendiendo

👌

Esta muy buena la nueva interfaz de video de Platzi

Interesante!

Los devtools que más me gustan son Chrome y Firefox

Suena realmente muy interesante.

Hay un montón de herramientas dentro de las Dev Tools

A seguir!

Esto es lo que me hacía falta entender y aprender a manejar. Vamos allá!

hay un montón de opciones disponibles en DevTools Chrome

Siempre tuve curiosidad de como utilizar mejor esta herramienta. Vamos allá.

Les comparto una guia muy completa de las Chrome DevTools

No sé si lo han publicado antes pero para los que quieran tener el Dark Mode o Dark Theme en las Chrome Dev Tools sólo realicen lo siguiente:
Dentro de las herramientas de Debugging presionar Ctrl + Shift + P y les aparecerá un menú de comandos, pueden escribir simplemente Dark Theme y les aparecerá “Switch to dark theme” lo seleccionan y luego en “Reload DevTools” y listo, ya está el Dark Mode de las DevTools.