Vuoi utilizzare lo strumento per ispezionare gli articoli sul tuo dispositivo iPhone o Android? Normalmente, la maggior parte delle persone utilizza i browser Web per accedere a Internet, ma per gli sviluppatori Web un browser è molto più di una semplice applicazione di accesso a Internet. Gli sviluppatori Web utilizzano i browser per vari altri motivi, come il test e il debug del codice.
Ebbene, se confrontiamo i browser desktop e mobili, i browser desktop sono ovviamente più avanzati. Uno dei motivi è che hanno strumenti per sviluppatori (aka DevTools) che non sono disponibili nei browser mobili. Dal punto di vista dello sviluppatore, questa è una caratteristica molto importante.
Okuma: Come ispezionare una pagina web su android
Gli strumenti per sviluppatori consistono anche nello strumento elemento, che viene utilizzato per visualizzare e modificare l’HTML e CSS delle pagine web. uno sviluppatore, potresti anche dover utilizzare lo strumento Ispeziona elementi sul tuo dispositivo iPhone o Android. L’app Chrome per dispositivi mobili non ha questa funzione, ma fortunatamente ci sono alcune soluzioni alternative che possono fare lo stesso lavoro.
Che cos’è lo strumento Ispeziona elemento nei browser?
L’elemento Inspect è uno degli strumenti per sviluppatori disponibili in Google Chrome, Firefox, Safari, Internet Explorer e altri browser Web desktop. Con questo strumento è possibile visualizzare il codice sorgente del sito e apportare modifiche in tempo reale.
Ayrıca bakınız: 8 tecniche per posizionare il tuo sito web tra i primi risultati di Google
Oltre al codice HTML, puoi anche visualizzare immagini, CSS, Javascript, font e altri contenuti di pagina .web. Lo strumento Element Inspect è molto interattivo per l’utente. Puoi fare clic sull’elemento della pagina web e quindi esaminare direttamente il codice.
Un’altra caratteristica interessante è che puoi vedere tutto il codice CSS degli elementi e modificarli dal vivo. Lo strumento Ispeziona elemento è molto utile per gli sviluppatori per ispezionare il codice HTML del proprio sito Web e apportare aggiornamenti grafici (a colori).
Esistono diversi modi per aprire lo strumento Ispeziona elemento in un browser desktop. Uno dei modi più semplici è utilizzare i tasti di scelta rapida: MAIUSC CTRL I (per Windows) o OPZIONE CMD I (per Mac). In alternativa, puoi fare clic con il pulsante destro del mouse in qualsiasi punto della pagina Web e quindi fare clic sull’opzione Ispeziona dal menu.
Visualizza il codice sorgente della pagina web su Chrome Mobile
La versione mobile di Google Chrome per Android e iPhone/iOS non ha la funzione Developers Tool come la versione desktop, ma puoi comunque visualizzare il codice sorgente della pagina web e controllare manualmente gli elementi HTML. Per questa attività utilizzeremo uno schema Visualizza URL sorgente. Questa guida dettagliata ti mostrerà come –
- Avviare l’app Chrome sul tuo iPhone o dispositivo Android.
- Vai alla pagina web di cui desideri visualizzare il codice sorgente o inserisci manualmente l’URL.
- Aggiungi View-Source: prima dell’URL della pagina web (come mostrato nell’immagine sotto).
- Infine, premi Invio/OK per caricarlo. Si apre il codice sorgente del sito web.
Ayrıca bakınız: Dopo un attacco di panico come ci si sente
Se vuoi cercare un elemento, vai al menu di Chrome (tre punti nell’angolo in alto a destra) e fai clic su Cerca nella pagina. Si aprirà una casella di ricerca che può aiutarti a trovare e rivedere manualmente gli elementi.
Alcuni siti Web hanno due versioni separate per desktop e dispositivi mobili. Per impostazione predefinita verrai reindirizzato alla versione mobile. Se desideri visualizzare il codice sorgente del sito Web desktop, vai al menu Chrome e attiva Sito Web desktop . Dopodiché, segui gli stessi passaggi.
Usa l’app Inspect and Edit HTML Live
Per gli utenti Android esiste un’applicazione chiamata Inspect and Edit HTML Live che può fungere da strumento per ispezionare gli elementi. Puoi cliccare sugli elementi per visualizzare il loro codice HTML e modificare il sorgente della pagina in tempo reale. Inoltre, questa app fornisce anche una console javascript prototipo in cui puoi eseguire i tuoi codici javascript.
- Scarica e installa l’app Ispeziona e modifica HTML Live sul tuo telefono Android.
- Aprilo e vai alla pagina web che vuoi esaminare. Per impostazione predefinita, si apre il sito Web di Google.
- Fai clic sull’icona della punta del dito nell’angolo in alto a destra. Questo attiva la modalità di ispezione.
- Adesso clicca sull’oggetto che vuoi controllare. L’app mostra il codice HTML di questo elemento. Puoi modificarlo e applicare le modifiche per vedere i risultati in tempo reale.
- Modifica origine pagina – Per modificare il codice sorgente della pagina, tocca il pulsante del menu (tre punti) e quindi fai clic sull’opzione Modifica origine pagina.
- Modifica elementi HTML: questa opzione nel menu mostra alcuni elementi HTML comuni (come ,,
- ,,
ecc.) che puoi visualizzare tutto in una volta sulla pagina web.
Questa app non è completamente gratuita. Ti dà solo 20 modifiche gratuite. Successivamente è necessario acquistare la versione completa o guardare un annuncio per sbloccarlo. Per quanto riguarda la piattaforma mobile, l’app è abbastanza buona per ispezionare gli elementi di base del sito Web, ma non è affatto vicino a ciò che lo strumento Inspect Elements offre sui browser desktop.
Quindi queste sono due semplici soluzioni alternative che puoi utilizzare per visualizzare il codice sorgente ed esaminare gli elementi della pagina web sul tuo iPhone o dispositivo Android. Se hai bisogno di aiuto o vuoi una risposta a qualsiasi tua domanda, puoi lasciare un commento qui sotto. Ti è piaciuto questo articolo? Non dimenticare di condividerlo con i tuoi amici sviluppatori.
Ayrıca bakınız: La valutazione dei rischi: fasi e documenti utili
.
