No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Manejo b谩sico de las DevTools

3/17
Recursos

Aportes 858

Preguntas 28

Ordenar por:

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

Mi favorito es Chrome, pero estoy probando Edge para poder utilizar la Inteligencia Artificial.

Cumpl铆 el reto y me sorprendi贸 el resultado.

Manejo b谩sico de las DevTools

Las DevTools de Google Chrome son una herramienta poderosa y 煤til para desarrolladores web. Estas herramientas permiten a los desarrolladores depurar, inspeccionar y optimizar el rendimiento de las aplicaciones web. Aqu铆 hay un breve resumen del manejo b谩sico de las DevTools:

Acceder a las DevTools: Puedes abrir las DevTools haciendo clic derecho en cualquier p谩gina web y seleccionando 鈥淚nspeccionar elemento鈥 o presionando Ctrl + Shift + I en Windows o Cmd + Option + I en Mac. Tambi茅n puedes acceder a las DevTools desde el men煤 principal de Chrome haciendo clic en 鈥淢谩s herramientas鈥 y seleccionando 鈥淗erramientas de desarrollo鈥.

Inspeccionar elementos: Las DevTools te permiten inspeccionar cualquier elemento de la p谩gina, incluyendo HTML, CSS y JavaScript. Simplemente haz clic en el elemento que deseas inspeccionar y las DevTools te mostrar谩n la informaci贸n relevante.

Modificar el c贸digo en tiempo real: Puedes editar el c贸digo HTML, CSS o JavaScript en tiempo real directamente desde las DevTools. Esto te permite experimentar con diferentes cambios y ver c贸mo afectan el aspecto o la funcionalidad de la p谩gina.

Depurar errores: Las DevTools te permiten depurar errores de JavaScript en tiempo real, lo que significa que puedes ver exactamente d贸nde se encuentra el problema y corregirlo de manera r谩pida y eficiente.

Optimizar el rendimiento: Las DevTools ofrecen herramientas para analizar el rendimiento de la p谩gina, incluyendo la velocidad de carga y el uso de recursos. Puedes utilizar esta informaci贸n para identificar problemas y optimizar el rendimiento de la p谩gina.

En conclusi贸n, las DevTools son una herramienta esencial para cualquier desarrollador web. Al permitirte inspeccionar, editar y depurar el c贸digo de la p谩gina en tiempo real, las DevTools te ayudan a mejorar la funcionalidad, el aspecto y el rendimiento de tu sitio web.

Mi navegador favorito desde hace un tiempo es Brave, por el hecho de ser muy r谩pido y bloquear anuncios, me super acostumbr茅, y adem谩s te va dando cierta cantidad de tokens acumulables y luego los podes canjear aunque no tengo muy en claro a煤n como funciona ese tema.

馃洜 Clase #3: Manejo b谩sico de las DevTools 3/17 馃洜


Usando DevTools de los navegadores 馃獩

驴En qu茅 idioma deber铆amos de tener configurado nuestro computador y por qu茅? 馃啑


鈥 Deber铆amos de tener nuestro computador configurado en ingl茅s ya que la industria del desarrollo web gira en este idioma.

驴En d贸nde podemos descargar las DevTools de Microsoft Edge? 鉂


鈥 En la Microsoft Store.

驴Qu茅 es Microsoft Edge DevTools? 馃數


鈥 El explorador Microsoft Edge incluye herramientas de desarrollo web integradas, denominadas Microsoft Edge DevTools. DevTools es un conjunto de herramientas de desarrollo web que aparece junto a una p谩gina web representada en el explorador. Fuente: aqu铆

驴C贸mo accedemos a las DevTools de Google Chrome? 馃煛


F12
CTRL + Shift + I
Clic derecho -> Inspeccionar

驴C贸mo instalar extensiones en Google Chrome?


鈥 Dar click a los 3 puntos alineados en forma vertical (est谩n en la esquina superior derecha del navegador), aparece un men煤 al lado izquierdo, desplazar hasta abajo y seleccionar a Extensiones.

