b) Google chrome dev tools

Google Chrome nasce da un progetto Open Source "Chromium", a sua volta all'interno del progetto sono presenti i Google Chrome Developer Tools.

Si può leggere a riguardo dell'utilizzo sull'apposita pagina: http://code.google.com/chrome/devtools/

Grazie a questi tool siamo in grado di esplorare il "dietro le quinte" delle pagine web, effetuare modifiche "on the fly" (al volo) e vederne subito gli effetti, oppure debuggare i vari script JavaScript.

Rapidamente vediamo come esplorare il DOM HTML della pagina in allegato.

Una volta aperta la pagina, per attivare i tool, basta premere CTRL+ALT+I oppure dal menu:

Si presenterà una nuova finestra nella parte inferiore di Chrome.


Passando il mouse sopra agli elementi del DOM essi vengono "evidenziati" sulla pagina, se invece gli selezioniamo cliccandoli, nella parte destra dei tool, comparirà una lista delle proprietà CSS assegnate all'elemento, nel nostro caso.


In quest'area è indicato anche dove si trova la regola CSS, nel nostro caso sulla stessa pagina e sempre sulla destra abbiamo la possibilità di attivare/disattivare le regole e vedere subito il risultato nella pagina web.

NEXT
ċ
Alessandro Aglietti,
2 feb 2012, 11:23
Comments