page how google emulate debugger debug chrome debugging mobile mobile-safari remote-debugging web-inspector

debugging - google - how to debug on chrome



¿Cómo depurar sitios web en dispositivos móviles? (15)

¿Cómo depuran las personas los sitios web en los dispositivos móviles?

Me gustaría poder manipular HTML y CSS de forma similar al uso del Inspector en un navegador de escritorio y depurar JavaScript.

¿Estás usando php para decidir el agente de usuario?

si es así, uso ... Fennec y luego agrego el agente de usuario de fennec a la lista de excepciones para sus dispositivos móviles que serían

if ($_SERVER[''HTTP_USER_AGENT''] == ''4.0b5'') { return = true; }

Agregado: Cuando hago swap de css para dispositivos móviles, uso este script y le agrego la excepción anterior para fennec.

Abra el simulador de iOS que viene con Xcode, luego abra Safari, y debería ver esta opción en el menú "Desarrollar"

Funciona igual que Firebug

Adobe acaba de lanzar una nueva herramienta, una nueva herramienta de inspección y previsualización: Adobe Shadow . La página con instrucciones está here .

Se sincroniza la navegación web móvil con la computadora y permite realizar inspecciones web y manipulación DOM.

En Chrome:

Configuración -> Herramientas -> Herramientas del desarrollador -> Configuración (abajo del sitio) -> Agente de usuario (en el menú pestaña) -> "Anular agente de usuario"

Esta es la respuesta correcta, no estoy seguro de por qué Blaine solo lo dejó como un comentario!

A partir de iOS 6 Remote Debugging está disponible: https://.com/a/12762449/72428

En OS X puede usar el inspector web Safari en el simulador iOS Y dispositivos iOS 6.

  1. Primero habilite el menú Desarrollador en Safari en su Escritorio.

  2. A continuación, habilite la depuración remota en su dispositivo iOS (o simulador).

    Configuración> Safari> Avanzado> Web Inspector (ON)

  3. Vuelva a Safari en su computadora, haga clic en el menú Desarrollador y seleccione su dispositivo (por ejemplo, iPhone Simulator, iPhone)

Hay un bookmarklet para una versión lite de Firebug que puede usar en dispositivos móviles.

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[e](''head'')[0]||F[e](''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'');

Puede usar este segundo bookmarklet para mostrar un registro de la consola en Android

javascript:(function(){if((/android/gi).test(navigator.appVersion)){console={"_log":[],"log":function(){var%20arr=[];for(var%20i=0;i<arguments.length;i++){arr.push(arguments[i]);}this._log.push(arr.join(",%20"));},"trace":function(){var%20stack;try{throw%20new%20Error();}catch(ex){stack=ex.stack;}console.log("console.trace()/n"+stack.split("/n").slice(2).join("%20%20/n"));},"dir":function(obj){console.log("Content%20of%20"+obj);for(var%20key%20in%20obj){var%20value=typeof%20obj[key]==="function"?"function":obj[key];console.log("%20-/""+key+"/"%20->%20/""+value+"/"");}},"show":function(){alert(this._log.join("/n"));this._log=[];}};window.onerror=function(msg,url,line){console.log("ERROR:%20/""+msg+"/"%20at%20/""+"/",%20line%20"+line);}window.addEventListener("touchstart",function(e){if(e.touches.length===3){console.show();}});}})();

También hay uno de farjs.com (similar a jsConsole)

javascript:(function(){ base_url = ''farjs.com''; base_path = ''''; var _my_script=document.createElement(''SCRIPT''); _my_script.type=''text/javascript''; _my_script.src=''http://farjs.com/bookmarklets/injector_v1.js''; document.getElementsByTagName(''head'')[0].appendChild(_my_script);})()

Además de weinre (Web Inspector Remote) . También hay..

  • Aplicación MIHTool iOS : un contenedor para weinre. Versión gratuita y versión de pago disponible.

  • SocketBug : una utilidad de depuración remota construida con Socket.IO

  • jsConsole : una herramienta de línea de comandos de JavaScript simple. Sin embargo, también ofrece la posibilidad de conectarse a otras ventanas del navegador para controlar y depurar remotamente esa ventana, ya sea en otro navegador u otro dispositivo.

Hay varias maneras de depurar DOM y JS en dispositivos móviles. Con Adobe Shadow también puedes inspeccionar localStorage.

  • weinre
  • Adobe Shadow
  • Para Mac y iPhone: iWebInspector

Recientemente me encontré con el mismo problema con un sitio móvil que estaba desarrollando para el trabajo. La mejor solución que encontré fue usar el UserAgent de Safari configurado para Iphone (asegúrese de tener habilitadas las herramientas de desarrollador de Safari). Deberá detectar que el usuario proviene de un dispositivo móvil y redirigirlos a la URL de su dispositivo móvil o cargar las hojas de estilo específicas del dispositivo móvil, ya que este método no funciona al establecer el tipo de medio css.

Firefox también tiene esta capacidad, pero no registra los estilos webkit css (que supongo que utilizará ya que funcionan tanto para Mobile Safari como para Android).

Se encontrará con algunas inconsistencias entre su navegador de escritorio y su navegador móvil actual, pero para identificar rápidamente los estilos y la depuración de JavaScript funcionó a las mil maravillas.

Espero que esto ayude.

Sé que esta pregunta fue hecha hace mucho tiempo, pero aún espero que mi respuesta ayude.

Puede usar NetBeans IDE para depurar usando un dispositivo Android o IOS real. Solo asegúrese de tener instalado el SDK de Android (para dispositivos Android), abra su proyecto en NetBeans y cuando ejecute elija el dispositivo Android como su navegador.

Me parece muy útil ya que puede ver el resultado de los diferentes navegadores instalados en su dispositivo.

Puede usar este enlace para más detalles

http://wiki.netbeans.org/MobileBrowsers

Sugeriría usar: https://www.vanamco.com/ghostlab/

Es una plataforma que puede depurar en múltiples dispositivos móviles con un solo clic.

Al realizar una acción en un navegador, puede optar por propagarse a otros dispositivos conectados a una IP privada (y esos dispositivos deben conectarse a la misma red y usar la dirección IP).

Verá una interfaz de desarrollador de Chrome, pero allí puede hacer ajustes de CSS (los cambios se producirán en todos los dispositivos conectados) y la depuración de Javsascript.

Utilizo el simulador con mi proxy del sistema osx para enviar solicitudes al Fiddler que se ejecuta en una máquina de Windows, eso no ayuda mucho con javascript / cosas internas para safari móvil, pero al menos me muestra lo que realmente está pasando por el cable y me permite interceptar / registrar / analizar / retocar cosas sobre la marcha para descubrir qué funciona y qué no.

  • iWebInspector para iOS es realmente sorprendente para la depuración de páginas web en iOS.

    Actualización: desde que publiqué esta respuesta, iOS y OS X se han actualizado, y ahora Safari en tu Mac puede conectarse y depurar Mobile Safari.

  • Echa un vistazo a Firebug Lite .

  • para Chrome en Android, la depuración remota no está nada mal.