Quiero usar mi teléfono móvil para probar la página web que escribí. ¿Qué debo hacer?
Móvil: Configuración → Safari → Avanzado → Web Inspector → Activado.
mac: Safari → Preferencias → Avanzado → Mostrar el menú "Desarrollador" en la barra de menú.
Después de iniciar Safari en OS X, conecte el cable USB a su dispositivo iOS e inicie Safari en su dispositivo móvil. Haga clic en Desarrollar en el menú Safari de su computadora y verá un submenú que muestra el nombre de su dispositivo iOS y todas las pestañas de Safari en su dispositivo móvil. Todas las pestañas de Safari en su dispositivo, haga clic en cualquiera para comenzar a depurar.
Conveniente y simple, también puede depurar navegadores encapsulados en shell como WeChat.
Nota: Por cierto, para depurar diferentes versiones de iOS, puedes ingresar xcode para descargar diferentes paquetes del sistema (por supuesto, si no hay ningún dispositivo, el magnate lo omitirá)
2. Teléfono Android
1. Método de depuración del navegador Chrome
Primero asegúrese de que la última versión del navegador Chrome esté instalada tanto en el teléfono como en la PC. las opciones de desarrollador en el teléfono y permita la depuración, y luego conecte los dos dispositivos con un cable de datos. Abra Chrome en la computadora, ingrese chrome://inspect y luego abra Chrome en el teléfono. En este momento, aparecerá un cuadro en el teléfono preguntando si se permite la depuración. A veces, la pantalla de bloqueo del teléfono se desconectará; desconecte el USB y reinicie.
Haga clic en inspeccionar para abrir DevTools. Puede seleccionar elementos DOM en la página y los elementos correspondientes en el dispositivo también se resaltarán. También puede usar DevTools Inspect Element para seleccionar el elemento de destino. interactúa con la página del dispositivo móvil en tiempo real, es conveniente localizar el problema y depurar el código, y puedes jugar tan felizmente como en la PC. Si tiene algún problema, verifique la versión de su navegador Chrome.
Autor: El pez que ama los tomates
Enlace: /question/37361845/answer/71674280
Fuente: Zhihu
: Zhihu
Los derechos de autor pertenecen al autor. Para reimpresiones comerciales, comuníquese con el autor para obtener autorización. Para reimpresiones no comerciales, indique la fuente.
La función de depuración de Chrome generalmente solo puede depurar páginas del navegador Chrome, pero su documentación oficial indica que también puede depurar WebView:
"En su computadora, chrome://inspect La página muestra cada dispositivo conectado, junto con sus pestañas abiertas y WebViews habilitados para depuración "
Tenga en cuenta que la depuración de WebViews requiere la versión 4.4 de Android o superior, y debe configurarlo en su aplicación. código correspondiente. El código correspondiente llamará al método estático setWebContentsDebuggingEnabled en la clase WebView, de la siguiente manera:
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled ( true);
}
El método de configuración anterior se aplica a todos los escenarios de aplicaciones WebView en aplicaciones de Android.
El hecho de que un WebView de Android sea depurable no depende de la variable de bandera depurable en el manifiesto de la aplicación.
Si desea permitir la depuración remota de WebView solo cuando depurable sea verdadero, utilice el siguiente fragmento de código:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.K)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.K)VERSION_CODES.KITKAT) {
if (0 ! = (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE{
WebView.setWebContentsDebuggingEnabled(true);
}
}
Acabo de escribir una idea aproximada aquí, si tienes alguna otra pregunta o si quieres Para ver documentación detallada, consulte el siguiente enlace (traiga su propia escalera):
/devtools/docs/remote-debugging
Nota: También puede utilizar el mismo método para Para instalar una máquina virtual de Android en tu computadora, se recomienda usar Genymotion. Del mismo modo, puedes descargar cualquier versión que quieras probar. Por supuesto, no diré nada al respecto en Tycoon. 2. UC Developer Browser
Dado que no recomendamos el uso de UC móvil (todos deberían resistir conscientemente el cáncer móvil), solo lo presentaré brevemente. Si está interesado, compruébelo usted mismo: Developer Center_UC UV ︱ UC Browser ︱El navegador móvil más grande del mundo, con más de 500 millones de usuarios︱Navegador móvil
Su método de depuración no es muy diferente al de Chrome
3. debug
p>Este método es un método más antiguo y es un método de corte y grabación para otros métodos de depuración. Weinre es un paquete de depuración que proporciona JavaScript. Debe instalar js en el archivo del proyecto. Primero, usamos nodejs para instalar, usamos
npm install -g weinre
Después de instalar weinre, configuramos la dirección de escucha de la IP local:
De esta manera, cuando visite la página y cargue este JS, Weinre escuchará. el JS para control.
Consejo: El #anonymous al final de este JS es un identificador, así que para distinguirlo podemos cambiarlo a #test y ponerlo en la página.
En este momento, la dirección de nuestro panel de inspección ya no será /multidevice-frontend-debug/
Remote_inspect_web_on_real_device: jieyou/remote_inspect_web_on_real_device inspect_web_on_real_device - GitHub
remote-debugging:/devtools/docs/ depuración remota
Depuración de desarrollo web móvil Depuración remota de Chrome (remota):/devtools/docs/remote-debugging
Depuración de desarrollo web móvil:/devtools/docs/remote-debugging depuración ): Desarrollo web móvil y depuración Depuración remota del navegador Chrome (depuración remota)
----- -------2015/12/2 Parte complementaria de BrowserSync- ------- --- --
Muchos amigos preguntaron por qué Browser-sync no se volvió a escribir y dieron críticas negativas. Para ser honesto, no sabía estas cosas antes. Pasé algún tiempo buscando y encontré su sitio web: Browsersync: prueba de navegador sincrónica que ahorra tiempo, que me pareció bastante interesante.
Luego lo usé y pensé que era bastante bueno. Realmente me ahorró mucho trabajo y comencé rápidamente. Básicamente, me tomó 5 minutos comenzar rápidamente. Las ruedas en la parte delantera son así. .
1. Primero instale BrowserSync
npm install -g browser-sync
2. Inicie BrowserSync. El principio debe ser detectar cambios en el archivo y luego ejecutarlo. archivo en el servidor. El cliente usa websocket para notificar al navegador sobre los cambios y luego carga los archivos recién modificados en el navegador. Los navegadores que no admiten websocket se turnan para cargar los archivos recién modificados en el lado del servidor. Simplemente tomé un paquete y lo miré, y no sé si lo entendí correctamente.
Actualmente hay dos situaciones, una es estática:
//Escuchar archivos css
browser-sync start --server --files "css / *.css"
// Monitorear archivos css y html
inicio de sincronización del navegador --servidor --files "css/*.css, *.html"
El segundo es dinámico:
// El nombre del host puede ser IP o nombre de dominio
browser-sync start --proxy " Hostname" "css/*.css "
Entonces comienza, así de simple.
También hay trago que se pueden usar juntos. Para obtener más información, consulte la documentación: Browsersync + Gulp.js
Para resumir, la interfaz cambia cada día que pasa. Si no la aprende durante un mes, se sentirá retrasado. detrás
---- -------- -- --- Yo soy la línea divisoria ------ ---------
El siguiente es el texto original de @元江水神. La razón por la que lo rodeé es porque muchos de estos documentos fueron pegados por él. Este es su texto original: -->Desarrollo y depuración de front-end móviles.
También mencioné la parte anterior de más información, pero el enlace anterior estaba mal colocado. No es el enlace al texto original del blog. Ahora se ha corregido.
Esto es lo que compilé. Cada uno lo implementé personalmente. También agregué información que encontré en la sección de depuración de la vista web de Android --> Habilidades de depuración y desarrollo de front-end para dispositivos móviles.