Escoge e Instala el navegador y conoce sus DevTools

✨ Chrome DevTools es un conjunto de herramientas que nos permiten hacer depuración en el desarrollo de aplicaciones Web. Este se encuentra en Chrome y en navegadores basados en Chromium.

Como lo mencioné en la clase anterior, hay un curso 100% dedicado a esa ventanita del navegador llamada DevTools: 👀: Curso de Debugging con Chrome DevTools
.
Eso que vemos ahí es el código de la página, código que realmente se está ejecutando, y sí, tú puedes mirar el código de muchas páginas, puedes ver el código de Platzi, de YouTube ¡Hasta el código de Facebook!
.
Les recomiendo empezar a curiosear con esa ventanita, no se preocupen, no van a romper nada, al recargar la página todo vuelve a la normalidad 😄

Ventana para desarrollador

• ⌘ (command) + ⌥ (option) + i

Consola del navegador

• ⌘ (command) + ⌥ (option) + j

Inspector de elementos

• ⌘ (command) + shitf+ c

Para abrir con un comando las DevTools es -> ⌘ (command) + ⌥ (option) + i

Me parece mejor Mozilla Firefox Developer Edition, es mas liviano y tiene mas herramientas.

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

Los mejores navegadores del 2020.
PCWorld

En google Dev tenemos la opción de ver más herramientas muy útiles para desarrolladores.

-Podemos ver los elementos del sitio web. Como esta hecha la página.

• Consola: Donde se pueden ejecutar instrucciones de Javascript para probar cuestiones de tu sitio web.
• Sources: Básicamente nos dice desde donde se usan cargando nuestros archivos y también las fuentes que estamos teniendo.
  -Network: Nos dice cuanto se demora un sitio web en cargar. Desde dónde carga y cuál es su rendimiento.

Si se te cierran estas herramientas las puedes volver a abrir con F12.

⭐️ Super valiosos esos ShortCuts

Una mejor alternativa a Chrome es el navegador Brave, mejor performance y mayor seguridad y privacidad.
https://brave.com/

¿Por qué Chrome?¿¡POR QUÉÉÉÉÉÉÉÉÉÉÉÉÉ!?

Firefox FTW por cierto

Clase 3 – Escoge e instala el navegador y conoce sus DevTools

¿Cuál es el navegador más usado hoy en día?

• Google Chrome.

¿Por qué deberíamos de aprender a desarrollar webs en Google Chrome?

• Porque es el más usado en el mundo.

¿Cuáles son las versiones disponibles hoy en día del navegador Google Chrome?

• Canary.
• Dev.
• Stable.

¿Cuál es la característica especial de Google Chrome versión Canary?

• La característica más relevante de esta versión es que es la más actualizada de todas las anteriores versiones, ya que a esta versión la están actualizando día a día.

¿Google Chrome Canary es ideal para aprender a desarrollar web?

• No, porque debido a su continua actualización podríamos tener problemas a la hora de desarrollar páginas o sitios web con este navegador.

¿Cuál es la característica más especial de Google Chrome Dev?

• Su actualización cada semana y funcionalidades antes de que estas salgan para todos los usuarios.

¿Entre las versiones Canary, Dev y la Stable, con cuál deberíamos quedarnos para desarrollar web y por qué?

• Con la Stable porque en esta versión es la más testeada y con menos errores posibles, además de ser la que usa la mayoría de las personas.

¿Todas las versiones de Google Chrome tienen DevTools?

• Sí.

¿Cómo podemos activar las DevTolls de Google Chrome desde el menú del navegador?

• Clic en el menú desplegable (ubicado en la esquina inferior derecha)
• Clic en la opción “Más herramientas”.
• En el menú damos clic en la opción “Herramientas del desarrollador”.

¿Cómo podemos acceder a las DevTolls de Google Chrome por medio del teclado?

• Pulsando F12.
• Pulsando Command + Option + I.

¿Cómo podemos acceder a la consola de las DevTolls de Google Chrome por medio del teclado?

• Pulsando Command + Option + J.

¿Cómo podemos acceder al inspector de elementos de las DevTolls de Google Chrome por medio del teclado?

• Pulsando Commando + Option + S.

¿Qué cosas podemos ver en las DevTolls?

