Blog / Depurar webs para dispositivos móviles y tablets

Mediante emulación en el ordenador

Developer Tools para Chrome

  1. Abrir Google Chrome.
  2. Menú > Herramientas > Herramientas para desarrolladores
  3. Asegurarnos en Settings que esté activada la opción “Show ‘Emulation’ view in console drawer.”
  4. Apretar Esc para abrir la consola de DevTools.
  5. Seleccionar “Emulation” y escoger el dispositivo que queramos visualizar.
  6. Hacer click en “Emulate”.
  7. Refrescar la página (es importante hacer esto porque aunque veamos que la medida ha cambiado hasta que no refresquemos no visualizaremos la versión móvil, si la hay).

Es recomendable separar la consola del navegador  para poder trabajar en dos columnas.

Fuente: https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Developer Tools para Safari

  1. 1. Asegurarse que todo está actualizado. Se necesita mínimo:
    – Safari 6
    – Mac OSX Lion 10.7.4
    – Xcode 4.5 con iOS 6 SDK (para descargar: https://itunes.apple.com/us/app/xcode/id497799835?mt=12)
  2. Abrir Xcode, botón derecho en el icono del Dock y escoger Open Developer Tool>iOS Simulator. Para escoger el dispositivo qu queremos simular, en el menú del simulador ir a Hardware>Dispositivos.
  3. En el ordenador abrir Safari y ir a Ajustes>Preferencias>Mostrar el menú Desarrollo en la barra de menús.
  4. Ir a Menú>Desarrollo y veremos la opción del simulador. Para poder inspeccionar una web tiene que estar abierta en Safari en el dispositivo.
  5. Seleccionamos la web que queremos inspeccionar.

Fuente: http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari–webdesign-8787

En el dispositivo desde el ordenador

DevTools para Safari

  1. Asegurarse que todo está actualizado. Se necesita mínimo :
    – iPhone/iPad/iTouch con iOS 6
    – Safari 6
    – Mac OSX Lion 10.7.4
  2. Conectar el dispositivo al ordenador via USB.
  3. En el dispositivo ir a Configuración>Safari>Avanzado y activar “Inspector Web”.
  4. En el ordenador abrir Safari y ir a Ajustes>Preferencias>Mostrar el menú Desarrollo en la barra de menús.
  5. Ir a Menú>Desarrollo y veremos el dispositivo que hemos conectado. Para poder inspeccionar una web tiene que estar abierta en Safari en el dispositivo.
  6. Seleccionamos la web que queremos inspeccionar.

Fuente: http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari–webdesign-8787

Remote debugging para Chrome

  1.  Asegurarse que todo está actualizado. Se necesita mínimo :
    – Chrome 31 para Android en el dispositivo
    – Chrome 31 en el ordenador
  2. En Android 4.0 y 4.1 ir a Ajustes > Opciones de desarrollador. En Android 4.2 o superior, las opciones de desarrollo están escondidas por defecto. Para activarlas ir a Ajustes > Acerca del teléfono y hacer tap 7 veces. Si volvemos a la página anterior veremos que ha aparecido la opción “Opciones de desarrollador”.
  3. Activar “USB debugging”.
  4. En Chrome (en el ordenador), instalar la extensión ADB Chrome extension (en versiones posteriores ya no será necesario).
  5. Ha aparecido un icono gris de Android al lado del de Menú en Chrome. Clicarlo y activar ADB.
  6. El botón se volverá verde y podremos seleccionar “View Inspection Targets”.
  7. Conectar el dispositivo mediante USB (si estáis trabajando en Windows puede que tengáis que instalar los controladores del dispositivo para ADB).
  8. Puede ser que el dispositivo nos pida permiso para hacer el debug. Seleccionamos “Always allow from this computer” y OK.
  9. En el menú de Chrome vamos a Herramientas > Inspeccionar dispositivos. Nos mostrará el/los dispositivos que tengamos conectados con las ventanas que haya abiertas en cada uno.
  10. Seleccionamos “Inspect” en la web que queramos inspeccionar.

Fuente: https://developer.chrome.com/devtools/docs/remote-debugging#remote-debugging-chrome-extension
En el dispositivo

Firebug para Safari

  1. Abrir en Safari la página https://getfirebug.com/firebuglite y añadirla a favoritos, cambiando el nombre del marcador a “Firebug”.
  2. Editar el marcador y, en lugar de la URL, pegar este texto:
    javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+’NS’]&&F.documentElement.namespaceURI;E=E?F[i+’NS’](E,’script’):F[i](‘script’);E[r](‘id’,b);E[r](‘src’,I+g+T);E[r](b,u);(F(‘head’)[0]||F(‘body’)[0]).appendChild(E);E=new%20Image;E[r](‘src’,I+L);})(document,’createElement’,’setAttribute’,’getElementsByTagName’,’FirebugLite’,’4’,’firebug-lite.js’,’releases/lite/latest/skin/xp/sprite.png’,’https://getfirebug.com/’,’#startOpened’);
  3. Una vez en la página que queremos inspeccionar, seleccionar el marcador y la consola de firebug aparecerá igual que en el ordenador.

Fuente: http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone