Cómo usar y exprimir Chrome DevTools #dsm19

CÓMO USAR
#DSM19
#DSM2019
CHROME
DEVTOOLS
@mjcachon

@mjcachon
#DSM19
#DSM2019
MJ Cachón
@mjcachon
Trabajo por mi cuenta www.mjcachon.com
Construyendo MujeresEnSEO.com
¡HOLA!

@mjcachon
#DSM19
#DSM2019
Hoy vamos a…

@mjcachon
#DSM19
#DSM2019
Cómo acceder
Menú de Chrome
Atajo
Botón derecho
1
3
2

@mjcachon
#DSM19
#DSM2019
Cómo acceder
Menú de Chrome
Atajo teclado
Botón derecho
CTRL+Shift+I
F12
Command+Option+I

@mjcachon
#DSM19
#DSM2019
Cómo acceder
Menú de Chrome
Atajo
Botón derecho

@mjcachon
#DSM19
#DSM2019
Interfaz
Panel inferior Panel lateral

@mjcachon
#DSM19
#DSM2019
¡Vamos allá!

@mjcachon
#DSM19
#DSM2019
Simular un dispositivo móvil
Uso 1
Uso 1

@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

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent
Simular giro de móvil en horizontal

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent
Si clicas, se adapta el responsive a esa anchura

@mjcachon
#DSM19
#DSM2019
Resonsive /
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

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent
1
2

@mjcachon
#DSM19
#DSM2019
EtiquetasUso 2

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
document.title
document.title.length
CONSOLA

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
ELEMENTOS
Se activa con CMD + F

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
document.all.description.content
document.all.description.content.length
CONSOLA

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
ELEMENTOS

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
document.all.robots.contentCONSOLA

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
CONSOLA $$('link[rel="canonical"]')[0]

@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

@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

@mjcachon
#DSM19
#DSM2019
Rendimiento y Velocidad de cargaUso 3

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Ver estado del certificado

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Todos los recursos http de la url

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Status code, formato, peso, tiempo de carga, cascada

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Al clicar en la url, info extra

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Js habilitado Js deshabilitado

@mjcachon
#DSM19
#DSM2019
Editar elementos o contenidosUso 4

@mjcachon
#DSM19
#DSM2019
Contraste de color de fuente y color de fondo

@mjcachon
#DSM19
#DSM2019
document.designMode = "on"CONSOLA

@mjcachon
#DSM19
#DSM2019
ELEMENTOS

@mjcachon
#DSM19
#DSM2019
VISUALIZAR MEJORAS SEO DESDE EL EDITOR
¿quitamos el
breadcrumb?

@mjcachon
#DSM19
#DSM2019
VISUALIZAR MEJORAS SEO DESDE EL EDITOR
Así quedaría…

@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

¡GRACIAS!
#DSM19
#DSM2019
CONTACTO: SOMOS@MJCACHON.ES
@mjcachon

Cómo usar y exprimir Chrome DevTools #dsm19

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Cómo usar y exprimir Chrome DevTools #dsm19

Similar to Cómo usar y exprimir Chrome DevTools #dsm19 (20)

More from MJ Cachón Yáñez

More from MJ Cachón Yáñez (20)

Recently uploaded

Recently uploaded (20)

Cómo usar y exprimir Chrome DevTools #dsm19