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 52

Preguntas 14

Ordenar por:

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

✨ 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 😄

Uno de las mejores opciones en navegadores para desarrolladores es Firefox Developer Edition, adjunto el enlace, ya que es un excelente navegador.

Descargar Firefox Developer Edition

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

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

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

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

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

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