Ispeziona elemento: come modificare temporaneamente qualsiasi pagina Web

C'è un potente strumento nascosto nel tuo browser: Inspect Element .

Fai clic con il pulsante destro del mouse su qualsiasi pagina web, fai clic su Ispeziona e vedrai le parti interne di quel sito: il suo codice sorgente, le immagini e i CSS che ne formano il design, i caratteri e le icone che utilizza, il codice Javascript che alimenta le animazioni e altro ancora . Puoi vedere quanto tempo impiega il sito per caricarsi, quanta larghezza di banda ha utilizzato per scaricare e il colore esatto nel suo testo.

Oppure puoi usarlo per cambiare tutto ciò che vuoi sulla pagina.

Inspect Element è un modo perfetto per imparare cosa fa funzionare il web, capire cosa non funziona sui tuoi siti, simulare come sarebbe un cambiamento di colore e carattere e impedirti di dover Photoshop per i dettagli privati ​​negli screenshot. È un super potere che non avresti mai saputo che il tuo browser possedesse.

Impariamo come utilizzare Google Chrome Inspect Element per aiutare il tuo lavoro, che tu sia uno sviluppatore o un marketer che non ha mai scritto una riga di codice. Se stai leggendo questo sul tuo telefono, è ora di passare al tuo laptop, aprire Google Chrome e prepararti a modificare un po' di codice.

Aspetta, perché dovrei usare Ispeziona elemento?

Se non hai mai dato un'occhiata al codice di un sito Web per curiosità, potresti chiederti perché dovresti imparare a usare Inspect Element.

• Designer : vuoi vedere in anteprima come apparirà il design di un sito sui dispositivi mobili? O vuoi vedere come apparirebbe una diversa tonalità di verde su un pulsante di registrazione? Puoi fare entrambe le cose in pochi secondi con Inspect Element.

• Marketer : sei curioso di sapere quali parole chiave utilizzano i concorrenti nelle intestazioni del loro sito o vuoi vedere se il caricamento del tuo sito è troppo lento per il test PageSpeed ​​di Google? Ispeziona elemento può mostrare entrambi.

• Scrittore : Stanco di nascondere il tuo nome e la tua email negli screenshot? Con Inspect Element, puoi modificare qualsiasi testo su una pagina web in un secondo.

• Agente di supporto : hai bisogno di un modo migliore per dire agli sviluppatori cosa deve essere riparato su un sito? Ispeziona elemento ti consente di apportare una rapida modifica di esempio per mostrare di cosa stai parlando.

Per questi e dozzine di altri casi d'uso, Inspect Element è uno strumento utile da tenere a portata di mano. Fa parte degli Strumenti per sviluppatori nel tuo browser, che include una serie di funzionalità extra: una console per eseguire il codice, una pagina Visualizza sorgente per vedere solo il codice grezzo dietro un sito, una pagina Sorgenti con un elenco di tutti i file caricati in un sito web e altro ancora. Puoi esplorarli tutti da solo, ma per ora vediamo come utilizzare la scheda Elementi principale per modificare una pagina Web da soli.

Come iniziare con Inspect Element

Esistono alcuni modi per accedere a Google Chrome Inspect Element. Basta aprire un sito Web che si desidera provare a modificare (per seguire questo tutorial, aprire Zapier.com), quindi aprire gli strumenti Ispeziona elemento in uno di questi tre modi:

• Fare clic con il pulsante destro del mouse in qualsiasi punto della pagina Web e, nella parte inferiore del menu visualizzato, verrà visualizzato " Ispeziona ". Fare clic su quello.

• Fai clic sul menu dell'hamburger (l'icona con 3 punti impilati) all'estrema destra della barra degli strumenti di Google Chrome, fai clic su Altri strumenti , quindi seleziona Strumenti per sviluppatori . In alternativa, nel menu File, fare clic su Visualizza —> Sviluppatore —> Strumenti per sviluppatori.

• Preferisci le scorciatoie da tastiera? Premi CMD + Option + I su un Mac o F12 su un PC per aprire Ispeziona elementi senza fare clic su nulla.

Per impostazione predefinita, gli Strumenti per sviluppatori si aprono in un riquadro nella parte inferiore del browser e mostrano la scheda Elementi , il famoso strumento Ispeziona elementi che stavamo cercando.

