Qué son las Chrome Dev Tools

La extensión en visual Code se llama “Live Server”

Si les interesa, hay un curso completo de Debugging con Chrome Dev Tools impartido por éste mismo profesor 😉

Chrome DevTools
Es un conjunto de herramientas de creación web y depuración integrado en Google Chrome. Usa DevTools para iterar y depurar tu sitio,

https://developers.google.com/web/tools/chrome-devtools ahí encunetran más sobre Chrome dev tools

Un atajo para abrir el inspector es Ctrl + shit + i

Les comparto mis apuntes, espero que le sirva. 😄

¿Qué es Chrome Dev Tools?

Es una herramienta que nos da el navegador para poder mejorar nuestro proceso de desarrollo, nos ayuda ver como nuestro proyecto se comporta en el navegador. Todo esto para poder hacer mejoras y debigging en tiempo real.

Debugging

Es depurar nuestro código de los problemas que tengamos en nuestro código especialmente cuanto estamos trabajando con JavaScript.

Depurar nuestro proyecto con el navegador nos puede ayudar a detectar las partes que no está funcionando para luego solucionarlo.

Cambios en tiempo real

Vamos a usar Chrome Dev Tools para poder manipular el CSS en tiempo real.

Podemos usar el navegador para hacer cambias en nuestro CSS y poder verlo en tiempo real las cosas que manipulamos en el navegador, lo mismo sucede con el HTML y el JavaScript que tengamos en el proyecto.

Una forma de hacer cambios es hacerlo directamente en dev tools y una vez esté todo bien los pasamos a nuestro editor de texto.

Entrar a Dev Tools

Podemos hacer click derecho sobre cualquier parte de nuestro proyecto y dar click en “inspeccionar” o “inspect”.

El panel que se nos abre es dev tools.

con visual studio code, tenemos una extension muy util “Live Server”, recomendada.

Recomiento esta extension - HTML to CSS autocompletion
https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion

Les recomiendo tambien Firefox Developer Edition

Chrome dev-tools es excelente pero ultimamente he estado experimetnando con Mozilla Developer Edition. Su herramienta de desarrollo tiene unas caracteristicas muy interesantes especialmente para el manejo del grid. Literalmente te puede dibujar todo el grid con indicadores muy completos.

Prueben también otros entornos de desarrollo como el del Firefox, están bastante buenos y no hay nada como probar varios estilos y herramientas y elegir tu favorita.
Aquí les dejo la de EDGE que a mi parecer es muy buena:

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/open/?tabs=cmd-Windows

**OTRAS FORMAS ABRIR CHROMEDEV TOOLS
**Windows:
Ctrl + Mayús + I
F12
MAC
Cmd + Opción + I

Les comparto un artículo de Medium:
use-chrome-devtools-like-a-senior-frontend-developer

Excelente curso para repaso

Chrome Dev Tools
.
Chrome Dev Tools, es una herramienta que nos otorga el navegador para mejorar nuestro proceso de desarrollo y ver como nuestro código se comporta a la vez poder manejarlo en tiempo real.

Dev Tools es una forma rápida de ver que elementos quieres modificar dentro de tú código, sin necesidad de hacerlo previamente,

En mi opinion me ha funcionado mejor: https://www.mozilla.org/es-AR/firefox/developer/

Seria como el Inspector entonces o es el Inspector

• Chrome DevTools son herramientas para hacer debuging de nuestro código en tiempo real de html, css y js.

¿Como coloca el devTools en modo oscuro?

El inspector de elementos es una herramienta esencial para encontrar los detalles y fallos que queramos corregir en el Frontend de un proyecto.

Aquí les dejo un link donde explican como instalar live server, para ver los cambios de su proyecto en tiempo real. 🔥🔥🔥

Si nos dedicamos a tareas de optimización web o estamos muy interesados en el rendimiento y eficiencia de nuestra página, podemos utilizar la pestaña Network de Chrome Developer Tools, la cuál nos muestra las peticiones (y sus características) que se han realizado para cargar la página.

Ctrl + shift + i = inspeccionar

Todos los navegadores tienen un DevTools integrado, en algunos navegadores como Edge o Safari es necesario activarlos desde su configuración (Esto para que usuarios comunes no se tropiecen accidentalmente con el código) Y DevTools también es un ejemplo de por qué no se debe manejar data sensible desde el front ^^

Es una buena herramienta, y lo complemento usando LiVE SERVER.

Muchas gracias por el repaso rápido de los fundamentos vistos en el curso Definitivo de HTML y CSS, siempre es gentil y ayuda mucho regresar a las bases para una revisión rápida de introducción. Me gusta el estilo de enseñanza de este maestro.

Con este profe puedo tomar buenos apuntes.

Potente y necesaria herramienta la dev tools. Vamos a utilizarlas de la forma óptima que nos enseñará Diego.

Sirve la extensión de Live server en visual Studio Code

Me encantan los stickers de su laptop.

Cuando trabajas con JavaScript, el editor de texto es una herramienta indispensable, para saber donde la embarraste. Uso bastante su consola.

Los estilos permiten que el desarrollador visualice cambios realizados de manera local.

Además, puede aumentar los márgenes, disminuir el tamaño de la fuente y verificar cómo se verán los elementos con colores. A esto se suma la capacidad de editar la estructura HTML de una página, añadir y modificar textos, clases, IDs, e incluso borrar líneas de código. Dentro de la edición de estilos se pueden asignar estados a las clases o elementos seleccionados y revisar todos los estilos aplicados o heredados de un elemento.

