Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
11 Hrs
14 Min
0 Seg

Introducción a DevTools

2/22
Resources
Transcript

What are web browser development tools?

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.

How to access the Chrome Dev Tools?

To access the Chrome Dev Tools, follow this simple process:

  1. Open a new tab in the Chrome browser.
  2. Right-click anywhere on the page and select "Inspect."
  3. You can also use the keyboard shortcut 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.

What can be found in the Chrome Dev Tools?

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:

  • Elements: Allows you to view and edit the HTML and CSS of the page in real time.
  • Console: Where you can run JavaScript commands and view system messages or errors.
  • Sources: Displays all the files downloaded by the browser to render the page.
  • Performance: Tools to analyze and optimize page load time and performance.

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.

How to use Chrome Dev Tools as a text editor?

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:

  1. Make your HTML or CSS changes in the "Elements tab."
  2. Notice how the changes are instantly reflected in the page display.
  3. Remember that these changes are temporary and will disappear when you refresh the page, unless you save them in your development environment.

What is the value of the Chrome Dev Tools for developers?

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:

  1. Efficient debugging: Find and fix bugs quickly and easily.
  2. Performance optimization: Identify bottlenecks and maximize loading speed.
  3. Design testing: Test different style configurations with no lasting impact.
  4. Network monitoring: Analyze every request and response to understand site behavior.

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

Sort by:

Want to see more contributions, questions and answers from the community?

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

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

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

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

Necesitamos un curso de debuggin en vs code, usar la terminal de debug de javascript, crear breakpoints etc...

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

ctrl+shift+j ctrl+shift+p escribe :Elements. estaras en el dom y lo podras recorrer como un arbol de carpetas de windows con las flechas.
Resumen de la clase: ![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202024-06-15%20a%20la%28s%29%2023.59.53-6b96ed74-37fd-40da-87a3-5cd1f7c7a09f.jpg)

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á “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