Disfruta de nuestro contenido y eventos por un año a un precio especial

Antes: $179

Currency
$149/año
¡Suscríbete!

🔥 Te quedan 🔥

1D
8H
18M
59S

Introducción a DevTools

2/22
Recursos
Transcripción

Aportes 32

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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!

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

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


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

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/

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/

<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.

Con Dev Tools se pueden hacer cosas muy cool.

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

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á “Switch to dark theme” lo seleccionan y luego en “Reload 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