Non avrai molto spazio per lavorare con Ispeziona elemento nella parte inferiore dello schermo, quindi fai clic sui tre punti verticali nella parte in alto a destra del riquadro Ispeziona elemento vicino alla "X" (su cui faresti clic per chiudere il riquadro). Ora vedrai un'opzione per spostare il riquadro sul lato destro del browser (visualizzazione dock di destra) o per aprire il riquadro in una finestra completamente separata (visualizzazione disancoraggio).

Per questo tutorial, ancoriamo il riquadro sul lato destro della finestra del browser per darci più spazio per lavorare. Puoi allargare o restringere il pannello Strumenti per sviluppatori passando con il mouse sul bordo sinistro. una volta che appare il cursore, trascinare il riquadro a sinistra per allargarlo oa destra per restringerlo.

Ora che siamo in Inspect Element, abbiamo una serie di strumenti utili a portata di mano che possiamo usare per far apparire qualsiasi sito esattamente come vogliamo. Per questo tutorial, ci concentreremo sulle schede Elementi, Emulazione e Ricerca.

Ricerca

La scheda "Cerca" consente di cercare in una pagina Web un contenuto specifico o un elemento HTML. È un po' nascosto: dovrai fare clic sui 3 puntini, quindi su Cerca tutti i file per scoprirlo. Quindi sarai in grado di cercare in ogni file in una pagina web tutto ciò che desideri.

Elementi

"Ispeziona elemento" è lo strumento che esploreremo di più in questo tutorial ed è quello che si apre per primo quando avvii gli Strumenti per sviluppatori nella maggior parte dei browser. Oppure, fai clic sulla scheda "Elementi" negli Strumenti per sviluppatori per tornarci se hai esplorato altrove.

Nella scheda Esplora, puoi vedere tutto il codice HTML, JavaScript e CSS che ha creato un sito web. È quasi come visualizzare il sorgente di un sito Web, con una differenza cruciale: puoi modificare qualsiasi codice e vedere le modifiche in tempo reale sul sito che hai aperto. Puoi modificare qualsiasi cosa, dalla copia al carattere tipografico, quindi eseguire lo screenshot del nuovo design o salvare le modifiche (vai su Visualizza> Sviluppatore> Visualizza sorgente e salva la pagina come file HTML o copia le modifiche al codice nel tuo editor di testo). Una volta ricaricata la pagina, però, tutte le modifiche saranno perse per sempre.

Emulazione

Hai mai desiderato visualizzare in anteprima una pagina Web su un telefono senza estrarre il telefono dalla tasca? La scheda "Emulazione" ti consente di visualizzare una pagina Web come apparirebbe su qualsiasi dispositivo, con preimpostazioni per i dispositivi più diffusi o un'opzione per impostare la risoluzione dello schermo e le proporzioni. Puoi anche impostare una velocità Internet emulata, per vedere quanto velocemente un sito si caricherebbe su dial-up.

È anche un po' nascosto: dovrai aprire Inspect Element e fare clic sul pulsante dell'icona del telefono per avviarlo. Quindi, avrai uno strumento perfetto per capire come gli altri sperimentano una pagina web.

È ora di mettersi al lavoro. Utilizzeremo prima la ricerca per trovare elementi su una pagina web, quindi utilizzeremo Elements per modificare il testo e altro su un sito e infine utilizzeremo l'emulazione per vedere come apparirebbe il nostro sito su un telefono da una posizione specifica.

Trova qualsiasi cosa su un sito con Inspect Element Search

Ti stai chiedendo cosa succede nei tuoi siti preferiti? La ricerca è il tuo strumento migliore per questo, oltre a leggere l'intero codice sorgente di un sito. Puoi semplicemente aprire la vista Elementi predefinita, premere CTRL + F o CMD + F e cercare nel codice sorgente, ma lo strumento di ricerca completo ti consentirà di cercare in ogni file di una pagina, aiutandoti a trovare il testo all'interno dei file CSS e JavaScript o individua un'immagine icona di cui hai bisogno per un articolo.

Per iniziare, apri Zapier.com in Chrome se non lo hai già fatto, quindi apri Ispeziona elemento, fai clic sui 3 punti verticali nell'angolo in alto a destra del riquadro Strumenti per sviluppatori (vicino alla "X") di chiusura e seleziona " Cerca tutti i file." La scheda Cerca apparirà nella metà inferiore del riquadro Strumenti per sviluppatori.