• Los elementos de la página o sitio web (HTML).
• Estilos asignados a los elementos de la página o sitio web (CSS)
• Consola (Ejecuta código JavaScript)
• Acceso a los sources o recursos (imágenes, videos y fuentes)
• Network (tiempo de carga en el sitio o página web)

Tres puntitos>Más herramientas>Herramientas de desarrollador.
Elements: Partes del HTML
Console: Ejecutar instrucciones de javascript para probar cosas en mi sitio web
Sources: Nos dice desde donde se están cargando nuestros archivos
Network: Nos dice que tanto tarda un sitio web en cargar
ATAJO:

• Fn+ F12
• Command+option+j: Abre consola
• Command +option+i

Canary tiene un origen en las minas. Estos animales eran dejados dentro de la mina para saber si el ambiente era tóxico o no. 😦

realmente facilitarian mas el aprendizaje si hablaran bien… profesores = profesoras y profesores, es desgastante estar escuchando redundancias a cada rato que hablan mucho ruido

Para un máximo rendimiento Chrome es bueno pero si tienes una PC de bajos recursos Brave es buenísimos como alternativa de Chrome.

Soy desarrollador y no utilizo Chrome DEV sino el Stable de toda la vida… Que falta de respeto lo se, camaradas. 😦

Google Chrome

Existen 3 versiones:

Google Canary: es la versión que utilizan los desarrolladores para probar sus actualizaciones, no es recomendable porque no es estable, puede tener bugs o errores, solo hasta dominar bien la programación.

Google Dev: es una versión más lenta al actualizar, lo hace cada semana, y permite probar sin ser muy expertos ya que te de brinda funciones nuevas que aún no están en la versión estable.

Google Stable: es la versión todas las funcionalidades estables, ya se probaron en Canary y luego pasaron a Dev, finalmente esta versión ya no tiene errores y es la que usamos a diario.

Cada una de estas herramientas permite instalar las herramientas de desarrolladores, y podemos activarlas de las siguiente manera:

Abrir Google Chrome, luego ir a las configuraciones (los 3 puntos verticales), luego la opción Más Herramientas y luego Herramientas para desarrolladores.

Ahí tendremos las siguientes opciones:

Elements: son los elementos del sitio Web, la parte de html, las etiquetas, tamaños de fuentes, porque mantiene archivos de html y CSS.

Console: ejecuta instrucciones de JS para probar cualquier comando.

Sources: aquí podemos ver de donde se están cargando cada archivo, o las fuentes, en sí, todas las carpetas con las que se carga la Web.

Network: aquí podremos ver cuanto tiempo tarda en cargar cada animación de la web, desde donde lo cargó en forma de cascada y la línea de tiempo que cada archivo tarda en cargar.

Los Shortcuts:

cmd + option + i = abre la ventana de desarrolladores que abrimos ultimamente.

cmd + option + j = abre la ventana de la consola directamente.

cmd + shfit + C = abre el inspector de elementos, que permite ver cada bloque de html que estas construyendo, los elementos de tu sitio Web.

Yo verificando tener chrome instalado mientras veo el curso desde chrome xD

Si desean saber cuales son los navegadores más populares (obviamente Chrome), les dejo el siguiente vínculo, el cual tendrán de forma detalla e incluso ver por región la popularidad de estos:

https://gs.statcounter.com/browser-market-share

Para mí el mejor navegador es Firefox, ya que es un bavegador open source, es muy seguro y tiene un feature para el CSS GRID, bastante genial. Google Chrome también es bueno solo que se come mucho la ram.

En Brave tienes las mismas herramientas de desarrollador 👍🏽

Firefox también tiene una sección de herramientas para el desarrollador, cuales podrían ser las diferencias entre los dos navegadores?

Yo uso Brave esta desarrollado en Chromium

Safaria también tiene sus DevTools. Muy parecido a Chrome

command+option+i: network
command+option+j: console
comman+shift+c: inspector de elementos

Fue interesante la parte de instalar google chrome en una MAC. La verdad crei que seria algo tedioso pero al final su instalacion es mas interactiva que el mismo windows. Al final cada sistema operativo tiene sus cosas y como se debe solucionar estas.

La verdad es que Devtools es una herramienta muy commpleta y merece o varias clases para manejar sus apartados o un curso para majerarlos del mismo modo

Si estas en MacOS y quieres usar las herramientas de desarrollo de tu navegador puedes abrirlas de las siguientes maneras:

1. Haciendo clic derecho sobre la pagina y seleccionando la opción “Inspect” (inspeccionar). Ahi se de desplegarán las herramientas como Elements, Console, Network, etc.
2. También puedes usar un shortCut para abrir el inspector, solo tecleando (Command + Option + i)
3. O si deseas abrir directamente la consola del inspector puedes usar el shortCut (Command + Option + j)

Versiones de Google Chrome:

1. Canary (No recomendable)
2. Dev (Se puede probar sin ser muy experto)
3. Stable (Es la más aconsejable)

La consola es una de las herramientas de desarrollo más utiles al momento de realizar sitios web.

3 versiones de Chrome:
Canary- prototipo de beta (el menos confiable)
Dev- beta
Stable- producto final para todos los usuarios (el más confiable)

Para abrir los developer tools en Chrome: ⌘ (command) + ⌥ (option) + i

chrome vs safari
continuara…

Chrome
Canary = Todas las cosas chulas!
Dev = Probando las cosas chulas!
Stable = La mejores cosas chulas!

Comandos de clase:

Command + option + (i)
Command + option + (j)

Rayos me adelante a esta clase, ya tenia instalado chrome

Cada navegador tiene un panel de herramientas de desarollo, las mas “faciles” de usar es la de google chrome pero una que me gusta bastante como disenador web es la de firefox developer, recomiendo un monton probarlas si te interesa el diseno web

Ahora, probando muestra los errores del sitio de Platzi

a mi parecer, Chrome fue el principal motor para que Firefox, Opera y las demas, crearan sus propias devTools muy utiles, ojala y Brave tenga las propias.

Google Chrome Stable es la versión de funcionalidades totalmente probadas, 100% confiable para uso público sin ningún problema. A esta versión, le puedes agregar la DevTools, que es el kit para empezar a desarrollar en la web usando este navegador popular, y lo puedes hacer yendo a la esquina superior derecha (icono de tres puntos) > Más herramientas > Herramientas del desarrollador

Tienen fases de versiones igual que Debian.

El Chrome DevTools (Inspector de elementos por sus siglas en inglés) es una herramienta de desarrollo integrada en el buscador de Chrome para diagnosticar posibles problemas o errores. También permite testear las modificaciones mínimas para ser visualizadas en pantalla en tiempo real.

Command +option+i

Usuario de WIndows pasando en modo viajo sin ver jajaaj

Hola que tal!
Mi pregunta es, puedo empezar a hacer el curso teniendo un iPad?

Por el momento no tengo computador y sera un macbook pro (creo que es la mejor opcion) tambien si me dices cual seria mejor te lo agradeceria, pero por el momento quiero empezar ya con el iPad.

Gracias de antemano!

Para abrir las developer tools en Chrome pueden usar
⌘ (command) + ⌥ (option) + i

Pero además funciona F12, al igual que en Chrome para Windows. Si tienes las teclas de función habilitadas para las funciones multimedia de MacOS (que es como vienen por defecto) tendrás que usar FN + F12.

De paso, si alguien usa mucho las teclas de función (como en Windows) se puede configurar MacOS para que las teclas funcionen directamente como F1-F12 y que con la tecla FN se activen las funciones multimedia, yendo a la opción KEYBOARD/TECLADO en el panel de SYSTEM PREFERENCES/PREFERENCIAS DEL SISTEMA.

⌘ (command) + ⌥ (option) + i => Abre Network
⌘ (command) + ⌥ (option) + j => Abre Consola
⌘ (command) + ⌥ (option) + c => Abre Inspector de elementos

Aquí un pequeño resumen:

ni idea de estar versiones de chrome

Gracias!

Me gusta también Firefox

⌘ + ⌥ + i

Wow varios meses viendo Dev Tools, pero nunca he comprendí al 100% lo que hace.

Accesos directos para la consola, estructura de la web

Mi devtool favorito es el chrome dev

Wow, super bien!!!

Genial!

el comando para abrirla es alt + cmd + i

Shortcuts Chrome cmd+opt+i : ventana dev tools cmd+opt+j: abrir consola cmd+shift+c: inspector de elementos

Shortcuts:
Para abrir las DevTools: ⌘ (command) + ⌥ (option) + i
Para abrir la consola de comandos: ⌘ (command) + ⌥ (option) + j
Para ver el inspector de elementos: ⌘ (command) + ⌥ (shift) + c

muy buena clase

gracias

genial