También tiene la posibilidad de modificar el alto y el ancho de elementos, y añadir o modificar un padding, margen e incluso bordes del elemento.

excelente, siempre en el momento en que se empieza a desarrollar estas herramientas son de lo mas utiles

En visual studio code hay una extension llamada “LIVE SERVER” que te permite hacer algo similar que el dev tools.
Podes ver la web, realizar cambios y ver el impacto en el momento en la web.

Muy bien que se vea un poco mas a detalle que son las Dev Tools, en cursos pasados de la ruta front end no se había tocado tanto este tema

El mejor amigo del Developer el Inspector, vaya que si lo vamos a usar para el resto de nuestros códigos.

Esta herramienta de desarrollo es muy utilizada en el desarrollo, sobre todo para realizar responsive web.

Todo muy bueno, vamso por mas

Muy buena explicación.

Chrome Dev Tools pan de cada día.

Excelente poder aprender a usar dicha herramienta. Explicación clara y sencilla.

Excelente herramienta que es dev tools, la uso en mi día a día como desarrollador front-end y en verdad es demasiado útil

tambien puedes instalar live-server con npm en la terminal de comandos colocas

• npm install ------>instalas npm

• npm -v ------> revisas la version de npm

• npm init -y ---------> inicializas npm con un package.json

• npm install live-server--------> instalas live-server

luego en el archivo package.json colocas esto:

"scripts": {
    "start": "live-server"
  },

y para ejecutarlo en el navegador el live server, colocas en la terminal:

• npm run start

y listo a tiempo real se actualizan tus cambios en el css o html

Llevo un par de meses ocupandolo y se me hace un buen navegador…

Clase 5 - Qué son las Chrome Dev Tools

¿Qué son las Chrome Dev Tools?

• Son un conjunto de herramientas para desarrolladores integradas en los navegadores, las cuales usamos para ver el comportamiento de nuestro código para depurarlo e implementar mejoras.

Todos los navegadores tienen Dev Tools?

• Sí.

¿Cómo podemos acceder a las Dev Tools de Google Chrome?

• Mouse: Damos clic derecho y en el menú que se despliega damos clic en la opción inspeccionar.
• Teclado: Pulsando la tecla F12

Live Server esta good 😃

El atajo de teclado es F12.

Yo soy muy práctica, primero me hago el curso prático para saber como aplicarlo cuando aprenda el definitivo XD

En el canal de FreeCodeCamp hay un curso muy interesante sobre la Chrome devTools

https://www.youtube.com/watch?v=gTVpBbFWry8

Herramientas Dev para los desarrolladores, básicas en el día a día.

Como fact, si desean que su código se manifieste de manera directa en el navegador, pueden hacer con la extensión de live server de visual studio code

A mi personalmente me encanta google chrome y sus dev tools

Me encanta Google Chrome. Aunque siempre existe el debate sobre si es mejor Firefox, e incluso ahora dicen que Edge es lo mejor para desarrolladores.
Bueno, ya nos dirán los expertos.

Aquí puedes revisar todo sobre las Dev Tools 😃
https://developer.chrome.com/docs/devtools/

Chrome DevTools
Es un conjunto de herramientas de creación web y depuración integrado en Google Chrome. Usa DevTools para iterar y depurar tu sitio,

gracias

buen video lo de Dev tools

El único inspector que sí salva. 😄

excelente.

buena explicacion

bien explicado

Todo muy cool 😄

Bien explicado el Dev Tools

el pan de cada día!

Mozilla for Developers se me hizo un browser muy interesante para desarrollo web

GENIAL!

De los que mejor explica creo… muy buen curso!!

genial

Genial!

Brutal esta herramienta.

yo uso la de google chrome me parece la mas oportuna

No están breve como me imaginaba

Maravilloso, yo de mi parte ocupo Brave Browser.

Emocionado

También si presionan F12 en su navegador se abren las dev tools

en cada uno de mis proyectos esta herramienta es muy valiosa

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

Excelente

Control + sHift + C, es mi favorita y me parece la mejor

Otro atajo para el inspector es F12

Chrome Dev Tools (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.

Control + shif + c para inspeccionar de una vez

Super<3

Excelente.

Amado inspector

como Buscar un episodio favorito en Spotify e inserta el código de <iframe>?’

Como atajo en Chrome también se puede usar la tecla F12 en Windows:)

Para inspeccionar tambien se puede utilizar f12

la ex, en Vs Code es Live Server.

Si estás usando Safari, puedes encontrar las dev tools así:

• Abre el menú Safari (En la barra superior de tu pantalla del lado izquierdo, justo a la derecha de la manzanita de apple)

• Haz click en preferencias (cmd + ,)

• Busca la opción de avanzado (Es el último ícono y está a la derecha)

• En la parte más baja de esa nueva ventana, está la opción “Mostrar el menú de desarrollo en la barra de menús”

Una vez que haces click en la caja y se activa la palomita, podrás ver que en tu barra de menús ya está la opción de desarrollo e incluso, si haces click en cualquier página del navegador, ya te aparecerá la opción de “inspeccionar elemento” es muy similar a como aparece en Chrome.

Una buena práctica es probar nuestros desarrollos en diferentes navegadores, así podemos verificar que nuestro desarrollo se ve como esperamos para la gran mayoría de los usuarios.

Empezemos 😁

Con que así se llama!

Excelente

Les puede interesar para práctica ( https://www.frontendmentor.io/ ). Futuros proyectos.

Esta es la extensión para VSCode: