Cos’è la console dello sviluppatore?
La Console per sviluppatori è un ambiente di sviluppo integrato con una serie di strumenti che puoi usare per costruire, fare il debug e testare le applicazioni direttamente nel tuo browser. Registra le informazioni associate a una pagina web, come richieste di rete, HTML, CSS, JavaScript, avvisi ed errori. Le catture degli avvisi presenti nella Console per sviluppatori possono essere molto utili al team di supporto di Elfsight quando risolvono il problema che stai riscontrando con i nostri widget.
Come aprire la console nei diversi browser
Con pochi clic è possibile aprire la console nel browser che stai usando, e puoi anche avviarla usando scorciatoie da tastiera o tasti di scelta rapida. Nella guida qui sotto troverai istruzioni rapide su come aprire la console nei browser più diffusi e schermate del processo.
Come aprire la console degli sviluppatori in Chrome
Per aprire il pannello degli strumenti di sviluppo in Google Chrome, devi fare clic sull’icona con i tre puntini nell’angolo in alto a destra della finestra del browser, fai clic su Altri strumenti dove troverai Strumenti per sviluppatori in un menu a discesa.
Un’altra opzione è utilizzare la scorciatoia degli strumenti per sviluppatori di Chrome: F12 (su Windows/Linux) e Opzione + ⌘ + J (su macOS).
Vedrai la console sia in basso che sul lato destro della pagina di Chrome. Seleziona l’Console e inizia a analizzare le prestazioni del tuo codice.
Inoltre, una volta imparato ad aprire la console degli sviluppatori in Chrome, ti abituerai al processo di apertura degli strumenti per sviluppatori in diversi browser.
Apri gli Strumenti per sviluppatori di Opera
Puoi utilizzare la console di Opera per esaminare, modificare e debug HTML, CSS e JavaScript. Per usarla, usa la seguente scorciatoia: Ctrl+Shift+C per aprire la Console degli Strumenti per sviluppatori o Ctrl+Shift+I per prima aprire gli strumenti per sviluppatori e successivamente selezionare Console.
Avvia la console web di Firefox
La console di Mozilla Firefox può essere avviata facendo clic su Sviluppatore Web nel menu in alto a destra, poi selezionando Console del browser. Inoltre, puoi utilizzare la scorciatoia degli strumenti per sviluppatori di Firefox, ovvero Ctrl+Shift+J.
Abilita gli strumenti per sviluppatori in Safari
Per aprire la console su Safari, dovrai abilitare il Menu Sviluppatore. Per farlo, vai nelle Preferenze di Safari (Menu Safari > Preferenze) e scegli la scheda Avanzate.
Inoltre, aprirai la console per sviluppatori in Safari facendo clic su Sviluppo > Mostra Console JavaScript. Puoi anche beneficiare della scorciatoia Option + ⌘ + C. La scheda della console si aprirà automaticamente; non dovrai sceglierla.
Apri la console di Microsoft Edge
Puoi aprire la console del browser Edge cliccando su Strumenti per sviluppatori F12 nel menu a discesa, oppure premendo F12. Puoi anche fare clic con il tasto destro su qualsiasi elemento della pagina e selezionare Ispeziona elemento.
Apri la console di Internet Explorer
La console di sviluppo di IE può essere aperta nello stesso modo della console Edge. Clicca su Strumenti per sviluppatori F12 nel menu a discesa o premi semplicemente il tasto F12. In questo modo potrai accedere con successo alla console di Internet Explorer e iniziare ad esaminarla.
Le schede principali degli Strumenti per sviluppatori
Di seguito una breve panoramica delle principali schede della console presenti tra gli Strumenti per sviluppatori. Le abbiamo esaminate tutte usando come esempio il browser Google Chrome.
Scheda Elementi
Il Pannello degli elementi è uno strumento potente per chi vuole esaminare le prestazioni CSS e HTML della tua pagina. Puoi fare clic con il tasto destro su qualsiasi elemento della pagina, scegliere Ispeziona elemento, e vedere evidenziati nel codice gli attributi dell’elemento.
Console
La scheda Console di Chrome DevTools mostra come gli script interagiscono con la pagina. È un interprete di comandi che puoi utilizzare per avviare un motore di scripting e inserire comandi per eseguire gli script. Se il team di supporto ti chiede di fare uno screenshot della console, avrà bisogno di un’immagine scattata dalla scheda Console.
Pannello Sorgenti
Puoi utilizzare la Scheda Origini in Chrome DevTools per modificare JavaScript e CSS, visualizzare i file, creare snippet JavaScript e usarli in seguito. Inoltre, questa scheda può aiutare nel debugging del codice JavaScript.
Scheda Rete
Il Pannello Rete può essere usato come strumento di test, che controlla la prestazione delle pagine web e identifica i problemi che rallentano il sito. La scheda Rete di Chrome inizia a registrare tutte le richieste di rete non appena apri DevTools. Puoi ordinarle ulteriormente per diverse proprietà.
Scheda Prestazioni
Il pannello Prestazioni ti permette di registrare i tempi di esecuzione e le prestazioni di caricamento nel tempo. Questo pannello rivela quanto bene si comporta il sito una volta caricato completamente e utilizzato dai visitatori. Puoi scegliere di registrare le prestazioni o scattare una serie di istantanee del processo.
Scheda Memoria
Si può utilizzare la scheda Chrome Memoria per diagnosticare e risolvere problemi di memoria quali memoria gonfia, garbage collection e perdite di memoria. Tutti questi problemi influenzano le prestazioni della pagina. Se non risolti, il tuo sito diventerà lento e poco attraente per i visitatori.
Pannello Applicazioni
Con l’aiuto della scheda Applicazione tab puoi fare il debug delle Progressive Web Apps; ispezionare e gestire archiviazione, database e cache; ispezionare ed eliminare i cookie; e ispezionare le risorse.
Sicurezza
La scheda Security tab può tornare utile se vuoi risolvere problemi di contenuti misti e di certificato. Si ritiene che il sito non sia sicuro quando l’URL visitato è stato richiesto via HTTP. Secondo gli standard web moderni, ciò dovrebbe avvenire tramite il protocollo HTTPS. Se vedi che la pagina contiene contenuti misti, significa che sono parzialmente protetti e vulnerabili agli sniffers.
Scheda Lighthouse
Lighthouse è uno strumento automatico per migliorare la qualità delle web app. È integrato direttamente in Chrome DevTools. Offre audit delle prestazioni, accessibilità, PWA e SEO e molto altro.
Avvisi ed errori tipici della console durante l’uso dei widget Elfsight
Qualcosa va storto nel funzionamento dei widget Elsfight. Non temere se nella console compaiono avvisi o errori di colore rosso. Se conosci la causa per cui si sono verificati, probabilmente riuscirai a risolvere tutto da solo. Di seguito trovi un elenco dei fallimenti comuni che potresti vedere nella console.
Questi sono due errori relativi a tutti i nostri widget:
Widget bloccato – hai bloccato il dominio del sito nel tuo account Elfsight se l’errore si riferisce a apps.elfsight.com.
Widget non trovato – potresti aver eliminato accidentalmente il widget dall’account. Controllalo.
Vedi, non è un grosso problema. Ora analizzeremo alcuni errori nel funzionamento di particolari widget e integrazioni.
Problemi comuni di Google Maps
Per quanto riguarda Google Maps, gli errori di solito si verificano se c’è un problema con la chiave API.
ExpiredKeyMapError – la chiave API è scaduta o non è riconosciuta. Nella maggior parte dei casi dovresti generarne una nuova. Se ottieni questo errore subito dopo aver creato una nuova chiave API, dovrai attendere da 1 a 8 minuti oppure abilitare separatamente l’API Places.
RefererNotAllowedMapError – L’URL di Elfsight che carica l’API JavaScript di Maps non è autorizzato come referrer. Dovresti controllare le impostazioni del referrer della tua chiave API in Google Cloud Platform Console. Mentre usi il nostro widget, dovrai aggiungerci come referrer. Ecco un articolo su come farlo correttamente.
ClientBillingNotEnabledMapError – Per utilizzare il widget di Google Maps, è necessario avere un account di fatturazione. Questo errore si è verificato perché non hai attivato la fatturazione sul tuo progetto. La soluzione è abilitare la fatturazione sul Google Cloud Project associato a questo client ID. Puoi farlo qui.
BillingNotEnabledMapError – Con Google Maps, è necessario abilitare la fatturazione.
Guasti della Galleria YouTube nella console
Se usi la Galleria video YouTube di Elfsight, non dovrai preoccuparti della maggior parte dei problemi elencati di seguito. Tuttavia, ci sono due problemi generali che possono verificarsi anche nel nostro widget.
quotaExceeded – YouTube utilizza limiti di utilizzo per consentire agli utenti di accedere ai contenuti e recuperarli su siti o applicazioni. Una volta superati i limiti di YouTube, noterai che la tua Galleria YouTube smette di funzionare o funziona lentamente sul sito. La soluzione potrebbe essere la seguente:
- Ottieni una nuova chiave API se stai recuperando contenuti YouTube da solo;
- Contatta il nostro team di supporto a support@elfsight.com se stai usando la Galleria YouTube di Elfsight, che è molto più semplice.
videoNotFound – Questo avviso può verificarsi se l’URL che hai inserito per collegarti al video di YouTube è errato. A volte gli utenti incollano un link alla pagina contenente il video, ma non è la posizione reale del video, provocando l’errore. Controlla tutto e incolla il link al video originale.
Errori del Feed di Facebook e del Feed di Instagram
Se Facebook Feed o Instagram non funzionano, puoi verificare cosa sta accadendo nella Console degli sviluppatori. Poiché entrambe le applicazioni popolari si basano sull’API di Facebook, le spiegazioni degli errori seguenti potrebbero valere per entrambe.
err_ssl_protocol_error when using Facebook or Instagram Feed widget on your website may be caused by various reasons. To resolve it, you can try to set a correct date and time, clear Chrome browsing data or clear your SSL state. Also, if the Facebook Graph API throws errors, you can use the fbtrace_id to find out more info about them. However, if nothing of the above helped, you can always reach out our support team.
rest_cannot_access – di solito significa che un widget di terze parti, come il plugin Password Protect, sta impedendo al nostro widget di funzionare correttamente. Disabilitare un servizio del genere risolve il problema.
La pagina richiesta non può essere visualizzata in questo momento – ciò potrebbe indicare che la tua applicazione Facebook è in modalità di sviluppo. Non riceverai questo messaggio di errore se sei un utente di Elfsight Facebook Feed; tuttavia, se vedi questo messaggio, contatta il nostro team di supporto.
OAuthException su Instagram in particolare significa che lo stato di accesso o il token di accesso è stato revocato, scaduto o è invalido per qualche motivo. In questo caso, contatta il nostro team di supporto; gli sviluppatori di Elfsight otterranno un nuovo token di accesso o esamineranno un eventuale subcodice, se presente.
Gli errori della console più comuni
In qualità di sviluppatore web esperto, probabilmente hai già visto questi errori più di quanto vorresti. Si manifestano in Chrome quando leggi una proprietà o chiami un metodo su un oggetto non definito. Puoi provare try…catch per questi errori particolari nella Console degli strumenti per sviluppatori di Chrome e Safari.
Se non sei uno sviluppatore professionista, puoi saltare questa guida.
Uncaught TypeError: Impossibile leggere la proprietà
Questo può accadere per molte ragioni, ma la più comune è un’inizializzazione dello stato non corretta durante il rendering dei componenti dell’interfaccia. È facile da risolvere. Il modo più semplice: inizializza lo stato con valori predefiniti ragionevoli nel costruttore.
TypeError: ‘undefined’ non è un oggetto
Questo è un errore che si verifica in Safari quando leggi una proprietà o chiami un metodo su un oggetto non definito. Puoi testarlo nella Console degli Strumenti per sviluppatori di Safari. È praticamente lo stesso errore di quello descritto sopra per Chrome, ma Safari usa un messaggio di errore diverso.
(sconosciuto): Errore di script
Se vedi questo errore, dovresti innanzitutto ottenere il messaggio reale. Puoi ottenerlo facendo quanto segue: imposta l’intestazione Access-Control-Allow-Origin su *, il che significa che la risorsa può essere accessibile correttamente da qualsiasi dominio. Puoi sostituire * con il tuo dominio se necessario: ad esempio, Access-Control-Allow-Origin: www.example.org. Tuttavia, la gestione di più domini può diventare complicata e potrebbe non valerne la pena se stai usando una CDN a causa di problemi di caching che possono sorgere.
Questo è come risolvere i più comuni errori della console JavaScript. Aggiorneremo questa lista man mano che noi e i nostri clienti incontreremo altri problemi.
Conclusione
La Console per sviluppatori è uno strumento fantastico che permette a qualsiasi programmatore di accedere a una valanga di dati sul proprio sito. Non è difficile aprirla e iniziare a usarla, ma richiederà tempo e impegno: basta avere pazienza.
Quali errori hai incontrato finora? Condividi la tua esperienza nei commenti qui sotto, saremo felici di discuterne con te!
Inoltre, tieni presente che abbiamo anche altre guide fantastiche; ad esempio, scopri come inserire le recensioni Google sul tuo sito web!
