Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
23H
55M
49S

Introducci贸n a DevTools

2/22
Recursos
Transcripci贸n

Aportes 34

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 峁時obe 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.

<h1>驴Qu茅 son las DevTools?</h1>

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.

Chrome DevTools
Chrome DevTools es un conjunto de herramientas de creaci贸n web y depuraci贸n integrado en Google Chrome. Usa DevTools para iterar y depurar tu sitio, y para crear un perfil de 茅l.

|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

馃憣

nada como alguien se expresa ya se sabe si conoce o no de un tema. buen profesor.

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谩 鈥淪witch to dark theme鈥 lo seleccionan y luego en 鈥淩eload DevTools鈥 y listo, ya est谩 el Dark Mode de las DevTools.

Muchas Gracias por la Introducci贸n. Yo suelo trabajar solo con Chrome as铆 que el curso me viene de maravilla:D