Cómo usar y exprimir Chrome DevTools #dsm19
5 likes1,829 views
The document discusses how to use Chrome DevTools for various purposes like website auditing and optimization. It covers how to access DevTools, simulate different devices, examine page elements and content, analyze performance, and edit elements directly. Tips are provided for using the console to extract metadata and images. Enabling and disabling JavaScript is also demonstrated to compare page loads. Overall the document serves as a guide to utilizing various DevTools features for technical SEO, debugging, and site improvements.
![@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
CONSOLA $$('link[rel="canonical"]')[0]](https://image.slidesharecdn.com/chronedevtools-dsm2019-mjcachon-190515163233/85/Como-usar-y-exprimir-Chrome-DevTools-dsm19-30-320.jpg)
![@mjcachon
#DSM19
#DSM2019
OTROS USOS PARA LA CONSOLA
var images = $$('img');
for (each in images) {
console.log(images[each].src);
}
Extraer todas las imágenes](https://image.slidesharecdn.com/chronedevtools-dsm2019-mjcachon-190515163233/85/Como-usar-y-exprimir-Chrome-DevTools-dsm19-33-320.jpg)
Cómo usar y exprimir Chrome DevTools #dsm19
- 2. @mjcachon #DSM19 #DSM2019 MJ Cachón @mjcachon Trabajo por mi cuenta www.mjcachon.com Construyendo MujeresEnSEO.com ¡HOLA!
- 7. @mjcachon #DSM19 #DSM2019 Cómo acceder Menú de Chrome Atajo Botón derecho 1 3 2
- 8. @mjcachon #DSM19 #DSM2019 Cómo acceder Menú de Chrome Atajo teclado Botón derecho CTRL+Shift+I F12 Command+Option+I
- 9. @mjcachon #DSM19 #DSM2019 Cómo acceder Menú de Chrome Atajo Botón derecho
- 12. @mjcachon #DSM19 #DSM2019 Simular un dispositivo móvil Uso 1 Uso 1
- 13. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent Ver aspecto Responsive o dispositivos concretos
- 14. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
- 15. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent Simular giro de móvil en horizontal
- 16. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
- 17. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent Si clicas, se adapta el responsive a esa anchura
- 18. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
- 19. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
- 20. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent Captura Área Visible www.marketingandweb.es_marketing_congreso-marketing-online-dsm_.png Captura Completa
- 21. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
- 22. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent 1 2
- 25. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt ELEMENTOS Se activa con CMD + F
- 33. @mjcachon #DSM19 #DSM2019 OTROS USOS PARA LA CONSOLA var images = $$('img'); for (each in images) { console.log(images[each].src); } Extraer todas las imágenes
- 34. @mjcachon #DSM19 #DSM2019 OTROS USOS PARA LA CONSOLA $$('h2 a').join('n') Extraer todas las urls de los H2 $$('a').join('n') Extraer todos los enlaces $$('a').length Contar todos los enlaces
- 35. @mjcachon #DSM19 #DSM2019 Rendimiento y Velocidad de cargaUso 3
- 36. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
- 37. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
- 38. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Ver estado del certificado
- 39. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
- 40. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Todos los recursos http de la url
- 41. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Status code, formato, peso, tiempo de carga, cascada
- 42. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Al clicar en la url, info extra
- 43. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
- 44. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Js habilitado Js deshabilitado
- 45. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
- 46. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
- 47. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
- 48. @mjcachon #DSM19 #DSM2019 Editar elementos o contenidosUso 4
- 49. @mjcachon #DSM19 #DSM2019 Contraste de color de fuente y color de fondo
- 52. @mjcachon #DSM19 #DSM2019 VISUALIZAR MEJORAS SEO DESDE EL EDITOR ¿quitamos el breadcrumb?
- 53. @mjcachon #DSM19 #DSM2019 VISUALIZAR MEJORAS SEO DESDE EL EDITOR Así quedaría…
- 55. @mjcachon #DSM19 #DSM2019 LECTURAS Y RECURSOS INTERESANTES Oficial: https://developers.google.com/web/tools/chrome-devtools/ Externos: https://searchengineland.com/chromes-devtools-seo-10-ways-use-seo-audits-266433 https://www.onely.com/blog/chrome-developer-tools-overview/ https://trafficthinktank.com/google-chrome-technical-seo/ https://codeseo.io/google-chrome-seo-without-a-plugin/ https://www.reddoor.biz/blog/chrome-developer-tools-9-hacks-for-an-seo/ http://anti-code.com/devtools-cheatsheet/ https://code.tutsplus.com/articles/chrome-dev-tools-networking-and-the-console--net-28167