Si 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:
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 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:
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...:
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:
Copia esa ubicación, ábrela en el explorador de archivos y localiza el fichero llamado Preferences:
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).
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:
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!