Chrome Devtools

2/26
Recursos
Transcripci贸n

Aportes 93

Preguntas 2

Ordenar por:

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

Si se rasur贸! 馃槃

f12 para abrir el inspector mas rapido

RESUMEN:


Recapitulaci贸n.
CCS
No es un lenguaje de programaci贸n, es un lenguaje que me permite dar estilos a lo que maquetamos en HTML.
Usamos selectores de etiquetas solo por la palabra, selectores de clase mediante .nombredeClase, y por ID mediante #nombreId
DevTools:
Es una serie de herramientas que facilitan el proceso de desarrollo. Podemos ver en tiempo real que estamos haciendo con CSS,JS, podemos ver peticiones, im谩genes y dem谩s. Incluso podemos hacer debuggin para hallar problemas al momento de renderizarse.

Chrome Dev Tools se puede volver tu compa帽ero imprescindible a la hora de trabajar en el navegador!
Si les interesa, hay un curso de Debugging con Chrome Dev Tools impratida por 茅ste mismo profesor 馃槈

Si cumplio el afeitado jajaja, pense que lo decia en broma

Les paso unos tips:

  • Con F12 abres el inspector de elementos de manera m谩s sencilla
  • Con Ctrl + u puedes ver el codigo de tu pagina o de cualquier sitio web

Les recomiendo Firefox Developer Edition. Es excelente para CCS Grid. Super recomendada

Jajaja se rasuro鈥 su voz cambio鈥︷煒, el curso y el proyecto se ven buenos, ya quiero empezar

En mac el shortcut fn + f12

Wow la animaci贸n de intro del video esta brutal!! 馃槂

Un shortcut rapido para entrar al Dev Tools
La tecla F12 馃槃

y este pana, jajajajaj realmente se rasuro jajajajajaj

se quito 10 a帽os de encima, asi afeitado se ve mas joven

se quit贸 5 a帽os jaja

Algunos atajos de teclado para DevTools:


.
Windows:

  • Control+Shift+J: Abre el panel de consola
  • Control+Shift+C: Abre el panel de elementos

Mac:

  • Command+Option+J: Abre el panel de consola
  • Command+Shift+C: Abre el panel de elementos

Hombre de palabra 馃獟

驴Y ese muchacho de preparatoria que est谩 dando la clase qui茅n es?

El mejor maestro sin dudas
  • Chrome Dev Tools es una serie de herramientas que nos provee el navegador, podemos generar y ver cambios en tiempo real de nuestra aplicaci贸n web.

Que grande el profe degranda!

Me gustar铆a conocer m谩s a fondo esta herramienta. Firefox Developer Edition, en lo poco que lo he usado, me ha parecido mejor. 隆Vamos!

Yo igual uso Cmd(鈱)+Option(鈱)+I para abrir el DevTools

Mama, mama, ya soy hacker xd

contexto: aqui

ahhhh se rasur贸

Ctrl + Shift + i = para abrir el DevTools

Es incre铆ble el tiempo que se ahorra con esta herramienta

El poderoso aliado del front, las dev tools 馃槢

Conocer茅 el DevTools de Opera 馃槃

Esta es una herramienta esencial, que nos permite corregir lo detalles que no nos gusten de un proyecto y tambi茅n ver los tiempos de carga de cada uno de sus elementos.

DevTools es un conjunto de herramientas de creaci贸n web y depuraci贸n integrado en Google Chrome

El profesor Diego De Granda es el mejor!!! Me encantan sus cursos, est谩n muy bien estructurados y explica muy bien!!!

Llego 2 a帽os despues al curso y si se rasuro xd

馃捇 Acceso r谩pido al Dev Tools - Tecla F12

Chrome Dev Tool:
Es una excelente herramienta a la hora de desarrollar

Excelente Diego!!

chrome Devtools una gran herramienta para desarollar 馃槂

Desde Chrome Dev Tools, podemos interactuar con las propiedades css, en tiempo real.

Chrome dev tools, son las herramientas que provee el navegador, para que podamos ver m谩s din谩micamente nuestro c贸digo. Super importante saber qu茅 y c贸mo se utiliza.

Para conocer m谩s sobre el tema de Chrome Devtools existe el curso de Debugging con Chrome DevTools impartido por Diego De Granda 鈿欙笍

Usen F12 para abrir el inspector mas r谩pido

ohhhh si se rasuro!!

