Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Qu茅 son las Chrome Dev Tools

5/18
Recursos

Son un conjunto de herramientas para desarrolladores web integradas en los navegadores. Pr谩cticamente, todos los navegadores tienen Dev Tools instaladas. Nos permite ver el comportamiento de nuestro c贸digo para depurarlo y poder implementar mejoras.

Nosotros vamos a usar Chrome Dev Tools, pero t煤 puedes usar cualquiera. La idea es visualizar los cambios en HTML y CSS en tiempo real. Hay plugins que nos permiten hacer esto en el editor de texto, pero es recomendable probar el c贸digo en el navegador antes de pasarlo a nuestro VSC.

驴C贸mo acceder a las Dev Tools?

Lo primero es tener abierto en el navegador el proyecto que queremos trabajar. Para ello hacemos clic derecho en una parte vac铆a de la p谩gina y seleccionamos la opci贸n 鈥inspeccionar鈥.
image.png

Una vez abiertas las Dev Tools nos encontramos con varias pesta帽as y opciones. Nosotros nos centraremos en la pesta帽a elementos para visualizar y modificar nuestro proyecto.

Y eso es todo por ahora. Si quieres conocer m谩s sobre las Dev Tools, te dejo la documentaci贸n de la p谩gina oficial de Google con todas las herramientas.

Contribuci贸n creada con aportes de: Jos茅 Miguel Veintimilla.

Aportes 104

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

La extensi贸n en visual Code se llama 鈥淟ive 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 鈥渋nspeccionar鈥 o 鈥渋nspect鈥.

El panel que se nos abre es dev tools.

con visual studio code, tenemos una extension muy util 鈥淟ive Server鈥, recomendada.

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 鈥淟IVE 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

DEV TOOLS: Son un conjunto de herramientas para desarrolladores web integradas en los navegadores. Pr谩cticamente, todos los navegadores tienen Dev Tools instaladas. Nos permite ver el comportamiento de nuestro c贸digo para depurarlo y poder implementar mejoras. Nosotros vamos a usar **Chrome Dev Tools**, pero t煤 puedes usar cualquiera. La idea es visualizar los cambios en HTML y CSS en tiempo real. Hay plugins que nos permiten hacer esto en el editor de texto, pero es recomendable probar el c贸digo en el navegador antes de pasarlo a nuestro VSC. ## 驴C贸mo acceder a las Dev Tools? Lo primero es tener abierto en el navegador el proyecto que queremos trabajar. Para ello hacemos clic derecho en una parte vac铆a de la p谩gina y seleccionamos la opci贸n 鈥**inspeccionar**鈥. ![image.png](https://static.platzi.com/media/articlases/Images/image%2838%29.png) Una vez abiertas las Dev Tools nos encontramos con varias pesta帽as y opciones. Nosotros nos centraremos en la pesta帽a elementos para visualizar y modificar nuestro proyecto. Y eso es todo por ahora. Si quieres conocer m谩s sobre las Dev Tools, te dejo la [documentaci贸n de la p谩gina oficial de Google](https://developer.chrome.com/docs/devtools/) con todas las herramientas.
Genial la clase!

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 鈥淢ostrar 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 鈥渋nspeccionar 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.

y aqu铆 iniciamos 馃挭馃挭馃挭

Esta es la extensi贸n para VSCode: