Dev Browser

Puedes

• Escribe una dirección o una búsqueda en Buscar o escribir URL y pulsa la tecla Ir del teclado; la X (Cancelar) deja de editar.
• Recarga con Recargar; mientras una página carga, el mismo botón pasa a ser Detener.
• Abre o cierra el panel DevTools con el botón </> (Herramientas de desarrollo). Una insignia roja cuenta los errores de la consola y se detiene en 99+.
• Abre el Menú del navegador (⋮).

No puedes, y por qué

• Cargar direcciones file://, content://, data:, javascript:, intent:, mailto: o tel:: escritas en la barra, se convierten en una búsqueda en Google.A propósito
• Elegir otro buscador: el texto que no es una dirección se busca siempre en Google.A propósito
• Abrir direcciones http:// sin cifrar de tu red local (por ejemplo http://192.168.1.20): la política de red de la app solo permite HTTP sin cifrar hacia localhost, 127.0.0.1 y 10.0.2.2. Usa HTTPS o un túnel.Requiere red

Puedes

• Escribe el texto en Buscar en la página: busca mientras escribes, marca las coincidencias en la página y muestra cuántas hay.
• Salta a la coincidencia siguiente o a la anterior con Siguiente y Anterior; la tecla Buscar del teclado también va a la siguiente.
• Ciérrala con Cerrar; eso borra la búsqueda.

No puedes, y por qué

—

Puedes

• Usa la página como siempre: desplázate, toca, escribe y haz zoom con los dedos.
• Elige ficheros para un campo de subida con el selector de ficheros del sistema.
• Ve los diálogos alert y confirm de la propia página.
• Lee los errores de carga en un aviso rojo que puedes copiar: el mensaje del propio WebView, HTTP <código> <motivo> cuando la propia página responde con 400 o más, o WebView render process crashed. Reload the page. Que falle el proceso de renderizado de la página no cierra PocketCode.

No puedes, y por qué

• Seguir enlaces con otros esquemas (tel:, mailto:, intent:, file:…): se ignoran, sin ningún mensaje.A propósito
• Cargar contenido HTTP dentro de una página HTTPS (contenido mixto).A propósito
• Continuar con un certificado TLS no válido, iniciar sesión con autenticación HTTP básica o presentar un certificado de cliente: la petición se cancela. Solo se confía en las autoridades de certificación del sistema.A propósito
• Dejar que una página use la cámara, el micrófono o tu ubicación: se deniegan siempre y la Consola muestra un aviso (Warning).A propósito
• Descargar ficheros dentro de la app: un enlace de descarga se abre en el navegador del sistema.A propósito
• Abrir ventanas emergentes.A propósito

Puedes

• Filtra por nivel con los cuatro chips (error, aviso, info, depuración). Cada uno muestra su contador; tócalo otra vez para quitar el filtro. No hay chip para un console.log normal: se ven cuando no hay filtro. El número de la derecha es cuántos mensajes se listan.
• Vacía la consola con el icono de papelera (Limpiar).
• Ejecuta JavaScript en el marco principal de la página: escríbelo en Evalúa JavaScript… y toca Ejecutar. El comando y su resultado (cortado a 2.000 caracteres) se añaden como mensajes normales, así que los filtros también les afectan.
• Recupera comandos anteriores con Comando anterior: los recorre y nunca repite el mismo comando dos veces seguidas.
• Copia un mensaje manteniendo pulsado su texto.
• Los mensajes nuevos se desplazan a la vista solo si ya estabas al final de la lista.

No puedes, y por qué

• Ver más de los últimos 1.000 mensajes: los más antiguos se descartan. Navegar no vacía la consola, pero abrir el Dev Browser con otra dirección sí.A propósito

Puedes

• Filtra por tipo con los chips All, Doc, CSS, JS, XHR (incluye fetch) e Img. Esas palabras salen siempre en inglés.
• Toca una petición para abrir su detalle bajo la lista, con tres pestañas: General (url, method, status, size, time, duration y error), Cabeceras de solicitud (las que entrega el WebView) y Cabeceras de respuesta.
• Vacía la lista con el icono de papelera (Limpiar).

No puedes, y por qué

• Ver los cuerpos de la petición o de la respuesta, las cabeceras de respuesta o el tipo MIME: la pestaña Cabeceras de respuesta siempre dice Ninguna, porque nada rellena todavía esos campos.Aún no
• Desglosar una petición en fases de DNS, TLS y espera: cada petición tiene una sola barra, porque el WebView no da esos tiempos.Dispositivo
• Conservar la lista de una página a la siguiente: se vacía en cada navegación de la página principal (solo se queda el documento nuevo) y guarda como máximo 1.000 peticiones.A propósito
• Contar con un estado en toda petición correcta: sale de los datos de Resource Timing de la página, y cuando el WebView no lo informa la columna muestra un guion. Los estados de error (400 y más) siempre salen.Dispositivo

Puedes

• Toca una fila para abrir su clave y su valor completos en el detalle bajo la lista.
• Toca Copiar para copiar el valor (Copiado al portapapeles lo confirma).
• Toca Eliminar para quitar esa clave.
• Vacía una sección entera con el icono rojo de limpiar junto a su título (Borrar).
• Cuando la página no tiene nada, el panel dice Sin datos de almacenamiento y sugiere probar un sitio como google.com.

No puedes, y por qué

• Ver las cookies HttpOnly ni los atributos de una cookie (dominio, caducidad, Secure, SameSite): el panel lee document.cookie, que las oculta a los scripts de la página.A propósito
• Borrar una cookie creada para otra ruta o dominio: borrar una cookie la caduca con path=/.A propósito

Puedes

• Toca el icono del selector (Seleccionar un elemento en la página) y luego toca cualquier cosa de la página. La cabecera dice Toca un elemento en la página; tu siguiente toque elige el elemento sin activarlo (no se sigue ningún enlace ni se envía ningún formulario), y el árbol se abre en ese elemento, lo resalta en la página y abre su detalle bajo la lista. Si el elemento está más hondo de lo que llega la instantánea, elige el ancestro más profundo que sí está.
• Vuelve a leer la instantánea con Refrescar DOM.
• Abre el detalle de un nodo con su icono (i) (Detalles de la entrada): su <etiqueta>, su selector CSS y su id, class, atributos y text.
• Toca Copiar selector para copiar un selector posicional como html > :nth-child(2) > :nth-child(1); usa posiciones, no ids ni clases.
• Toca Resaltar en la página para rodear el elemento con un contorno naranja y llevarlo al centro. El contorno se queda hasta que resaltes otro nodo o recargues.
• Si no hay nada cargado, el panel dice Sin árbol DOM y Carga una página y pulsa refrescar.

No puedes, y por qué

• Ver todo el DOM: la instantánea se detiene a profundidad 10, 100 hijos por nodo (un nodo … +N more representa el resto), 20 atributos por elemento, 500 caracteres de texto y 200 caracteres por valor de atributo. Solo incluye elementos (sin comentarios) y no mira dentro de iframes ni de Shadow DOM.A propósito

Puedes

• Escribe CSS en el editor (Editor) y toca Aplicar CSS: crea, o actualiza, un elemento <style> con el id pocket-css-inject en la página.
• Quita lo aplicado con Quitar (solo está activo mientras haya algo aplicado).
• El último CSS que aplicaste se vuelve a aplicar tras cada carga, recarga y navegación, incluso a otro sitio, hasta que toques Quitar. Se pierde al abrir el Dev Browser con otra dirección.
• Cambia a Reglas (n) para leer las reglas de la página: el selector, el número de propiedades, las tres primeras y de dónde viene (la dirección de la hoja de estilos o inline). Toca una regla para copiar sus declaraciones al editor; al aplicarlas se sobrescribe la original, no se edita en su sitio.
• Cuando no hay nada que listar, el panel dice No se detectaron reglas CSS.

No puedes, y por qué

• Ver más de 200 reglas, reglas dentro de @media, @supports o @keyframes, ni hojas de estilo que el navegador no deja leer a una página: solo se listan las reglas de primer nivel, y las hojas ilegibles se omiten sin avisar.A propósito

Puedes

• Lee las tarjetas bajo MÉTRICAS WEB ESENCIALES: Primer pintado (FP), Primer pintado con contenido (FCP), DOM cargado (DCL) y Carga de página siempre; Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) y Tiempo de Bloqueo Total (TBT) cuando su valor es mayor que cero. Cada tarjeta se colorea como buena, mejorable o mala según umbrales fijos (por ejemplo LCP 2.500 y 4.000 ms, CLS 0,1 y 0,25, TBT 200 y 600 ms).
• Lee ESTADÍSTICAS DE PÁGINA: Nodos DOM, Recursos y, cuando el WebView los expone, Heap JS y Transferido.
• Lee la CASCADA DE RECURSOS (n): hasta 50 recursos con su tipo, los últimos 30 caracteres del nombre y la duración.
• Toca Grabar: vuelve a leer las métricas cada 1,5 segundos hasta que toques Detener. No graba una traza; es un refresco en vivo.

No puedes, y por qué

• Ver las tarjetas de LCP, CLS y TBT cuando el WebView no las informa: solo aparecen cuando su valor es mayor que cero. El heap de JS y el tamaño transferido también dependen de lo que exponga el WebView.Dispositivo

Puedes

• Toca Ejecutar auditoría (dice Auditando… mientras corre). La auditoría solo se ejecuta cuando pulsas el botón. Antes de la primera ejecución el panel dice Ejecuta una auditoría para analizar la calidad de la página y Analiza Rendimiento, Accesibilidad, Buenas Prácticas, SEO y PWA.
• Lee cinco medidores de 0 a 100 (Perf, A11y, BP, SEO y PWA; en verde desde 90, en naranja desde 50), la dirección auditada y cuánto tardó la auditoría en milisegundos.
• Lee el resumen (N passed, N warnings, N failed) y filtra con los chips Todas (n), aprobadas, avisos y fallos. Una comprobación se aprueba con 0,9 o más, es un aviso desde 0,5 hasta 0,9 y falla por debajo de 0,5.
• Pliega las categorías y abre una comprobación para leer su detalle (hasta 8 líneas).
• Vuelve a tocar el botón, ahora en la barra superior, para medir otra vez.

No puedes, y por qué

• Obtener puntuaciones comparables a las de Lighthouse o PageSpeed Insights: son estimaciones propias de PocketCode, y algunas comprobaciones solo miran una muestra de la página (la profundidad del DOM lee los primeros 150 elementos, el tamaño de fuente 100 y las áreas táctiles 50).A propósito
• Inspeccionar un service worker: la comprobación solo detecta si hay uno controlando la página.A propósito

Puedes

• Cambia entre las pestañas Historial y Marcadores.
• Toca una entrada para abrir su dirección (sigue las mismas reglas que la barra de direcciones) y cerrar el diálogo.
• Elimina un marcador con su icono de papelera (Eliminar).
• Borra todo el historial con el icono rojo de barrer (Borrar), que solo sale en la pestaña del historial cuando hay entradas. No pide confirmación.
• Cuando una lista está vacía dice Aún no hay historial. Navega por algunas páginas. o Aún no hay marcadores. Añade uno desde el menú.

No puedes, y por qué

• Guardar más de 100 entradas de historial o más de 200 marcadores.A propósito

Puedes

• Edita Título, relleno con el título de la página (o su dirección), y URL, rellena con la dirección actual.
• Toca Guardar, que sigue desactivado mientras uno de los campos esté vacío, o Cancelar. Marcador añadido aparece aunque esa dirección ya estuviera guardada; no se guarda dos veces.

No puedes, y por qué

—

Puedes

• Toca Confirmar o Cancelar.
• Al confirmar, borra la caché HTTP del WebView; el localStorage, el sessionStorage, las cookies visibles para JavaScript y las bases IndexedDB del sitio de la página abierta; y todas las cookies del WebView de la app, no solo las de este sitio. Después se actualiza el panel Almacenamiento y aparece Datos del sitio borrados.
• Conserva tu historial de navegación: no se borra ni el historial de atrás y adelante de la página ni la lista Historial.

No puedes, y por qué

• Borrar los datos de un solo sitio: el borrado de cookies abarca todos los sitios que conoce el WebView de la app.A propósito