Las Herramientas para desarrolladores de Chrome (DevTools) resultan esenciales una vez que te acostumbras, pero al principio pueden resultar un poco abrumadoras. Sobre todo si intentas explorar el c\u00f3digo de un sitio web o solucionar problemas sin tener experiencia en programaci\u00f3n. A veces, las cosas no funcionan como se espera: quiz\u00e1 los elementos no muestran el estilo correcto o la p\u00e1gina carga muy lento. Y, por supuesto, es frustrante no saber c\u00f3mo abrirlas sin tener que navegar por los men\u00fas una y otra vez. Por suerte, existen m\u00e9todos probados para abrir y usar DevTools, as\u00ed que no tendr\u00e1s que estar buscando constantemente.<\/p>\n
Esta es probablemente la forma m\u00e1s r\u00e1pida, sobre todo si est\u00e1s acostumbrado a los comandos de teclado. En Windows o Linux, simplemente pulsa Ctrl + Shift + C<\/kbd>para abrir la pesta\u00f1a Elementos<\/strong> y empezar a inspeccionar. Si quieres ir directamente al registro de la consola, pulsa Ctrl + Shift + J<\/kbd>. Y para un cambio r\u00e1pido general, Ctrl + Shift + I<\/kbd>o simplemente pulsa F12<\/kbd>.\u00bfEn Mac? Es pr\u00e1cticamente lo mismo, pero intercambia Ctrl<\/kbd>con Command<\/kbd>y Shift<\/kbd>con Option<\/kbd>. Por ejemplo, Command + Option + C<\/kbd>abre Elementos. A veces, esto no funciona a la primera, sobre todo si Chrome se resiste o si tienes una distribuci\u00f3n de teclado extra\u00f1a; int\u00e9ntalo de nuevo o reinicia Chrome si es necesario.<\/p>\n Honestamente, estos atajos son una salvaci\u00f3n. Es un poco raro que no sean m\u00e1s prominentes, pero una vez que los memorizas, es m\u00e1s r\u00e1pido que hacer clic en los men\u00fas.<\/p>\n Menos complicado, pero igual de \u00fatil, haz clic derecho en cualquier elemento de una p\u00e1gina web y selecciona Inspeccionar<\/strong>. En lugar de tener que buscar en los men\u00fas, se abren al instante las Herramientas de desarrollo y se resalta ese elemento en la pesta\u00f1a Elementos<\/strong>. O bien, haz clic en el men\u00fa de tres puntos en la esquina superior derecha de Chrome, ve a M\u00e1s herramientas<\/strong> y selecciona Herramientas para desarrolladores<\/strong>. Este m\u00e9todo es \u00fatil si no te gustan los atajos o quieres ahorrar tiempo haciendo clic.<\/p>\n Si Chrome no se abre inmediatamente o las herramientas de desarrollo no muestran lo que esperas, comprueba que tu navegador Chrome est\u00e9 actualizado. A veces, errores o versiones desactualizadas pueden interferir con el correcto funcionamiento de las herramientas de desarrollo.<\/p>\n Muchos desarrolladores y personas curiosas usan DevTools para una amplia gama de tareas: inspeccionar el HTML de una p\u00e1gina, depurar JavaScript, comprobar las solicitudes de red o incluso probar el aspecto de su p\u00e1gina en diferentes dispositivos. Pero recuerda: cualquier edici\u00f3n que realices es solo temporal. Recarga la p\u00e1gina y todo se reinicia. Aun as\u00ed, es muy \u00fatil para probar soluciones r\u00e1pidas o ver qu\u00e9 falla antes de editar el c\u00f3digo base.<\/p>\n Es \u00fatil familiarizarse con las pesta\u00f1as principales:<\/p>\n \u00bfQuieres ver c\u00f3mo se ve tu sitio web en tel\u00e9fonos o tabletas? Haz clic en el bot\u00f3n de alternancia de dispositivos (el peque\u00f1o icono del smartphone) en DevTools o pulsa Ctrl + Shift + M<\/kbd>. Puedes seleccionar dispositivos predefinidos en un men\u00fa desplegable, como iPhone o Pixel, o configurar dimensiones personalizadas para probar tama\u00f1os de pantalla inusuales. Normalmente, esto ayuda a detectar problemas de dise\u00f1o que podr\u00edan pasar desapercibidos en un monitor grande.<\/p>\n \u00bfAlguna vez te has preguntado por qu\u00e9 tu sitio web va lento? Ve a la pesta\u00f1a Red<\/strong>, actualiza la p\u00e1gina y ver\u00e1s todas las solicitudes de carga. Mira en la parte inferior: DOMContentLoaded<\/strong> y los tiempos de carga<\/strong> te indican cu\u00e1nto tard\u00f3 en cargar el HTML en comparaci\u00f3n con el resto. Si estos tiempos son altos, quiz\u00e1s algunas im\u00e1genes sean demasiado grandes o tu alojamiento sea lento. Incluso puedes simular conexiones m\u00e1s lentas desde el men\u00fa desplegable de limitaci\u00f3n, lo cual es \u00fatil si quieres ver su rendimiento en dispositivos de gama media.<\/p>\n Otra herramienta disponible es Lighthouse, a la que se accede a trav\u00e9s del men\u00fa (icono de doble flecha > Lighthouse<\/strong> ).Realiza una auditor\u00eda SEO r\u00e1pida, una comprobaci\u00f3n de rendimiento o una revisi\u00f3n de buenas pr\u00e1cticas. Es como darle a tu sitio web un informe de salud. Ajusta la configuraci\u00f3n para que se ajuste a tu dispositivo de destino, selecciona categor\u00edas como SEO y ejecuta la auditor\u00eda. Los resultados suelen tardar unos 30 segundos, pero pueden darte buenas sugerencias para corregir metaetiquetas, la estructura del contenido o problemas de carga.<\/p>\n Consejo profesional: la documentaci\u00f3n de Chrome ([aqu\u00ed](https:\/\/developer.chrome.com\/docs\/devtools\/)) es bastante detallada si quieres ir m\u00e1s all\u00e1 de lo b\u00e1sico.<\/p>\n En general, una vez que te familiarizas con estas opciones, usar DevTools se convierte en algo natural. No es perfecto (a veces es lento o tiene errores), pero al final, es la forma m\u00e1s r\u00e1pida de solucionar problemas y mejorar tu sitio web sin esperar a los desarrolladores ni escribir tu propio c\u00f3digo desde cero.<\/p>\n Dominar las Herramientas para Desarrolladores de Chrome abre un mundo de posibilidades, ya sea para depurar o simplemente para entender c\u00f3mo se crean los sitios web. Puede resultar un poco inc\u00f3modo al principio, sobre todo con algunas configuraciones, pero una vez que te acostumbras, te ahorra mucho tiempo. Y si un poco de experimentaci\u00f3n te ahorra horas de frustraci\u00f3n, merece la pena. Ojal\u00e1 esto ayude a alguien a empezar sin demasiados problemas.<\/p>\n","protected":false},"excerpt":{"rendered":" Las Herramientas para desarrolladores de Chrome (DevTools) resultan esenciales una vez que te acostumbras, pero al principio pueden resultar un poco abrumadoras. Sobre todo si intentas explorar el c\u00f3digo de un sitio web o solucionar problemas sin tener experiencia en programaci\u00f3n. A veces, las cosas no funcionan como se espera: quiz\u00e1 los elementos no muestran […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10768","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/10768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/comments?post=10768"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/10768\/revisions"}],"predecessor-version":[{"id":10769,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/10768\/revisions\/10769"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/media?parent=10768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/categories?post=10768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/tags?post=10768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}C\u00f3mo usar el men\u00fa de Chrome: no se necesitan atajos<\/h3>\n
C\u00f3mo aprovechar al m\u00e1ximo Chrome DevTools<\/h2>\n
\n
Pruebe las pruebas de dise\u00f1o responsivo<\/h3>\n
Verifique la velocidad y las solicitudes de su sitio<\/h3>\n
\u00bfQu\u00e9 tal el SEO y la auditor\u00eda b\u00e1sica?<\/h3>\n
Resumen<\/h2>\n
\n
Resumen<\/h2>\n