Convertir a Chrome/Chromium en el perfecto WebIDE


Los navegadores web actuales no se comparan en nada con lo que eran incluso hace pocos años atrás. Con la llegada de tecnologías como HTML5 y los avances tan grandiosos en cuestiones como Javascript, hoy en día podemos hacer del navegador incluso un Sistema Operativo (y ChromeOS, Boot2Gecko y Similares lo están demostrando). Una de las cosas que más me gusta hacer es programar y diseñar cosas web (y más me vale, porque es mi trabajo jajaja) y aunque mi plataforma favorita hasta ahora para hacer cualquier actividad informática es Linux, a veces me la paso tanto tiempo en el navegador web que decidí empezar a utilizar las ventajas que éste me ofrece como entorno de vida informática, acá los consejos para (en éste caso) convertir a Chrome (o bien cualquiera de sus derivados como Chromium)  en el Entorno de Desarrollo Web (o WebIDE como quieran llamarlo) Perfecto para la mayoría de éste tipo de trabajos:

1.- Instalar Web Developer

Web Developer es una extensión muy completa que nos dará varias opciones útiles al momento de trabajar en proyectos web dentro de Chrome, es el alma de nuestro WebIDE y no puede faltarnos para nada.

2.- Instalar BuiltWith

Otra extensión básica. Lo que hace ésta es que nos permite ver CON QUÉ está construido un sitio o aplicación web predeterminado, nos enseña todas las tecnologías adyacentes detrás del mismo, así sabremos más o menos qué utilizar cuando queramos tener un efecto similar en nuestros desarrollos

3.- Instalar FireBug

Ésta es CLÁSICA y creo que no necesita más presentación. Si bien las Chrome Developer Tools son bastante poderosas, cualquier desarrollador que se respete sabrá apreciar los servicios que firebug ofrece para complementar lo que Chrome ya ofrece por default para ciertos cometidos.

4.- Instalar Color Pick

El mejor Eye Dropper para Chrome, sin duda alguna.

5.- Instalar MeasureIt

Mi preferida para medir elementos de un sitio web en pixeles, realmente útil al momento de crear plantillas y layouts.

6.- Instalar Tryit Editor (Extensión)

Éste es un visualizador de código HTML/CSS/Javascript/PHP con soporte para nuevas tecnologías como HTML 5 y CSS 3 que nos permite escribir o pegar código de los formatos/lenguajes soportados y ver cómo renderiza en el navegador, EXTREMADAMENTE ÚTIL para probar código estático rápidamente.

7.- Instalar JS Fiddle (App)

Vital si trabajas con mucho Javascript

8.- Instalar StackOverflow (App)

¿Necesita más presentaciones? Vital si tienes dudas referentes a programación en general.

9.- Instalar Pixlr Editor (App)

Para crear/editar tus diseños gráficos en algo así como un "Photoshop Online"

10.- Instalar Cloud9/ShiftEdit (Apps)

Éste será el centro de todo nuestro desarrollo web en Chrome, será lo primero que abras para escribir y trabajar con código así como también manipular repositorios. Dependiendo tus necesidades deberías escoger uno u otro. Cloud9 es excelente para proyectos OpenSource y/o que gusten de trabajar con BitBucket/GitHub. ShiftEdit es más para proyectos personales o privados que requieran integración y manipulación por medio de FTP.

11.- Instalar Color Creator

Una excelente extensión para crear cualquier color que necesitemos y tener su código hexadecimal listo para uso en el proyecto que estemos realizando.

12.- Instalar DropBox (App)

¿Necesitas almacenamiento de Archivos? DropBox es tu disco duro online

13.- Instalar Palette

Una extensión que convertirá cualquier imagen en una paleta de colores de 16, 24 o 32 colores distintos según se requiera, también permite crear paletas personalizadas.

14.- Instalar Awesome Screenshot

Herramienta completísima para Screenshots dentro del navegador.

15.- Instalar Resolution Test

Una herramienta para visualizar el navegador en diferentes resoluciones, vital para el diseño web.

Extras

Otra extensión buena que no menciono aquí directamente en la lista (Porque no me funcionó en Linux) es IE Tab, que sirve para tener una pestaña que emule Internet Explorer dentro de Chrome; También podrías añadir algún validador de HTML y CSS según el tipo de código que uses (Hay para HTML5 y CSS3 también por ejemplo) o bien, añadir algún shell para tu lenguaje de programación favorito. Finalmente no olvides incluir a BitBucket y/o Github en tu selección!