Daniel Blog

Yo como desarrollador se que es tedioso el hacer crossbrowsing, que desarrollar en Internet es ya de por si complicado por que cada navegador aplica una filosofía diferente respecto a los estándares web, pero aun así hay herramientas que nos ayudan a hacer el trabajo menos duro, para ello la gente del proyecto Webkit (que es el motor de rendereo que utiliza el navegador Safari) ha incluido algunas novedades que se pueden incorporar a este navegador, entre ellas esta un inspector web para el árbol DOM y una consola para javascript, aquí les muestro el proceso de instalación en windows:

1. Debes dirigirte a la siguiente url, descargar y descomprimir la versión mas actual: http://nightly.webkit.org/builds/win/1
2. Abre los siguientes archivos en un editor de textos (ojo, las rutas cambian dependiendo del idioma de tu windows):

   C:\Documents and Settings\<tu usuario>\Application Data\Apple Computer\Safari\Preferences.plist
   C:\Documents and Settings\<tu usuario>\Application Data\Apple Computer\Safari\WebKitPreferences.plist

3. Al final del archivo Preferences.plist justo antes que se cierre la etiqueta </dict> incluye esto

   <key>IncludeDebugMenu</key>
   <true/>
   <key>WebKitDeveloperExtras</key>
   <true/>

4. Al final del archivo WebKitPreferences.plist justo antes que se cierre la etiqueta </dict> incluye esto

   <key>WebKitUserStyleSheetLocationPreferenceKey</key>
   <true/>
   <key>WebKitDeveloperExtras</key>
   <true/>

5. Ahora guarda ambos archivos y dirígete al directorio donde descomprimiste el archivo zip que descargaste en el paso 1, ejecuta el archivo run-nightly-webkit.cmd, aparecerá una ventana del símbolo del sistema y te indicara que esta copiando archivos, cuando termine ejecutara Safari y en el tu podrás ver :
   El menú de Debug:
   
   Para ver el inspector web debes posicionarte en un elemento de la pagina, dar click derecho y elegir la opción “Inspect Element”:
   

Así es ya estoy de vuelta en esto, no podía quedarme sin escribir tanto tiempo. Bueno este post es para todos pero mas orientado a las personas que tenemos que lidiar todos los días con esto que se llama desarrollo web y como no tengo mucho que contarles (y como ahí va el ñoño de Daniel) pues mejor les doy unos tips, el primero del que se tienen que enterar es: ¡Bajen Firebug!, no se van a arrepentir es una extensión como no, para el gran Firefox, esta extensión que vengo utilizando desde hace ya mucho tiempo (desde su primer alfa o beta, no recuerdo) y en verdad permite un desarrollo web mas ágil, hace poco el equipo que esta tras su desarrollo tubo a bien lanzar la versión 1.0 y entre algunas de sus bondades se encuentran:

• Inspeccionar y editar código HTML al vuelo.
• Modificar código CSS al vuelo, nada de subir y bajar archivos para ver como se ve, permite deshabilitar propiedades y crear nuevas para cada elemento.
• Puedes monitorear el tamaño de los elementos, sus margenes, espaciado y bordes (regleta en pantalla incluida).
• Te permite realizar estadísticas de los archivos de un sitio determinado, pues te muestra cuanto pesan y el tiempo que se tardo en cargar cada uno.
• Puedes explorar el DOM de forma rápida y en forma de árbol.
• Se puede ejecutar JavaScrip al vuelo e incluso actúa como debugger del código JavaScript.
• Su consola permite visualizar errores y llamadas a código JavaScript, Ajax y CSS.
• Y otras funcionalidades de las que ya no me acuerdo…

Si ya lo utilizabas baja la nueva versión, si no pues que esperas en verdad es un buen complemento para tu Firefox, por si aun no están convencidos de que esta extensión es de verdad la navaja suiza del desarrollo web, miren este vídeo de su creador Joe Hewitt donde explica las bondades de esta extensión: