Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Escoge e Instala el navegador y conoce sus DevTools

3/13
Recursos

Aportes 66

Preguntas 14

Ordenar por:

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

o inicia sesi贸n.

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

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

猸愶笍 Super valiosos esos ShortCuts

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.

驴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 鈥淢谩s herramientas鈥.
  • En el men煤 damos clic en la opci贸n 鈥淗erramientas 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 鈥淚nspect鈥 (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 鈥渇aciles鈥 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

Google Chrome ha sido una herramienta muy util para el desarrollo, sin embargo se ha convertido a la vez en un dolor de cabeza por el consumo excesivo de la Memoria Ram, literalmente absorbe toda la RAM que pueda encontrar, yo personalmente utilizo Safari, que aunque tiene ciertas limitaciones en comparaci贸n a Chrome, me ha funcionado muy bien hasta ahora. Happy Coding!

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