Uso de DevTools en Chrome para Desarrollo Web

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 😉

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

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

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

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

Jajaja se rasuro…y 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

Hombre de palabra 🪒

¿Y ese muchacho de preparatoria que está dando la clase quién es?

• 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

En serio se rasuro , no lo puedo creer porque lo hizo noooooo !

DevTools → inspeccionar el navegador xd

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(‘input’)) 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 😮

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 “Inspeccionar”.

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

¿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 ! ❤️