Come ispezionare gli elementi su un Chromebook

Ispezionare gli elementi su un Chromebook è uno strumento utile per curiosare nel codice front-end di un sito web: HTML, CSS e persino un po’ di JavaScript.È utile principalmente per il debug o per apportare modifiche particolari, ma tieni presente che queste modifiche sono solo temporanee. Ricarica la pagina e tutto tornerà alla normalità. Provalo se stai armeggiando con il web design o anche solo per risolvere alcuni problemi di layout. Poiché i Chromebook eseguono Chrome OS, il processo è praticamente lo stesso di Chrome standard, ma a volte si incontrano strani blocchi, soprattutto se si utilizzano dispositivi scolastici o di lavoro in cui entrano in gioco le restrizioni amministrative. Quindi, sapere come accedere o addirittura aggirare alcune di queste restrizioni può essere un vero toccasana. Se il normale metodo del clic destro non funziona, ad esempio perché è disabilitato o bloccato, puoi provare alcuni metodi alternativi. Ecco alcune opzioni per far funzionare questi strumenti di sviluppo sul tuo Chromebook, che tu sia semplicemente stanco delle fastidiose restrizioni o che tu voglia dare un’occhiata al codice di un sito per divertimento.

Come ispezionare gli elementi su Chromebook

Utilizzo del tasto destro del mouse

Questo è il metodo più semplice: basta fare clic con il pulsante destro del mouse (o toccare con due dita se si utilizza un trackpad) su qualsiasi elemento che si desidera esaminare, quindi selezionare Ispeziona. Nella maggior parte delle configurazioni, si aprirà immediatamente il pannello Strumenti per sviluppatori ed evidenzierà il codice per quell’elemento. Abbastanza semplice, vero? Tuttavia, a volte i siti bloccano il clic con il pulsante destro del mouse, soprattutto se i proprietari di contenuti stanno cercando di proteggere i propri contenuti. In tal caso, passa alle opzioni più avanzate riportate di seguito. Nella mia configurazione, su alcuni siti, il clic con il pulsante destro del mouse inizialmente non funziona, ma dopo un rapido aggiornamento della pagina o un blocco degli script/disabilitazione, improvvisamente funziona.È strano come queste protezioni possano essere così incoerenti.

Utilizzo dei tasti di scelta rapida

Se il tasto destro del mouse è disabilitato o sei semplicemente pigro, Ctrl + Maiusc + C è il tuo amico. Attiva immediatamente la stessa funzione “Ispeziona”.Quando si aprono gli strumenti per sviluppatori, vedrai una piccola icona a forma di freccia nell’angolo in alto a sinistra del pannello degli strumenti. Cliccandoci sopra, appare un cursore a forma di mirino: clicca su qualsiasi elemento della pagina per ispezionare solo quella parte. Sembra un modo rapido per iniziare senza dover navigare nei menu. Su alcuni siti, questa scorciatoia funziona subito come per magia, ma su altri, soprattutto sui siti con protezione elevata, potrebbe non fare nulla a meno che tu non abbia abilitato alcune autorizzazioni extra. Perché, ovviamente, Chrome deve rendere la cosa più difficile del necessario.

Utilizzo del menu Chrome

Se preferisci i menu, apri il menu di Chrome cliccando sui tre puntini ( ellissi verticale ) nell’angolo in alto a destra. Quindi vai su Altri strumenti > Strumenti per sviluppatori. Si aprirà il pannello di sviluppo a destra o in basso. Da lì, clicca sulla scheda Elementi e il gioco è fatto. Per ispezionare elementi specifici, clicca sull’icona a forma di freccia nel pannello e seleziona qualsiasi parte della pagina che desideri analizzare.È semplice, ma, ripeto, se gli strumenti per sviluppatori sono bloccati, potrebbe non funzionare. A volte, riavviare Chrome o cancellare la cache può aiutare ad aggiornare le autorizzazioni, ma sui dispositivi scolastici, questo potrebbe fallire silenziosamente.

Sbloccare gli strumenti per sviluppatori o trucchi più avanzati

Ora, se utilizzi un Chromebook con restrizioni, come quello scolastico, è probabile che tutte queste opzioni siano bloccate. Ma, per essere un po’ furtivi, esiste una soluzione alternativa se hai bisogno di ispezionare qualcosa di basilare. Una soluzione che ho visto funzionare è l’aggiunta di un bookmarklet che inserisce un piccolo script nella pagina: come questo, ho dovuto copiare e incollare nell’URL di un segnalibro:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

In pratica, questo trasforma la pagina in una sorta di documento modificabile, così puoi modificarne la visualizzazione. Non è esattamente la stessa cosa degli strumenti di sviluppo, ma se vuoi vedere come sono disposti i diversi elementi o modificare del contenuto statico, è una soluzione rapida. Per farlo, crea un nuovo segnalibro (dal menu, Segnalibri > Aggiungi segnalibro ) e incolla il codice nel campo URL. Ora, cliccando su quel segnalibro su qualsiasi pagina, lo renderai modificabile. Tuttavia, non avrai accesso completo a CSS e HTML come negli strumenti di sviluppo, ma è sufficiente per qualche ritocco occasionale. Tieni presente che sui dispositivi bloccati, questo metodo potrebbe essere disabilitato o non funzionare se l’amministratore ha ulteriormente inasprito le restrizioni.

Onestamente, è un po’ frustrante come alcuni ambienti blocchino le funzionalità di base per gli sviluppatori web, ma ci sono delle soluzioni alternative. Bisogna solo approfondire queste opzioni, e a volte procedere per tentativi. Se state cercando di aggirare le restrizioni, ricordate: la cautela è fondamentale, soprattutto negli ambienti gestiti. Tuttavia, per uso personale, questi trucchi possono risparmiarvi un sacco di grattacapi quando volete solo dare un’occhiata sotto il cofano.