Nel campo di ricerca, puoi digitare qualsiasi cosa, QUALSIASI cosa, che desideri trovare in questa pagina Web e verrà visualizzata in questo riquadro. Vediamo come possiamo usarlo.

Digita il meta name nel campo di ricerca, premi il tasto Invio e vedrai immediatamente ogni occorrenza di "meta nome" nel codice in questa pagina. Ora puoi vedere i metadati di questa pagina, le parole chiave SEO il suo targeting e se è configurato o meno per consentire a Google di indicizzarlo per la ricerca. È un modo semplice per vedere a cosa si rivolgono i tuoi concorrenti e per assicurarti di non aver sbagliato nulla sul tuo sito.

Proviamo con un'altra query. Elimina il meta name , digita invece h2 nel campo di ricerca e premi "invio". Vedrai ogni occorrenza di "h2" nei file JavaScript di Zapier in alto, ma una volta che scorri fino in fondo, puoi vedere ogni intestazione "h2" su questa pagina.

La ricerca è uno strumento efficace anche per i designer poiché puoi anche cercare per colore. Digita #ff4a00 nel campo di ricerca e premi " #ff4a00 " (e assicurati di selezionare la casella accanto a "Ignora maiuscole/minuscole" per vedere tutti i risultati). Ora dovresti vedere ogni volta il colore #ff4a00, la sfumatura arancione di Zapier, nei file CSS e HTML di questo sito. Quindi, fai semplicemente clic sulla riga "color: #ff4a00;" per saltare a quella riga nell'HTML del sito e modificarla da solo (qualcosa che vedremo nella prossima sezione).

Questo è un modo pratico per i designer di assicurarsi che un sito segua la guida di stile del loro marchio. Con lo strumento "Cerca", i designer possono facilmente controllare il CSS di una pagina Web per vedere se un colore è applicato all'elemento sbagliato, se viene utilizzata una famiglia di caratteri errata su una pagina Web o se stai ancora utilizzando il tuo vecchio colore da qualche parte sul tuo sito.

Lo strumento "Cerca" è anche il modo perfetto per comunicare meglio con gli sviluppatori poiché puoi mostrare loro esattamente dove hai trovato un errore o esattamente cosa deve cambiare. Basta dire loro il numero di riga in cui esiste il problema e otterrai la soluzione molto più rapidamente.

In alternativa, puoi modificare tu stesso la pagina web con Elements , la parte centrale degli strumenti per sviluppatori di Chrome.

Cambia qualsiasi cosa con gli elementi

Gli sviluppatori front-end utilizzano lo strumento Inspect Element ogni giorno per modificare l'aspetto di una pagina Web e sperimentare nuove idee, e anche tu puoi. Inspect Elements ti consente di modificare l'aspetto e il contenuto di una pagina web, aggiungendo modifiche temporanee ai file CSS e HTML del sito.

Una volta chiusa o ricaricata la pagina, le modifiche scompariranno; vedrai solo le modifiche sul tuo computer e non stai effettivamente modificando il vero sito web stesso. In questo modo, puoi sentirti libero di sperimentare e modificare qualsiasi cosa, quindi copiare e salvare le migliori modifiche per riutilizzarle in seguito.

Vediamo cosa possiamo fare con esso.

Fai clic sulla scheda "Elementi" nel riquadro Strumenti per sviluppatori e, se desideri più spazio, tocca il tasto "Esc" per chiudere la casella di ricerca che avevi aperto in precedenza. Dovresti vedere l'HTML di questa pagina: ora sai come viene prodotta la salsiccia.

Nell'angolo in alto a sinistra del riquadro degli sviluppatori, vedrai l'icona di un mouse sopra un quadrato. Fare clic su di esso, quindi è possibile selezionare qualsiasi elemento della pagina che si desidera modificare. Quindi cambiamo alcune cose!

Modificare il testo su una pagina Web

Hai mai desiderato cambiare il testo su un sito, magari per vedere come apparirebbe un nuovo slogan sulla tua home page o per togliere il tuo indirizzo email da uno screenshot di Gmail? Ora puoi.

Fai clic sull'icona "mouse in cima a un quadrato", quindi fai clic su qualsiasi testo nella pagina, forse lo slogan sulla home page di Zapier. Nel riquadro Strumenti per sviluppatori, vedrai una riga di testo con un'evidenziazione blu simile a questa:

Fai doppio clic sul testo "Collega le tue app" evidenziato in blu nel riquadro Strumenti per sviluppatori e si trasformerà in un campo di testo modificabile.

