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.
Introducción
Introducción del curso e historia de Debugging Dev Tools
Introducción a DevTools
Elementos y Estilos
Editando HTML
Editando CSS
Colores en DevTools
Manejo de sombras en DevTools
Animaciones en DevTools
¿Cómo medir el código que no ocupamos?
JavaScript y el DOM
DevTools como editor (IDE)
Mobile Simulation
Simular una ventana móvil
Manejo de sensores
JavaScript
Debugging JS con DevTools
Reproduciendo y reparando un bug
Network
Nota: proyecto de la clase siguiente
¿Cuándo utilizar Network en DevTools?
Revisando detalles con Network
Performance
¿Cuando utilizar la sección de Performance?
Audits
Auditoría en mobile
Auditoría en desktop
Cierre
Cierre de curso
Contenido Bonus: PWA
Web browser development tools are indispensable tools for any web developer who wants to take their work to the next level. These tools, commonly known as "Dev Tools", allow you to inspect, edit and debug the source code of a web page directly from the browser. Although each browser, such as Chrome, Safari, Firefox, and Edge, has its own version of these tools, the basic features are quite similar.
To access the Chrome Dev Tools, follow this simple process:
Ctrl + Shift + I
on Windows or Cmd + Option + I
on macOS.Once inside, you will see an interface full of information. While it may seem overwhelming at first, don't worry; with time and practice, you'll become familiar with the various tools available.
Within the Chrome Dev Tools, you can find a number of useful sections that make life easier for web developers. Some of the key sections include:
As you become familiar with these tools, you can use them to directly manipulate the DOM (Document Object Model) and page styles, facilitating real-time testing and tuning.
One of the most intriguing features of the Chrome Dev Tools is its ability to act as a text editor. You can upload HTML and CSS files and make live changes that are immediately reflected on your page without affecting the original source code on your server or locally. This method is ideal for experimenting with different layouts and styles before implementing final changes.
Basic steps for using Chrome Dev Tools as a text editor:
Using the Chrome Dev Tools can significantly improve a developer's workflow. By providing the ability to quickly inspect and modify source code, these tools save time and effort that would otherwise be wasted in trial and error cycles. In addition, they enable:
In the next class, we will specifically address how to use the elements and styles section with practical examples to maximize your efficiency as a professional developer. We look forward to learning more!
Contributions 35
Questions 2
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.
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
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
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
Estaba viendo firefox y me parece sus devtools son superiores
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
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.
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. |
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.
Want to see more contributions, questions and answers from the community?