Introduzione
In un mondo in cui l'informatica basata su cloud è all'ordine del giorno, la necessità di comprendere come visualizzare il browser per esaminare HTML, comunicazioni di rete e CSS è sempre maggiore. Questo articolo si propone di fornire le basi per aprire la developer console utilizzando browser moderni e descrivere in modo semplice le principali schede della console web. Capire questi concetti di base permette di ottenere informazioni molto importanti. Di conseguenza le tempistiche di risoluzione dei ticket di supporto verranno ridotte e ne deriverà un senso generale di miglioramento.
Accedere alla Developer Console
Innanzitutto, come si accede alla Developer Console del browser? La tabella che segue elenca alcuni shortcut:
| Browser | PC | MAC |
| Google Chrome | Control + Shift + J | Option + Command + I |
| Firefox | Control + Shift + J | Option + Command+ K |
| Safari | Non applicabile |
Option + Command + C (Se il menu Sviluppo non è mostrato nella barra dei menu, scegliete Safari > Preferenze, cliccare Avanzate, quindi selezionare "Mostra menu Sviluppo nella barra dei menu"). |
| Edge | F12 |
Non applicabile |
Facendo clic con il tasto destro del mouse in una pagina nel browser, si aprirà un menu di scelte rapide, nel quale figura l'opzione Ispeziona oppure Ispeziona elemento. Selezionando una di queste opzioni, verrà aperta la Developer Console. Una volta aperta, vengono mostrate tre tab: Console, Elements e Network. Fare riferimento alle sezioni seguenti che corrispondono alle tre tab.
Tab Console
Questa tab è considerata la base dello strumento su browser per sviluppatori. Da qui, è possibile visualizzare dati che aiutano con il debug di API, iFrame, errori HTTPS, variabili SCORM CMI e parametri XAPI/TinCan.
Consiglio: Gli errori verranno scritti in rosso. Se si riscontra un problema con in un'area della piattaforma, recuperare il codice dell’errore e riportare quell’errore nel ticket di supporto sono un buon punto di partenza per ricevere assistenza dal team di Help Desk di Docebo.
Tab Elements
Mostra il Document Object Model (DOM) nel suo stato attuale. Se si utilizza Microsoft Edge, potrebbe essere necessario ricaricare la pagina per visualizzare il DOM. Questa scheda consente, temporaneamente, di modificare e copiare elementi, modificare l’HTML, aggiungere attributi e altro. Se si cerca di modificare il CSS (Cascading Style Sheets) in piattaforma, la tab Elements fornisce una rappresentazione chiara delle modifiche al DOM prima di applicare il CSS personalizzato alla piattaforma Docebo.
Attenzione: in Firefox, questa tab è identificata come tab HTML.
Tab Network
Mostra le risorse e i file inizializzati per caricare la pagina che si sta visualizzando. Generalmente, gli strumenti per sviluppatori devono già essere aperti affinché la tab Network fornisca informazioni. Se la tab non era già aperta, ricaricare la pagina dopo l’acceso alla tab Network.
Attenzione: in Firefox, questa tab è identificata come Net.
Ora, con queste informazioni di base sulla console web, sarà più semplice personalizzare e migliorare la piattaforma e risolvere problemi al suo interno.