Digita tutto ciò che ti piace in questo campo di testo ("Auri è un genio" dovrebbe funzionare bene) e premi invio. Ecco! Hai appena cambiato il testo nella pagina web.

Aggiorna la pagina e tutto tornerà alla normalità.

Divertimento? Cambiamo altre cose in questa pagina.

Il tuo riquadro Strumenti per sviluppatori si ricarica con la pagina, ma chiudiamola. Premi la "X" nell'angolo in alto a destra della pagina.

Freddo. Ora lo riapriremo, proprio nel testo che vogliamo modificare. Tutto quello che devi fare è fare clic con il pulsante destro del mouse sulla parte della pagina che desideri modificare, quindi fare clic sul collegamento Ispeziona o Ispeziona elemento che appare nella parte inferiore del menu di scelta rapida.

Quando si apre il riquadro Strumenti per sviluppatori, dovrebbe evidenziare automaticamente quella frase. Abbastanza pulito, eh? Sono le piccole cose che contano.

Ora che abbiamo selezionato lo slogan sul sito Zapier, cambiamo il suo aspetto.

Cambia il colore e il carattere degli elementi

A destra di questa frase nel riquadro Strumenti per sviluppatori, vedrai un sottoriquadro con 3 schede aggiuntive: Stili, Calcolato e Listener di eventi. Ciascuno ti consente di modificare l'aspetto di questa frase sulla pagina. Iniziamo dalla scheda "Stili".

Potresti notare che alcune cose sono barrate nella scheda "Stili". Ciò significa che questi stili non sono attivi per l'elemento che li abbiamo selezionati, quindi la modifica di questi valori non avrà alcun effetto. Possiamo ignorarli per i nostri scopi.

Proviamo a cambiare qualcosa. Fai nuovamente clic sull'icona della freccia nella parte superiore di Ispeziona elemento e seleziona il testo proprio sotto il pulsante "Registrati" nella pagina. Trova "text-align" nella scheda "Stili" (potresti dover scorrere un po' per trovarlo).

In questo momento, è impostato su "center", ma fai doppio clic su "center" e digita left . Questo rende il testo allineato a sinistra sulla pagina.

Ora giochiamo con il colore. Usa l'icona del mouse in Ispeziona elemento per selezionare il pulsante questa volta, quindi nella scheda Stili trova questa riga:

E fai doppio clic su "#ff4a00". Digita #4199ad (non dimenticare il #) e premi " #4199ad ".

Abbiamo appena cambiato il colore del nostro pulsante da arancione a blu! Ora proviamo qualcosa di veramente interessante.

Cambia gli stati degli elementi

Vuoi vedere come apparirà un pulsante o un collegamento una volta che qualcuno ci passa sopra con il mouse o fa clic su di esso? Chrome Inspect Element può mostrarlo anche con i suoi strumenti di stato dell'elemento force. Puoi vedere come apparirà l'elemento una volta che un visitatore passa sopra l'elemento (stato al passaggio del mouse), seleziona l'elemento (stato attivo) e/o ha fatto clic su quel collegamento (stato visitato).

Proviamo questo. Assicurati di aver selezionato il pulsante di registrazione nella home page di Zapier. Quindi, fai clic con il pulsante destro del mouse su quel codice nella scheda Elementi e seleziona :active: in quel menu.

Ciò cambierà il pulsante in grigio, che il sito di Zapier mostra quando fai clic sul pulsante.

Ora cambia il valore del colore di sfondo in #FF4A00 e dovresti vedere immediatamente il cambiamento di colore del pulsante.

Prova a sperimentare: cambia :hover: color, quindi deseleziona :hover: nel menu di scelta rapida e trascina il mouse sul pulsante per vedere il nuovo colore del pulsante.

Cambia immagini

Puoi anche cambiare facilmente le immagini su una pagina web con Inspect Element. Scambiamo lo sfondo del supereroe sul sito di Zapier con questa drammatica foto di un brillamento solare della NASA.

Per prima cosa, copia e incolla questo link nell'immagine:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Ora apri Inspect Element sullo sfondo della home page di Zapier e assicurati di aver selezionato la riga signup-hero nel codice. Fare doppio clic sul collegamento URL di sfondo nel riquadro "Stili" e incollare il collegamento copiato sopra.

Premi "invio" e vedi immediatamente la differenza.

