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,

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.

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.

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

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

Ctrl + shift + i = inspeccionar

Seria como el Inspector entonces o es el Inspector

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.

• 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?

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.

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

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

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

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

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.

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

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

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

Chrome Dev Tools pan de cada día.

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

Con este profe puedo tomar buenos apuntes.

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

Todo muy bueno, vamso por mas

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

Me encantan los stickers de su laptop.

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 ^^

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

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.

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

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 buena explicación.

GENIAL!

Genial!

buena explicacion

Maravilloso, yo de mi parte ocupo Brave Browser.

el pan de cada día!

bien explicado

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

Todo muy cool 😄

yo uso la de google chrome me parece la mas oportuna

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

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

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

Excelente.

buen video lo de Dev tools

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

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,

Bien explicado el Dev Tools

Emocionado

No están breve como me imaginaba

excelente.

Brutal esta herramienta.

El único inspector que sí salva. 😄

Control + shif + c para inspeccionar de una vez

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.

Super<3

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

Para inspeccionar tambien se puede utilizar f12

gracias

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.

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

Live Server esta good 😃

Chrome Devtools es un conjunto de herramienta que se encarga de ayudarte a desarrollar apps o programas web, así como encontrar errores y problemas que se encuentren en cualquier parte del código. Esta herramienta se encarga de representar, de forma mucho más clara, todos los elementos de código que componen cualquier página web.

Es una herramienta que usan casi todos los desarrolladores en su vida diaria y laboral. Usualmente, este conjunto de tools se utilizan cuando estás empleando JavaScript, HTML o CSS.

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

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

A mi personalmente me encanta google chrome y sus dev tools

genial

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

Otro atajo para el inspector es F12

Amado inspector

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

Excelente

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.

Esta es la extensión para VSCode:

d

Es una herramienta que nos da el navegador que para poder mejorar nuestro proceso de desarrollo. Nos permite ver como nuestro código se comporta y realizar depuración en tiempo real.

Chrome Dev tools es un regalo estupendo !!!

la ex, en Vs Code es Live Server.

Thanks, Dev Tools is useful, in my case I work with Microsoft Edge.

Con que así se llama!

Empezemos 😁