Usando vscode-chrome-debug como extensión de workspace

Escenario:

• VSCode con las extensiones de Remote Development instaladas.
• Desarrollo en contenedores Docker.
• Imagen Docker con chrome instalado.
• Chrome no instalado en la máquina host.
• Queremos utilizar el chrome del contenedor Docker para depurar nuestras aplicaciones.

Guía paso a paso:

• Utilizar un Dockerfile basado en una imagen con chrome instalado (en mi caso, utilizo una imagen basada en Ubuntu 18.04 y personalizada para mis necesidades de desarrollo)
  
FROM rubensa/ubuntu-tini-dev-chrome# Keep container running (for use in VSCode)
  CMD [ «tail», «-f», «/dev/null» ]
• En el fichero devcontainer.json añadir la extensión Debugger for Chrome y forzarla para se se ejecute en «workspace» (en vez de en «ui«)

  {
    ...
    "extensions": [
      // Chrome debugger
      "msjsdiag.debugger-for-chrome"
    ],
    "settings": {
      "remote.extensionKind": {
        // Force chrome debugger extension installation on container
        "msjsdiag.debugger-for-chrome": [
          "workspace"
        ]
      }
    },
    ...
  }

  NOTA: para que esto funciona, también es necesario instalar la extensión localmente (pero manteniéndola deshabilitada Locally y habilitada en Dev Container)

• Configurar los siguientes argumentos Docker dentro del fichero devcontainer.json

  {
    ...
    "runArgs": [
      // X11 Unix-domain socket
      "--mount",
      "type=bind,source=/tmp/.X11-unix,target=/tmp/.X11-unix",
      "--env=DISPLAY=unix${localEnv:DISPLAY}",
      // Allow shared memory to avoid RAM access failures and rendering glitches due to X extesnion MIT-SHM
      "--ipc=host",
      // The kernel requires SYS_ADMIN for Chrome sand-box
      "--cap-add",
      "SYS_ADMIN",
      // $(id -u):$(id -g)
      "-u",
      "1000:1000"
    ],
    ...
  }
  

  En mi Dockerfile particular debo especificar en devcontainer.json que VSCode no sobreescriba el comando por defecto de mi imagen.

  {
    ...
    "overrideCommand": false
    ...
  }
  

Ahora, al abrir tu proyecto en Remote – Containers, podrás depurar el código dentro del contenedor.

VSCode Live Share login manual

• Haz login usando cualquier cuenta en la página: https://prod.liveshare.vsengsaas.visualstudio.com/auth/login
  
• Tras el flujo de autentificación se te redirecciona a la página «Ready to collaborate»
  
• Pulsa en el enlace «Having trouble? Click here for user code directions»
  
• Abre la paleta de comandos del VSCode y escribe > live share: Sign in with user code
  
  
• Pega el código de usuario que has copiado del navegador.

NOTA: El código de usuario solamente es válido durante 2 minutos (comenzando desde que se te muestra la página «Ready to collaborate»)

Docker no usa los mismos DNS que el host

Docker, para los contenedores que no definen su propia red – donde docker usa su dns interno que «delega» en el del host -, rellena el fichero /etc/resolv.conf de los contenedores copiando el /etc/resolv.conf del host y filtrando cualquier servidor de nombres local como podría ser 127.0.0.53.  Si no hay ningún otro servidor de nombres, Docker añadirá los servidores DNS públicos de Google (8.8.8.8 y 8.8.4.4)

En Ubuntu 18.04, y otros sistemas que usan systemd-resolved, /etc/resolv.conf es un enlace a /run/systemd/resolve/stub-resolv.conf y su contenido siempre tiene la ip local 127.0.0.53:

nameserver 127.0.0.53
options edns0

y, como hemos explicado antes, Docker filtra cualquier dirección de loopback al leer el resolv.conf. Por tanto, nuestros contenedores Docker no usaran los DNS que utiliza el host, sino que siempre usará los DNS de Google.

Para solucionar esto, vamos a «tomar control» del fichero /etc/resolv.conf y a realizar las configuraciones necesarias para que los contenedores acaben usando la configuración de DNS del host.

La idea es sencilla.

1. En /etc/resolv.conf seguiremos referenciando como primer dns el 127.0.0.53 (que sabemos que Docker eliminará)
2. Además añadimos una nueva entrada referenciando al propio host (para que los contenedores Docker usen el host como servidor DNS)