Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=7b66a40a-9e97-44f3-abb1-0b9d46bd7068

Cómo exportar y restaurar tus dispositivos personalizados en Chrome DevTools: Guía Completa

Imagen ornamentalSi haces desarrollo o diseño web, sin duda utilizas a diario las herramientas del desarrollador de Chrome (Developer Tools o Dev Tools). Son herramientas indispensables para poder ver exactamente qué está pasando en tu aplicación y cómo solucionar posibles problemas, medir rendimiento, y un millón de cosas más (por ejemplo).

Una de las características más interesantes es el emulador de dispositivos. Se trata de una utilidad que nos permite probar una página o aplicación web emulando móviles y otros aparatos para ver cómo se comporta en ellos. Nos permite determinar las dimensiones de pantalla, la densidad de píxeles, si es un dispositivo táctil, cambiar su orientación, y muchas cosas más:

El emulador de las Dev Tools en acción

Se activa sacando las Dev Tools en cualquier pestaña (F12 o CTRL/CMD+MAYs+I) y pulsando el iconito de arriba a la izquierda o la combinación CTRL+MAYs+M:

El icono del emulador

El desplegable de la parte superior te permite seleccionar entre una lista de dispositivos a emular. Aunque la lista está bastante bien, generalmente vas a necesitar cambiarla para añadir otros diferentes y, muchas veces, querrás añadir tus propios dispositivos personalizados, para lo cual existe una opción Editar justo al final de la lista de dispositivos:

La opción Edit

Por ejemplo, esta es la lista de dispositivos personalizados que tengo yo en mis equipos, para poder probar ciertas cosas concretas y que incluye cosas como el típico portátil con pantalla barata, el navegador de YouTube en varios dispositivos, etc...:

Mi lista de dispositivos

Esto está muy bien, pero tiene un problema: no existe una manera nativa de poder exportar todos esos dispositivos personalizados que has definido. Si reinstalas el sistema operativo o si tienes más de un equipo, tampoco se sincronizan por lo que tendrías que meterlos a mano de nuevo.

Vamos a ver un "hack" para poder exportarlos manualmente y llevártelos a donde quieras.

Localizar y abrir el archivo de preferencias de Chrome

Generalmente estará ubicado en tu perfil móvil en Windows o en la carpeta .config de tu carpeta raíz en Linux/macOS. Pero lo más fácil para obtener la ubicación es abrir Chrome y escribir en la barra de herramientas: chrome://version/. Esto te dirá la ubicación exacta de tus archivos personales en el navegador:

La configuración de Chrome, con la propiedad Ruta del perfil destacada

Copia esa ubicación, ábrela en el explorador de archivos y localiza el fichero llamado Preferences:

El archivo Preferences seleccionado

Aunque es un archivo sin extensión, lo que tiene dentro en realidad es un documento de texto en formato JSON, aunque completamente minimizado y difícil de leer.

Puedes abrirlo como prefieras, pero mi recomendación es que lo copies a otro lado y le cambies el nombre, poniéndole la extensión .json. Ahora ya lo puedes abrir con Visual Studio Code o con tu editor preferido.

⚠️ Mucho cuidado: el archivo puede ser muy grande dependiendo del uso que hayas hecho de tu navegador. El mío, por ejemplo, son varios MB por lo que ciertos editores "se colgarán" al abrirlo.

Otra buena opción para abrir el archivo y copiar el nodo con facilidad es Dadroit (gratuito para uso personal y multiplataforma), que es un visor de JSON capaz de manejar archivos grandes y te permite copiar directamente a un archivo el contenido de cualquier nodo. Eso sí: no te vale para la segunda parte de restaurar ya que permite escribir en los archivos.

En mi caso, el editor rápido que utilizo habitualmente y que es perfecto para abrir este archivo es Notepad++ (solo para Windows, lo siento). Tiene dos características muy buenas para este caso:

  • Es capaz de abrir muy archivos grandes instantáneamente, incluso dándoles formato.

  • Tiene una extensión llamada JSON Viewer que trae la capacidad de "embellecer" el formato JSON (darle formato, vamos). Búscala desde el menú Plugins > Plugins Admin).

La opción de dar formato al JSON

Abre el archivo renombrado y dale formato para poder localizar el nodo que nos interesa, que es el que se llama: custom-emulated-device-list. Búscalo con CTRL+F.

Toda la configuración que nos interesa está junta en una sola línea larguísima escapeada. Cópiala poniéndote al principio y pulsando MAYÚSCULAS + FIN en tu teclado.

Truco: si tienes el "wrapping" activado lo anterior solo te copiará la primera línea visible del nodo, no las líneas virtuales que hay debajo debido a dicho "wrapping". Puedes copiarla entera si le das a MAYÚSCULAS + FIN y luego sin soltar las mayúsculas le vuelves a dar a FIN otra vez:

Animación mostrando el proceso descrito

Ahora copia ese contenido en un archivo JSON nuevo (por ejemplo, chrome-dispositivos-personales.json o similar).

¡Listo!, ya tienes una copia de seguridad de los dispositivos.

Restaurar los dispositivos en otro equipo

Si ahora quieres llevarte la definición de los dispositivos a otro lado, tienes que repetir la operación pero a la inversa.

Antes de nada, abre Chrome en el equipo de destino y asegúrate de que hay al menos un dispositivo personalizado creado, aunque sea con los valores por defecto. Esto creará el nodo correspondiente en el lugar adecuado, para que luego puedas sustituirlo.

Asegúrate de que todas las ventanas de Chrome están cerradas. Abre el explorador de procesos para verificar que no hay ningún Chrome.exe o similar en ejecución y, si es necesario, mata el proceso.

Localiza el archivo Preferences en el nuevo equipo. Vas a trabajar directamente con él, así que para evitar posibles meteduras de pata, haz una copia a otro lado para poder restaurarlo en caso de ser necesario.

Abre el archivo real (no la copia) con un editor de texto que sea capaz de manejarlo (ya que, como digo, puede pesar lo suyo).

Localiza el nodo custom-emulated-device-list y trata de localizar bien el siguiente nodo para ver dónde termina. Esto puede ser complicado a veces porque hay tanta información escapeada que es casi imposible ver dónde termina.

Truco: formatea el archivo JSON como vimos antes y así podrás ver con facilidad cuál es el nodo que sigue a custom-emulated-device-list en la lista. Así podrás seleccionarlo todo con precisión.

Ahora que tienes seleccionado el nodo, abre en otro editor el backup que hiciste en el otro equipo y copia los contenidos completos al portapapeles.

Vete al archivo Preferences y pega el nodo del backup sobrescribiendo el preexistente. Ten cuidado de no omitir la coma que lo separa del nodo siguiente. Guarda el archivo.

Ahora ya puedes abrir Chrome de nuevo.

Vete a las herramientas del desarrollador y activa el emulador de dispositivos. Ya deberías ver allí la lista con tus dispositivos personalizados.

La verdad es que Chrome lo debería poner mucho más fácil y habilitar todo este proceso con un simple clic en algún lado. Pero como es así... ¡Espero que te haya resultado útil!

José M. Alarcón Aguín Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José M. Alarcón Aguín
Archivado en: Herramientas

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.