鈥 Se puede buscar las extensiones cuado se da click al recuadro de l铆neas horizontales (esquina superior izquierda) y dar click en Abrir Chrome Web Store, aparece otra p谩gina y en el cuadro del buscador se puede poner por ejemplo Lighthouse (Google Lighthouse es una herramienta automatizada de c贸digo abierto para medir la calidad de las p谩ginas web, fuente: aqu铆), seleccionar entre los resultados el que queremos instalar, luego dar en el bot贸n azul que dice Agregar a Chrome, aparece un cuadro de dialogo y hay que confirmar la instalaci贸n, esperar y listo.

驴Con cuales Navegadores deber铆amos de quedarnos para desarrollar web? 鈽


Google Chrome Dev.
Firefox Developer Edition.

驴C贸mo hacer un Shortcut? 鉁


鈥 Presonar teclas Windows + May煤s + S

Hay un error en el quiz especificamente en esta pregunta

驴C贸mo se denomina la extensi贸n que permite conectar y desconectar r谩pidamente el JavaScript en tu p谩gina web?

ninguna de las opciones que dan es la correcta que deber铆a ser toggle JavaScript

NETFLIX

curioso

Youtube

Parece que el Diccionario de la Real Academia tiene un sitio muy bien parado. 馃槀

Yo siempre uso Chrome! Pero para p谩ginas que no puedo ver desde Colombia, uso Tor (no es para nada raro, aclaro馃榿)

Personalmente, llevo casi 2 a帽os utilizando Brave como navegador principal, y me parece muy bueno, adem谩s que te evita los anuncios en videos de YouTube.

//Symbolab.com
Solucionador matem谩tico de ecuaciones

no me da la posibilidad de subir el pantallazo

Esta clase la tomo desde el nuevo navegador. No sab铆a que existia, ando emocionado jajaja