Modificare il testo è utile, scambiare le immagini è divertente e cambiare i colori e gli stili potrebbe aiutarti a creare rapidamente un modello delle modifiche che desideri apportare al tuo sito. Ma come apparirà il nuovo slogan e il design dei pulsanti sui dispositivi mobili?

È qui che entra in gioco l'emulazione: è qui che tutto ciò che abbiamo recensito finora può essere ulteriormente applicato. Vediamo come.

Testa un sito su qualsiasi dispositivo con emulazione

Tutto deve essere reattivo oggi. I siti Web non vengono più visualizzati solo sui computer: è più probabile che mai che vengano visualizzati su un telefono, tablet, TV o qualsiasi altro tipo di schermo. Questo dovrebbe essere sempre tenuto a mente quando si creano nuovi contenuti e design.

L'emulazione è un ottimo strumento per approssimare come i siti web appariranno agli utenti su vari dispositivi, browser e persino posizioni. Sebbene questo non sostituisca effettivamente i test su una varietà di dispositivi e browser, è un ottimo inizio.

Nel riquadro Strumenti per sviluppatori, noterai una piccola icona del telefono nell'angolo in alto a sinistra. Cliccalo. Questo dovrebbe cambiare la pagina in una piccola pagina in stile telefono con un menu in alto per cambiare le dimensioni.

Ridimensiona il piccolo browser per vedere come appaiono le cose se stavi navigando su un tablet, un telefono o uno schermo anche più piccolo. Oppure, fai clic sul menu in alto per selezionare le dimensioni predefinite del dispositivo come iPad Pro o iPhone 8 Plus vai avanti e seleziona quest'ultimo.

La schermata della pagina Web dovrebbe ridursi fino alle dimensioni di un iPhone 8 Plus e puoi ingrandire un po 'facendo clic sull'icona + accanto al numero in alto a destra della griglia: è così che apparirebbe il sito se qualcuno ingrandisse mobile.

Vai avanti allarga la vista trascinando il bordo destro dell'emulazione della pagina web verso destra. Guarda cosa succede? Non siamo più nella visualizzazione iPhone 8 Plus. Trascinando lo schermo lungo la griglia puoi vedere come cambierà la pagina web al variare delle dimensioni dello schermo, ma la tua vista non rifletterà più il modello del dispositivo che hai scelto in precedenza.

Torniamo alla vista iPhone 8 Plus selezionandola nuovamente nell'elenco a discesa del modello. Accanto all'elenco a discesa c'è la parola "Ritratto". Come avrai intuito, questo ti consente di alternare tra la visualizzazione orizzontale e quella orizzontale.

Ora possiamo vedere come apparirebbe questo post se lo leggessi su un iPhone 8 Plus. Sentiti libero di giocare con gli altri dispositivi per vedere come cambia questa pagina web e la risoluzione dello schermo. Tutti gli altri strumenti di sviluppo che abbiamo esaminato finora reagiranno anche alla visualizzazione del dispositivo. Ad esempio, seleziona di nuovo il testo dello slogan di Zapier.

Nella visualizzazione dell'iPhone 8 Plus, possiamo vedere che questo testo è 2em, mentre nella visualizzazione predefinita su un computer è 3em.

"em" è un'unità di dimensione del carattere che consente di modificare automaticamente la dimensione del testo rispetto al testo circostante. Ad esempio, supponiamo di avere un utente con grandi impostazioni di caratteri personalizzati nel browser. Se imposti la dimensione del carattere del paragrafo su 14px, il tuo carattere sarà sempre 14px per quell'utente, qualunque cosa accada. Tuttavia, se imposti la dimensione del carattere del paragrafo su 1em, il browser dell'utente utilizzerà questa unità per ridimensionare il testo in base alle impostazioni grandi dell'utente. Telefoni e tablet lo fanno per ingrandire bene il testo.

Ora passiamo alla visualizzazione Apple iPad e selezioniamo l'intestazione "test su dispositivi" sopra. Questa volta, la dimensione del carattere è 3em. La dimensione del carattere è cambiata in base alla visualizzazione del dispositivo, tornando alla dimensione predefinita che utilizzerebbe su un computer, grazie allo schermo più grande del tablet.

Emula sensori per dispositivi mobili

Potresti aver notato che il tuo mouse ora appare come un piccolo cerchio sulla pagina web. Ciò ti consente di interagire con la pagina come se fossi sul tuo dispositivo mobile. Se fai clic mentre trascini la pagina verso il basso, questo non evidenzia il testo come farebbe normalmente nel tuo browser: trascina lo schermo verso il basso come se fossi su un dispositivo touchscreen. Usando questa vista, puoi vedere quanto sono grandi le zone tattili su una pagina web. Ciò significa che puoi vedere quali pulsanti, icone, collegamenti o altri elementi sono facilmente toccabili con il dito.

Puoi persino far funzionare il tuo browser come un telefono. Premi il tasto "Esc" per aprire nuovamente il riquadro di ricerca in Ispeziona elemento e questa volta fai clic sul menu a 3 punti sul lato sinistro per un menu di opzioni. Seleziona Sensori per ottenere tre nuovi strumenti: Geolocalizzazione, Orientamento e Tocco.

Il tocco ti consente di attivare o disattivare il selettore del cerchio predefinito che agisce più come un dito che come un normale cursore del mouse. L'orientamento ti consente di interagire con siti Web sensibili al movimento come i giochi online che ti consentono di spostare le cose spostando il telefono. E la geolocalizzazione ti consente di fingere di essere in una posizione diversa.

Proviamo a visualizzare questo sito dalla sede centrale di Google a Mountain View, CA.

Seleziona la casella accanto a "Emula coordinate di geolocalizzazione" e inserisci il valore 37 nel campo di testo Lat = e 122 nel campo di testo Lon = . Premi invio sulla tastiera.

Non cambia nulla, vero?

Questo perché in questa pagina non sono presenti contenuti che cambiano in base alla tua posizione. Tuttavia, se cambi le coordinate su un sito come Groupon.com che utilizza la tua posizione per mostrare contenuti localizzati, Groupon.com risultati diversi. Vai su Google.com in una posizione diversa e forse vedrai un nuovo logo di Google per una vacanza in un altro paese, o almeno otterrai i risultati in una lingua diversa.

L'emulazione è un ottimo modo per mettersi nei panni del tuo utente e considerare ciò che l'utente potrebbe vedere sulla tua pagina web ed è un modo divertente per esplorare il Web internazionale.

Emula reti mobili

Puoi anche vedere com'è navigare in un sito su reti diverse, magari per vedere se il tuo sito verrà caricato anche se i tuoi utenti si trovano su una rete 3G più lenta.

Per fare un tentativo, fai nuovamente clic sul pulsante con tre cerchi a sinistra della scheda di ricerca di Inspect Element e seleziona "Condizioni di rete". Lì puoi scegliere tra 3G veloce o lento o offline per vedere come funziona la pagina senza Internet. Oppure, fare clic su Aggiungi... per includere i propri test (forse aggiungere 56 Kbps per testare Internet dialup). Ora ricarica la pagina e vedrai quanto tempo impiegherebbe il sito per caricarsi con una connessione lenta e come appare il sito durante il caricamento. Questo mostrerà perché dovresti migliorare il tuo sito per caricare più velocemente su connessioni lente.

Puoi anche cambiare il tuo agente utente: deseleziona "Seleziona automaticamente" accanto a "Agente utente" e seleziona "Internet Explorer 7" forse per vedere se il sito cambia il suo rendering per i browser più vecchi. Questo è anche un utile trucco per caricare le pagine Web anche se affermano di funzionare solo in un browser diverso come Internet Explorer.

Sfide

Concludiamo con alcune sfide. Vai a mostrarci cosa hai imparato!

1. Cambia i titoli su CNN.com e twittaci uno screenshot del titolo del tuo articolo di tendenza.

2. Duplica il tuo sito web preferito utilizzando "Visualizza sorgente" e gioca con l'HTML per renderlo tuo.

3. Guarda come viene visualizzato il tuo sito web su un dispositivo mobile e mostra al tuo sviluppatore cosa potrebbe essere fatto meglio risolvendolo da solo!

Il team di marketing del team Zapier si affida a Inspect Element per modificare le informazioni private dagli screenshot nelle recensioni delle nostre app, mentre il nostro team di progettazione lo utilizza per simulare le modifiche e vedere come apparirebbero le cose su vari schermi.

Come si usa Ispeziona elemento? Ci piacerebbe sentire le tue storie nei commenti qui sotto!

Questo tutorial è stato originariamente pubblicato il 5 gennaio 2015, quindi è stato aggiornato e ripubblicato il 6 giugno 2017 e il 25 gennaio 2018 con schermate e passaggi dall'ultima versione di Google Chrome.