El prop贸sito de las Dev Tools es ayudar a editar paginas sobre la marcha y diagnosticar problemas r谩pidamente. Aqu铆 puedes leer la documentaci贸n del navegador y las Dev Tools.

Shortcuts para abrir las Dev Tools:

  1. F12
  2. Ctrl + Shift + I

Shortcut para buscar r谩pidamente un String, CSS selector, Xpath Queries: Cuando tengas el inspector abierto, vas a teclear Ctrl + F. Esto va a activar una barra de b煤squeda.

Shortcuts si deseas separar o dejar las Dev tools en una pesta帽a aparte:

  1. Ctrl + Shift + P (cuando se active el panel escriben Und, son las iniciales de Undock Into Separate Window ), lo seleccionas y listo.
  2. Ctrl + Shift + P, para quitar la opci贸n de separado y dejar todo tal y como estaba. Luego escribes **rig **, son las iniciales de Dock to right. Lo seleccionas y listo.

Debugging CSS (animaciones)

  1. Ctrl + Shift + P (cuando se active el panel escriben Animations, te va aparece show animation ), lo seleccionas y listo. Con esto puedes revisar el performance.

  2. Puede trabajar el rendering realizando el paso anterior, cuando se active el panel agrega Ren. Con esto pueden revisar el Paint Flashing.

Si deseas buscar una etiqueta(HTML) desde la consola. Puede agregar: inspect(document.querySelector(鈥榠nput鈥)) Puede cambiar el input por otra etiqueta que desee, ejemplo: div o button.

jajaja quede como WTF!!! con la rasurada

Wow, algo que me sorprende es que despu茅s de ya unos mese aqui en platzi, cuando descubres cursos que no has visto, pero los temas ya, se hacen sumamente facil, es decir, si funciona, ha habido una transformaci贸n aqui en Platzi, saludos 馃槂

Chrome Dev Tools

驴qu茅 es? Chrome Dev Tools es una serie de herramientas que nos provee el navegador de Google Chrome, y que permite hacer testing de nuestro c贸digo del sitio web en tiempo real.

驴c贸mo podemos acceder? para acceder al Chrome Dev Tools podemos con:

  • accediendo a una p谩gina cualquiera y dandole click derecho + inspeccionar.
  • en el men煤 de Chrome, seleccionar More Tools > Developer Tools.
  • usando la combinaci贸n de teclas Ctrl+May煤sculas+I (Windows) y Cmd + Option + I (Mac).

a

rayos s铆 se rasuro jaja

Para abrir la inspecci贸n de los elementos puedes hacer estas 3 cosas.

  • ctrl + shift + i
  • f12
  • Clic derecho, inspeccionar elementos

Saludos 馃槃

Chrome Devtools y yo

excelente que en sus cursos explica nuevamente esto

Si se rasur贸 jejeje, bueno tambi茅n repase lo de chrome devtools =)

Podemos utilizar Brave Browser tambien, puesto que tiene las mismas DevTools que Chrome, porque esta basado en Chromiun.

excelente igual que algunos compa帽eros de la comunidad ya lo usaba no sabia su nombre

Chrome Devtools, eres la mejor herramienta para el desarrollador Frontend

Una genialidad esa herramienta

Lo utilizaba pero no sabia que su nombre era Chrome Devtools 馃槷

Chrome Dev Tools es una valiosa herramienta para los desarrollos de software. 馃捇

Siempre he usado el de firefox, probare en este curso chrome devtools.

Genial, vamos con toda

Chrome DevTools

Otros comandos que est谩n buenos una vez que est谩 abierta la herramienta son:

Vista Adaptable (Toggle device tool)
Ctrl + Shift + M

Inspeccionar un elemento con un click
Ctrl + Shift + C

Abrir la consola de JavaScript directamente
Ctrl + Shift + J

Si usas Windows y ya actualizaste Microsoft Edge, tiene muy buenas Dev Tools porque este esta basado en Chromiun

VAMOS A SEGUIR APRENDIENDO.

Se rasur贸 en serio 馃槷

asi empiezan todas las clases de @degranda!

estupendo 馃槃, sigamos aprendiendo 馃槃

Si se rasuro ajajajajaja

Chrome Dev Tools: Herramientas que el Navegador Provee para facilitar el proceso de Desarrollo, podemos ver en tiempo real los cambios que hagamos al CSS, HTML YJS, incluso podemos ver las peticiones generadas.
Debugging: Depuraci贸n en una parte del proyecto para encontrar errores, con Chrome Dev Tool podemos encontrar estos errores y solucionarlos.

