Risultati ricerca
Indice
Frase completa
Cerca nella pagina
Chiudi
Indice

APPENDICE A - STRUMENTI PER SVILUPPATORI DI ALTRI BROWSER

Oltre a Chrome ormai anche tutti i principali browser web (internet explorer, safari, firefox) mettono a disposizione dell’utente, in maniera nativa, degli strumenti per sviluppatori del tutto analoghi a quelli esaminati all’interno di questa guida.

Ovviamente passando da un browser all’altro possiamo trovare piccole differenze sia a livello di comportamento delle singole funzionalità sia a livello di funzionalità vere e proprie.

In ogni caso la stragrande maggioranza dei concetti espressi all’interno di questa guida in merito ai Chrome Developer Tool, possono essere considerati corretti e possono tranquillamente essere utilizzati per gestire anche gli Strumenti per sviluppatori degli altri principali browser presenti sul mercato.

All’interno di questa appendice vedremo quindi, molto rapidamente, come fare per abilitare questi strumenti all’interno di Safari, Internet Explorer e Firefox.

SAFARI

In Safari è possibile accedere agli strumenti per sviluppatori in due modi diversi:

  • Dal menu “Sviluppo” cliccando su una delle voci “Mostra Inspector web”, “Mostra console degli errori”, “Mostra Risorse Pagina

A seconda della voce selezionata, gli strumenti per sviluppatori si apriranno in una sezione diversa.

  • Cliccando con il tasto destro del mouse in un qualsiasi punto della pagina e selezionando dal relativo menu contestuale la voce “Ispeziona Elemento

Indipendentemente dalla modalità utilizzata gli strumenti per sviluppatori si apriranno all’interno di un’apposita finestra collocata a default immediatamente al di sotto della finestra del browser.

Gli strumenti per sviluppatori messi a disposizione da Safari, sono basati sul progetto WebKit Web Inspector per cui le similitudini strutturali e funzionali con i Chorme Developer Tool, anch’essi basati su questo progetto, sono piuttosto evidenti.

FIREFOX

Anche in Firefox, così come in Safari o in Chorme è possibile accedere agli Strumenti per Sviluppatori, essenzialmente in due modi diversi:

  • Dal menu “Strumenti” cliccando su una delle voci presenti all’interno del sottomenu “Sviluppo Web”

  • Cliccando con il tasto destro del mouse in un qualsiasi punto della pagina e selezionando dal relativo menu contestuale la voce “Analizza Elemento

Anche in questo caso indipendentemente dalla modalità di accesso considerata gli strumenti per sviluppatori si apriranno all’interno di un’apposita finestra collocata a default immediatamente al di sotto della finestra del browser.

Per quel che riguarda Firefox possiamo segnalare anche l’estensione firebug (disponibile a questo indirizzo https://addons.mozilla.org/it/firefox/addon/firebug/ ) e particolarmente utilizzata prima che il browser implementasse questi strumenti in maniera nativa

INTERNET EXPLORE

Anche Internet Explorer, soprattutto con le ultime release (IE10 e IE11) mette a disposizione dell’utente degli strumenti per sviluppatori piuttosto efficienti e semplici da utilizzare.

Per accedere a questi strumenti è possibile procedere, ancora una volta, in due modi diversi:

  • Dal menu “Strumenti -Strumenti di sviluppo

  • Cliccando con il tasto destro del mouse in un qualsiasi punto della pagina e selezionando dal relativo menu contestuale la voce “Esamina Elemento

Gli strumenti per sviluppatori si apriranno all’interno di un’apposita finestra collocata a default immediatamente al di sotto della finestra del browser.

Rispetto a quanto visto per Chrome, Safari o Firefox cambia questa volta la disposizione del menu di collegamento alle varie sezioni degli strumenti per sviluppatori, posizionato non più come tool bar orizzontale, ma come tool bar verticale con sfondo di colore nero posizionata sulla sinistra.

In ogni caso, come è semplice osservare analizzando le figure sopra riportate, gli strumenti per sviluppatori messi a disposizione da Internet Explorer, Firefox o Safari, sono molto simili ai Chrome Developer Tool sia da un punto di vista strutturale che da un punto di vista funzionale.

A parte infatti alcune funzionalità peculiari dello specifico browser, in tutti i casi possiamo ritrovare ad esempio:

  • Una sezione in cui poter analizzare il DOM della pagina web organizzato all’interno di una ben precisa struttura ad albero.
  • Una sezione in cui poter analizzare e modificare le regole CSS utilizzate all’interno della pagina web
  • Un Debugger javascript
  • Una sezione Network all’interno della quale poter esaminare in maniera dettagliata le varie richieste (e relativi tempi di esecuzione) inviate dal browser al server web
  • Una sezione all’interno della quale poter analizzare tutte le risorse richieste dalla pagina web
  • Una console mediante la quale poter interagire con la pagina web

In definitiva dunque i concetti espressi all’interno di questa guida, anche se rivolti in maniera specifica ai Chrome Developer Tool, possono comunque essere facilmente riutilizzati per comprendere e sperimentare al meglio il funzionamento degli Strumenti per Sviluppatori messi a disposizione anche dagli altri principali browser presenti sul mercato.