Suggerimenti sull'utilizzo dell'elemento Inspect del browser Google Chrome

Sommario:

Suggerimenti sull'utilizzo dell'elemento Inspect del browser Google Chrome
Suggerimenti sull'utilizzo dell'elemento Inspect del browser Google Chrome

Video: Suggerimenti sull'utilizzo dell'elemento Inspect del browser Google Chrome

Video: Suggerimenti sull'utilizzo dell'elemento Inspect del browser Google Chrome
Video: 5 COSE che DEVI SAPERE se vuoi INIZIARE a STREAMMARE nel 2022 - YouTube 2024, Maggio
Anonim

Google Chrome è progettato non solo per i normali utenti di Internet, ma anche per gli sviluppatori web, che spesso creano un sito Web, blog di progettazione, ecc Ispeziona elemento o Ispezionare l'opzione di Google Chrome aiuta gli utenti a trovare alcune informazioni su un sito Web che è nascosto alla vista. Ecco alcuni suggerimenti su come utilizzare Inspect Element del browser Google Chrome per PC Windows.

Ispeziona l'elemento di Google Chrome

1] Trova file JavaScript / multimediali nascosti

Image
Image

Molti siti Web mostrano popup se il visitatore rimane nella pagina Web per più di 15 o 20 secondi. Oppure, molte volte un'immagine, un annuncio o un'icona, si apre dopo aver cliccato in un punto a caso. Per trovare questi file nascosti di una pagina Web, puoi utilizzare il fonti scheda di Inspect Element. Mostra una lista di visualizzazione ad albero sul lato sinistro che può essere esplorata.

2] Ottieni il codice colore HEX / RGB in Chrome

Image
Image

A volte possiamo piacere un colore e potremmo voler scoprire il suo codice colore. È possibile trovare facilmente il codice colore HEX o RGB utilizzato su una particolare pagina Web, utilizzando l'opzione nativa in Google Chrome. Fare clic con il tasto destro sul colore e fare clic su Ispezionare. Nella maggior parte dei casi, otterrai il codice colore sul lato destro con altri CSS. Se non lo vedi, beh, potresti dover utilizzare un software di selezione colori gratuito.

MANCIA: Dai un'occhiata anche a questi strumenti online di Color Picker.

3] Ottieni suggerimenti per migliorare le prestazioni della pagina web

Image
Image

Tutti amano atterrare su un sito web che si apre velocemente. Se stai progettando il tuo sito web, dovresti sempre tenerlo a mente. Ci sono molti strumenti per controllare e ottimizzare la velocità di caricamento della pagina. Tuttavia, Google Chrome include anche uno strumento integrato che consente agli utenti di ottenere suggerimenti per migliorare la velocità di caricamento del sito web. Per accedere a questi strumenti, vai a verifiche scheda e assicurati Utilizzo della rete, Prestazioni della pagina Web, e Ricarica pagina e audit al caricamento sono selezionati. Quindi fare clic su Correre pulsante. Ricaricherà la pagina e mostrerà alcune informazioni che possono essere utilizzate per rendere la pagina più veloce. Ad esempio, è possibile ottenere tutte le risorse che non hanno alcuna scadenza della cache, JavaScript che può essere combinato in un unico file e così via.

4] Controlla la reattività

Image
Image

Rendere la pagina web reattiva è cruciale, al giorno d'oggi. Ci sono molti strumenti che possono controllare se il tuo sito è completamente reattivo o meno. Tuttavia, questo strumento di Google Chrome aiuta gli utenti a sapere se il sito è reattivo o meno e controlla come apparirà su un determinato dispositivo mobile. Apri qualsiasi sito web, ottieni Ispeziona elemento scheda, fare clic su mobile pulsante, impostare la risoluzione o selezionare il dispositivo desiderato per testare la pagina Web.

5] Modifica sito web live

Supponiamo che tu stia creando una pagina web, ma sei confuso riguardo alla combinazione di colori o alla dimensione del menu di navigazione o al contenuto o al rapporto della barra laterale. Puoi modificare il tuo sito web dal vivo utilizzando l'opzione Controlla elemento di Google Chrome. Sebbene non sia possibile salvare le modifiche su un sito Web attivo, è possibile eseguire tutte le modifiche per poterle utilizzare ulteriormente. Per fare ciò, apri Inspect Element, seleziona la proprietà HTML dal lato sinistro e apporta le modifiche di stile sul lato destro. Se apporti modifiche al CSS, puoi fare clic sul link del file, copiare l'intero codice e incollarlo nel file originale.
Supponiamo che tu stia creando una pagina web, ma sei confuso riguardo alla combinazione di colori o alla dimensione del menu di navigazione o al contenuto o al rapporto della barra laterale. Puoi modificare il tuo sito web dal vivo utilizzando l'opzione Controlla elemento di Google Chrome. Sebbene non sia possibile salvare le modifiche su un sito Web attivo, è possibile eseguire tutte le modifiche per poterle utilizzare ulteriormente. Per fare ciò, apri Inspect Element, seleziona la proprietà HTML dal lato sinistro e apporta le modifiche di stile sul lato destro. Se apporti modifiche al CSS, puoi fare clic sul link del file, copiare l'intero codice e incollarlo nel file originale.

Ispezionare Elemento di Google Chrome è un vero compagno di ogni sviluppatore web. Non importa se stai sviluppando un sito web a una pagina o un sito web dinamico, puoi certamente usare questi suggerimenti.

Consigliato: