En Firefox existe una extensión, Web Developer, bastante famosa entre desarrolladores por ser muy completa. En resumen, Web Developer Toolbar agrega una barra de herramientas más a Firefox con recursos para desarrolladores, como mostrar los estilos CSS e incluso modificarlos, desactivar Javascript, cambiar el tamaño de la ventana, revisar información de formularios y muchas características más que sirven en el desarrollo web.
Por defecto no incluye ninguna ayuda para desarrollar para móviles pero si la opción de agregar herramientas, de esta forma podemos configurarla para trabajar webs para móviles, y es justo lo que voy a explicar en este artículo.
Agrega validadores para web móvil
Los validadores nos ayudan a “certificar” la calidad del código en base a una serie de lineamientos, que si los cumplimos podremos obtener mejores resultados mientras que trabajamos con buenas practicas. Existen dos validadores famosos para web móvil, el primero (y “oficial”) es el W3C MobileOk Checker, y el segundo, un test para evaluar buenas practicas, es el de ready.mobi.
-
Para agregar un validador a Web Developer Toolbar debes ir a Tools –> Edit Tools…
-
Presiona el botón Add y te mostrará una ventana para que ingreses datos
- Agrega el validador del W3C de esta forma:
Description: W3C MobileOK Checker (o cómo quieras llamarle)
Keyboard Shortcut: (agrega una letra para usarla como atajo si quieres)
Tool Type: Selecciona URL.
URL: http://validator.w3.org/mobile/?checkasync=true&view=cat&docAddr=
-
Repite los dos pasos anteriores para agregar el validador de Ready.mobi, solo que ahora con esta información:
Description: Ready.mobi
Tool Type: Selecciona URL.
URL: http://ready.mobi/results.jsp?uri=
Personaliza las resoluciones de pantalla
Web Developer Toolbar incluye la opción de modificar las dimensiones del navegador solo seleccionando una opción del menú. En el caso de los móviles es muy útil para darnos una idea aproximada del resultado final, en la imagen se puede ver Firefox en una ventana de 320×480 (HVGA) simulando la resolución del iPhone:
-
Para agregar una nueva resolución de pantalla usa Resize –> Edit Resize Dimensions…
-
Presiona el botón Add… y agrega la resolución que quieres usar:
Description: (Cómo quieras llamarla)
Width: Ancho en pixeles
Height: Alto en pixeles
Resize the viewport: Activado. Se usa para que las medidas se apliquen directamente al área de la página y no a toda la ventana, evita que las barras de herramientas y demás arruinen el efecto de simular las dimensiones.
Resoluciones de pantalla más populares en móviles
Abajo te dejo una lista de las resoluciones de pantalla más populares en móviles:
- 128×128 px. Una de las resoluciones más pequeñas y ahora anticuada.
- 176×220 px. Popular en modelos de Sony Ericsson y algunos Nokia
- 240×320 px. o QVGA. Popular en PDAs con Windows Mobile, Nokia N96 y otros similares.
- 320 x 480 px. o HVGA. Anteriormente esta resolución era extraña, ahora con la llegada del iPhone se volvió muy popular, también la usa el iPod Touch, HTC Dream y el nuevo Palm Pre.
- 640 x 320 px. Usada en el Nokia N97
- 640 x 480 px. HTC Touch Diamond usa esta resolución, igual que el HTC Touch Pro o el HTC Advantage.
- 800 x 480 px. Usada por el Nokia N810.
Desactivar Javascript o cargar CSS Handheld
Los validadores y modificar el tamaño de la ventana son dos herramientas útiles para desarrollar para la web móvil, pero en general Web Developer toolbar es una herramienta bastante completa que incluye muchas más opciones para desarrollo web, por ejemplo puede desactivar Javascript (ver imagen) o cargar la hoja de estilos CSS Handheld, aunque es poco usada por los navegadores en móviles. Puedes leer el artículo Return of the Mobile Style Sheet que trata más acerca del tema de las hojas de estilo en móviles.
Eso es todo por ahora con Web Developer Toolbar, más adelante escribiré sobre cómo simular una visita desde el móvil usando User Agent Switcher. Dudas y sugerencias son completamente bienvenidas 