![](https://static.platzi.com/media/user_upload/image-e854c253-d2cf-40e6-a0bd-c1aa40b4b04c.jpg)
![](https://static.platzi.com/media/user_upload/image-e7005549-7e02-4e40-a764-19dc61c96ce5.jpg) Encontr茅 la extensi贸n LIghthouse en Firefox y decid铆 hacer el reporte al mismo sitio web de los addons de Mozilla. Esta es la nota que obtuvo
EXCELENTE![](https://postimg.cc/v4Wnqhx2)![](https://postimg.cc/v4Wnqhx2) ```js ```
![](https://static.platzi.com/media/user_upload/image-43a58767-ea29-42cb-829a-400cc31ba5ac.jpg)![](https://static.platzi.com/media/user_upload/image-ca15cb78-fe4c-40e0-bab7-60cc87d55ac8.jpg)

P谩gina: Prezi

Esta es una pagina que desarroll茅 para una empresa de protecciones para bicicletas.

Hola. Esta es mi captura :

El reto lo realice con codepen

Lo hice en esrte curso 鈥 Creeme, no les gustar谩 lo que dice de Platzi, a mi tampoco, por eso no lo sub铆.

Brave

Mis navegadores favoritos: Firefox y Brave

Hice un analisis de airbnb.

Facebook, siempre a la vanguardia

mi aporte

Hice la calidad de platzi en su apartado Student home馃槉

La seguridad del navegador web depende de varios factores, como la calidad del c贸digo, la rapidez con la que se actualiza para corregir vulnerabilidades y la capacidad de proteger la privacidad del usuario. En t茅rminos generales, los navegadores m谩s seguros son aquellos que ofrecen actualizaciones frecuentes y oportunas para solucionar problemas de seguridad y privacidad, y que tienen caracter铆sticas incorporadas que protegen al usuario de amenazas en l铆nea.

![](https://prnt.sc/9s08IJo1JHlr)ESTE ES EL RENDIMIENTO DE MI WEB ![](https://prnt.sc/9s08IJo1JHlr)![](https://static.platzi.com/media/user_upload/rendimiento-bd69fa49-3737-4477-bb13-d9879a0fe66f.jpg)
Este es el rendimiento de mi web ![](https://media.discordapp.net/attachments/1241767100817735884/1254813985442631681/rendimiento.png?ex=667adc17\&is=66798a97\&hm=7eed14fdaefed74dadf0e9529284b06cde7a3eb9af6d3331cabb12f85b9d47f8&=\&format=webp\&quality=lossless\&width=1006\&height=676)![]()
Prueben Navegador: ARC !!ALUCINARAN!! 鈫撯啌 <https://arc.net/>
![](https://static.platzi.com/media/user_upload/image-39203ba5-a1d1-4749-a622-aa1417681279.jpg)Wow, una aplicacion de banco, bueno su pagina de bienvenida... saludos desde 2024.
![](https://static.platzi.com/media/user_upload/image-95ca9afa-349d-418f-b7c3-871b754711ee.jpg)
Mi favorito siempre ha sido Chrome, pero es totalmente por costumbre
Mi sitio web alsnippets.com...Genial. hay que optimizar ![](https://static.platzi.com/media/user_upload/Screenshot%202024-06-19%20160759-d2e758c7-e551-4099-8912-24006ec907c6.jpg)
![](https://static.platzi.com/media/user_upload/image-11be9673-3e64-4dc7-8cf9-efd06dfb44f7.jpg)
![](https://static.platzi.com/media/user_upload/image-dacfd44f-18b7-4ee9-ac89-dfea28104b15.jpg) Revisando los primeros pasos del software de mi empresa.
chatgpt![](https://static.platzi.com/media/user_upload/image-3baadc91-a700-4f15-b2b3-80417c54a492.jpg)
![](https://static.platzi.com/media/user_upload/image-4597df82-1f90-420f-bc43-e40a3feb0b3b.jpg)
![](https://static.platzi.com/media/user_upload/Screenshot%202024-06-12%20000137-d589fa81-7004-4cae-b9df-d65aac575c4e.jpg)
![](https://static.platzi.com/media/user_upload/image-94eda16f-fdfc-4f9c-9f80-0ba28f9bfd3e.jpg)una p谩gina que estoy ayudando a hacer, est谩 de arreglar muchas cosas. Pero ya se por donde empezar
Excelentes herramientas
![](https://static.platzi.com/media/user_upload/image-8ec08dd3-c008-4f7f-83cb-2d50a33d214b.jpg) Se ve muy util!
![](https://static.platzi.com/media/user_upload/image-6fb628fc-1a05-4afd-b33e-2aad36a37fb8.jpg)
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-06-04%20120643-105841ee-84df-4c5f-8512-e6f2525659d6.jpg)
A fecha 3 de junio del 2024 la extensi贸n Lighthouse no se encuentra habilitada. ![]()![]()
***Herramientas de desarrollador*** Las puedes abrir con el atajo de teclado (Ctrl+Shift+I).
Mejor bloqueador de Publicidad uBlock Origin <https://chromewebstore.google.com/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=es>
![](https://static.platzi.com/media/user_upload/image-3f494c4d-c768-4590-aceb-88732577532a.jpg)
Chrome
![](https://static.platzi.com/media/user_upload/imagen-1b3ef388-f3b8-483b-a102-40fec8f8d4d3.jpg)
![](https://static.platzi.com/media/user_upload/image-da49ab80-15a3-41c3-84d6-d2387bd10298.jpg)![](https://static.platzi.com/media/user_upload/image-9068be6e-b85a-4cb3-9552-0b81d2cf3937.jpg)
![](https://static.platzi.com/media/user_upload/image-b75639e8-419f-4c68-a1b9-f3c2701d6a47.jpg)Hola realice el test en YouTube y realmente pensaba que obtendr铆a mejores resultados.
![](https://static.platzi.com/media/user_upload/image-9650c53d-7024-420a-96a0-7304207440bb.jpg)Amazon
![]()![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-28%20114252-d47e9906-ff46-4e0d-9a0e-4e6018031fc4.jpg)
Mi favorito es Chrome, pues el que siempre utilizo
![](https://static.platzi.com/media/user_upload/Screenshot%202024-05-27%20203356-84b9dfaa-0d0c-4de3-a982-7e8c2fb5cdb3.jpg)La Pagina de Telcel
![](https://static.platzi.com/media/user_upload/image-e9b9b64c-2b0b-48ad-b4c8-bdf2e981ecfd.jpg)
![](https://static.platzi.com/media/user_upload/image-5339cdfb-e33b-45d7-9046-3406c8f8b51f.jpg)![](https://static.platzi.com/media/user_upload/image-763299a5-bc8e-461b-add1-283f19e8e20e.jpg)
![](https://postimg.cc/v4Wnqhx2)
EXCELENTE...![](https://ibb.co/kcjzx3Q)
![](https://static.platzi.com/media/user_upload/image-b5dab850-4b5a-45dd-91e3-3296bb1ae9ae.jpg)![]()
![](https://static.platzi.com/media/user_upload/image-af20a523-c027-41a6-a8df-0504bb2949f9.jpg) Midiendo instagram
![](https://static.platzi.com/media/user_upload/platzi-665cf5c5-2c1a-41e6-a01b-ae4a368aaeb0.jpg)
Bastante bien para Platzi 2024. ![](https://static.platzi.com/media/user_upload/image-5a03c25a-6800-4515-9da8-04078d1474c9.jpg)
![](https://static.platzi.com/media/user_upload/image-6e544d78-7496-4710-a3e7-2fb4f0b54e26.jpg)
![](https://static.platzi.com/media/user_upload/image-6c7bac32-85ab-48a5-9078-8c3239e5173b.jpg)
![](https://static.platzi.com/media/user_upload/image-5e903e3c-3af2-4b57-8229-17c4ac798c3e.jpg)![](https://static.platzi.com/media/user_upload/image-8cfa9861-8930-4a79-8ab9-050cd08f670d.jpg) Aca esta
![](https://static.platzi.com/media/user_upload/image-3fed6db6-dcd0-4d36-9671-03d342507487.jpg)
Una captura de mi juego favorito Ajedrez ![](https://static.platzi.com/media/user_upload/image-8c272e41-e02e-48ef-b4f0-62662ebfec9f.jpg)
Este es el resultado pero no me permite subir la imagen. ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-08%20164558-d2116599-e84e-4961-96a8-17fd5cc74ee8.jpg) ![]()
![](https://static.platzi.com/media/user_upload/image-970b5571-064f-41c8-b547-3fa74f2a8868.jpg)
![](https://static.platzi.com/media/user_upload/image-14af540d-4620-4372-931e-26f2d28d46b0.jpg)![](https://static.platzi.com/media/user_upload/image-cae350ec-bae7-405d-98ca-4ac39eb28341.jpg)
![](https://static.platzi.com/media/user_upload/image-5f8859da-2366-4bbd-82ba-6e84ab48358b.jpg)
![](https://static.platzi.com/media/user_upload/image-e69956b6-20dc-4cf9-859f-82353388093a.jpg)
![](https://static.platzi.com/media/user_upload/image-15a838f0-6274-4cc3-8bf1-13ef251651aa.jpg)
![](https://static.platzi.com/media/user_upload/image-5bb59149-a819-4f28-9292-5cbb3a3252f2.jpg) prob茅 con la pagina de platzi
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-04-30%20165852-0461b71a-77a2-4ba7-adbe-d982efb5c426.jpg)
Incre铆ble como a pesar de todo lo que tiene la p谩gina de YouTube, llega a mantener puntajes decentes. ![](https://static.platzi.com/media/user_upload/image-53d7e09f-8b7e-4141-a594-cec99ff758a2.jpg)
![](https://static.platzi.com/media/user_upload/image-5c46a655-2dd8-40f5-af6e-6eedfca1731c.jpg)
Llevo a帽os usando Chrome, y dir铆a que es mi navegador favorito, si no fuera porque estoy algo cansado de usarlo. He pensado usar otros navegadores pero, es muy dif铆cil usar otros ya que chrome lo tiene todo.
![](https://static.platzi.com/media/user_upload/image-33e37390-6ce2-4e5d-b366-3f9c20239ccf.jpg)
![](https://static.platzi.com/media/user_upload/image-f8512a52-b6ae-4d5b-9588-1beef626dd0d.jpg)
Mi navegador favorito es el Google Chrome
![](https://static.platzi.com/media/user_upload/image-90194bd7-19a1-42ee-aadb-9b1e672bc80e.jpg)Esta es de Wikipedia, no est谩 del todo mal, pens茅 que ser铆a peor
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-04-22%20152313-288a71ec-cac4-40b5-b4a9-1af21bdc0e09.jpg)
![](https://static.platzi.com/media/user_upload/image-fe0ea522-2921-44ac-8fab-f554afd4b07c.jpg)![](https://static.platzi.com/media/user_upload/image-517ef6ad-08b8-4b3d-aa18-b41b796d1f2d.jpg)
Actualmente me gusta edge, por todo los cambios que pusier贸n