Curso de base, buen inicio, muy buena la manera como explica!

Listos todos los juguetes!!! 馃槈

JAJAJA si se rasuro鈥 bien鈥

Jajaja si sabe como es

Base Fundamental.

Excelente clase!!

Excelente!!

Sigamos 馃槃

10 a帽os menos ahaha xD

Es una de las herramientas mas poderosas para ir revisando en tiempo real la maquetaci贸n y funcionamiento de la web

Creo que hab铆a grabado primero la clase donde est谩 sin barba y por 煤ltimo la presentaci贸n de la primera clase, jeje por q no hay continuidad en el di谩logo鈥 Haga lo que haga, excelente profe Diego. gracias!

Excelente, con todo. 馃槂

Esta herramienta sera tu acompa帽ante de toda la vida y el entenderlo y dominarlo sera factor determinante para ser un buen profesional.

En mis inicios lo odiaba, no lo entend铆a pero poco a poco me di cuenta de lo poderosa que es.

El inspector de elementos es una herramienta que nos permite analizar los contenidos de un sitio web. Con 茅l podremos ver el c贸digo fuente de la p谩gina, as铆 como analizar los diferentes elementos que la conforman. Es muy 煤til cuando quieres ver c贸mo est谩 hecho algo en una p谩gina o a la hora de desarrollar para poder afinar estilos y depurar los scripts que se ejecuten.

Cada navegador incluye su propio inspector de elementos. Hay diferencias menores entre ambos, pero b谩sicamente las acciones que podemos realizar son las mismas. En los ejemplos que mostraremos a lo largo de estas publicaciones el inspector de elementos ser谩 el incluido en el navegador Google Chrome.

Para abrir el inspector de elementos podemos hacerlo pulsando la tecla F12 o bien pulsando con el bot贸n derecho en cualquier parte de la p谩gina y acceder a trav茅s de la opci贸n 鈥淚nspeccionar鈥.

La ventana del inspector puede estar integrada en la propia ventana del navegador o mostrarse en una ventana a parte. Para acceder a estas opciones puedes hacerlo mostrando las opciones pulsando el icono de configuraci贸n arriba a la derecha del inspector y cambiando el valor de la propiedad 鈥淒ock Side鈥.

Adem谩s, tenemos opci贸n a pasar con un solo click de vista de ordenador a vista m贸vil, para aquellas p谩ginas en las que tengamos que tener en cuenta los diferentes dispositivos que puedan visualizarla haciendo click en el segundo bot贸n de la barra superior. Al hacer click en la parte superior de la p谩gina se desplegar谩n las dimensiones del dispositivo para realizar la prueba. Autom谩ticamente se mostrar谩 el contenido como si estuvi茅semos accediendo desde ese tipo de dispositivo.

Para CSS Grid, creo que es mejor Mozila Developer Edition

De casi cualquier sitio web con Ctrl + U podemos ver el c贸digo HTML. Hay p谩ginas (como las de bancos) que bloquean esta funci贸n por seguridad. (Me gustar铆a saber c贸mo lo hacen)

que bonito se ve el cursp

Una herramienta interesante es la de layouts que se encuentra en las pesta帽as de la parte central , si te vas abajo te mostrara los contenedores de la pagina actual y cuando oprimes alguna de las cajas podras diferenciar cada seccion de una manera mas comprensible.
https://gyazo.com/e0b43bc0d6dc3936d259512ec70c7e5c

ctrl + shift + c, para entrar r谩pidamente al inspector de elementos en windows

2. Chrome Dev Tools:

Chrome Dev Tools nos facilita las tareas de desarrollos.

A m铆 me encanta usar los frames de iphone cuando valido c贸mo se ve en ciertos tama帽os, aqu铆 por ejemplo un peque帽o proyecto de clon de Pintarest que hice:

Muy fan de Google Chrome

Sigamos

Todo listo para comenzar con el curso :D

驴Que es Chrome Devtools?
Chrome DevTools es un conjunto de herramientas de creaci贸n web y depuraci贸n integrado en Google Chrome.

hola, les dejo este link para que echen un vistazo a las nuevas novedades de las Chrome DevTools este a帽o 2020.
https://css-tricks.com/whats-new-in-devtools-2020/

la verdad siento que diego de granda es uno de los mejores profesores de platzi, a darle con el curso ! 鉂わ笍