OK. Empecemos.
El "inspector" de Google Chrome es bastante potente, pero hay que entenderlo porque hay cosas que uno supone que hace pero no. Está pensado para debug.
Una cosa que no hace (o por lo menos yo no sé cómo) es guardar archivos. Te permite modificar para probar el nuevo comportamiento del código modificado, pero no para guardarlo. Si abandonás o actualizás la página, se pierden los cambios. Si estás escribiendo código, deberás hacer los cambios en el archivo fuente por tu cuenta, con algún editor de HTML o JavaScript (o de texto, gusto es gusto). Yo usé FreeJavaScriptEditor y ahora uso Geany, ambos gratuitos. No conozco mucho del tema, si me podés recomendar un editor mejor y gratuito, o si te enterás de que Eclipse soporta JavaScript, please avisame.
En cualquier página con F12 te abre el inspector abajo, en inglés. No tengo idea de por qué no lo tradujeron. Podés desengancharlo de la página y llevarlo a una ventana propia e independiente que podrás maximizar.
El inspector está en inglés, y tiene varias solapas que parecen botones. Te menciono sólo tres:
* Elements, para ver el HTML. No es el HTML del archivo HTML (ése se ve con ctrl+u), sino el HTML actual, con todos los cambios que pueda haber sufrido desde que se cargó. Podés editar tags, atributos, contenido. Podés agregar tags o eliminarlos. No funciona como un editor de textos, sino más bien como un editor de campos.
* Scripts, con un desplegable que lista todos los scripts de la página. Te muestra el código, y lo podés editar. Clic derecho te da la posibilidad de-obfuscate, para hacer el código más legible.
* Console, donde podés leer los mensajes de error y log, y además podés poner comandos javascript inmediatos. No requieren el punto y coma. Incluso podés crear variables (sin usar var) auxiliares, como
a=document.getElementById('principal')
La consola también aparece en Elements, y resulta muy útil tener las dos cosas a la vista.
Te invito a recorrer las otras pestañas.
