Gli sviluppatori di browser si sono presi cura della comodità di coloro che creano siti che si aprono in questi stessi browser, ovvero i webmaster. Hanno aggiunto strumenti per sviluppatori alle funzioni standard, con cui puoi facilmente aprire e visualizza il codice sorgente della pagina del sito nel browser: HTML, CSS, JavaScript (JS), ottenere vari dati utili sulla struttura del sito, condurre la sua analisi tecnica. In generale, per vedere molte cose utili.
Naturalmente, questi strumenti sono utilizzati non solo dai creatori di siti per lavoro, ma anche dagli utenti ordinari che possono vedere vari dati utili con il codice sorgente.
In questo articolo imparerai come visualizzare il codice sorgente di una pagina del sito in un browser (come aprire il codice del sito HTML, CSS, JavaScript).
Come aprire il codice sorgente di una pagina in un browser
Esistono due modi per aprire il codice sorgente di una pagina Web in un browser:
- Utilizzo dei tasti di scelta rapida;
- Apri dal menu contestuale.
Ctrl + U- una combinazione di tasti di scelta rapida per visualizzare il codice sorgente dell'intera pagina del sito in una nuova finestra separata. Standard per tutti i browser: Google Chrome, Opera, Mozilla Firefox, browser Yandex, IE.
Puoi anche accedere agli strumenti per sviluppatori come segue:
Per trovare rapidamente il codice, la parola o il testo richiesti sulla pagina, puoi utilizzare la combinazione di tasti di scelta rapida di ricerca standard per tutti i browser: Ctrl + G.
Istruzioni video:
Visualizza codice articolo | esplora elemento | ispezionare un oggetto
Se all'improvviso è necessario visualizzare non l'intero codice sorgente, ma visualizzarne solo una parte separata, alcune sezioni della pagina, lo strumento precedente non funzionerà. Per fare ciò, c'è un'altra funzione negli strumenti di sviluppo, che verrà discussa di seguito.
Come visualizzare il codice di un elemento in una pagina:
Inoltre, puoi utilizzare le scorciatoie da tastiera per accedere rapidamente all'ispezione degli elementi.
Tasti di scelta rapida (pulsanti):
Google Chrome: Ctrl + Maiusc + I e Ctrl + Maiusc + C
Opera: Ctrl + Maiusc + I e Ctrl + Maiusc + C
Mozilla Firefox: Ctrl + Maiusc + I e Ctrl + Maiusc + C
Browser Yandex: Ctrl + Maiusc + I e Ctrl + Maiusc + C
Dopo le azioni intraprese, il codice sorgente della pagina web si aprirà nella stessa finestra del browser:
Tutto il codice HTML sarà nella colonna grande di sinistra. E gli stili CSS sono sulla destra.
Il vantaggio di questo metodo, ovviamente, è che l'utente ha l'opportunità di cambiare il codice sorgente, modificare gli stili. Cioè, puoi modificare gli stili sul sito e vedere come apparirà con determinati stili, senza la necessità di apportare immediatamente modifiche ai file che si trovano sui server di hosting. Per modificare o aggiungere il codice del programma, è necessario fare doppio clic sul frammento o sull'area desiderati. Ovviamente, la correzione del codice del browser non verrà applicata ai server di hosting. Pertanto, in futuro, in ogni caso, dovrai copiare questo codice e scriverlo nei file.
Questo tutorial video descrive in dettaglio e mostra come lavorare con gli strumenti per sviluppatori:
Proprio così, online, direttamente nel browser, puoi visualizzare il codice sorgente della pagina del sito, ottenere dati di base sul codice HTML e CSS, modificarli e copiarli, senza dover scaricare i file di questo sito sul tuo computer.
A proposito, gli utenti Internet inesperti che hanno modificato il codice della pagina e si aspettano che venga salvato rimarranno delusi. Dopotutto, dopo aver aggiornato la pagina, tutte le modifiche su di essa scompariranno. Questo non è abbastanza per hackerare il sito 🙂
Come visualizzare il codice sorgente su un telefono Android
Vorrei anche notare che gli strumenti per sviluppatori sono disponibili non solo nella versione desktop dei browser, ovvero su computer e laptop. Su telefoni e tablet (Android, IOS), puoi anche visualizzare il codice sorgente.
Per fare ciò, aggiungi il prefisso view-source all'URL della pagina ispezionata:
Per esempio:
view-source: https: // sito / turbo-rezhim-opera /
1 voto
Buona giornata, cari lettori del mio blog. Succede che trovi alcune belle funzionalità sul sito e la domanda inizia a tormentare come il creatore abbia ottenuto un effetto così interessante.
Si scopre che trovare la risposta è piuttosto semplice. E se hai alcune abilità, puoi raccogliere molti di questi chip e creare il tuo sito Web unico in breve tempo.
Oggi parleremo di come aprire il codice di una pagina, un elemento specifico e impareremo come utilizzare questa abilità a tuo vantaggio.
Conoscenza di base del codice
Il mio sito è destinato ai principianti e prima vorrei parlarvi brevemente dei siti e del codice in generale.
Per disegnare un'immagine, quindi tagliarla in piccole parti, scrivi il codice, grazie al quale il browser raccoglierà nuovamente tutti gli elementi in un unico insieme. Tutto sembra molto complicato? Assolutamente no, e non dovresti addolorartene.
Ecco come nascono i siti web di qualità. Se vuoi - essere coinvolto in questo business e studiare, non c'è desiderio - nessuno può costringerti.
Posso solo dire una cosa... non c'è niente di più piacevole che vedere come parole incomprensibili scritte da te si trasformano in un tutt'uno e prendono vita: i link funzionano, i pulsanti si muovono, le immagini si muovono, il testo striscia. Penso di sapere come si sentiva Victor Frankenstein.
Quando inizi a comprendere il linguaggio segreto e vedi che tutto è in realtà molto più semplice di quanto sembrava inizialmente, non puoi fare a meno di credere nei tuoi punti di forza e capacità del cervello. Questo è molto bello.
Come sono fatti i siti? Idealmente, prima. Fa solo un disegno. Ad esempio, come mostrato nell'immagine qui sotto. Mentre questa è solo un'immagine, una fotografia. Nessun collegamento funziona, quando clicchi non vai da nessuna parte, non viene eseguita alcuna ricerca.
Secondo questa immagine. Dai un'occhiata allo screenshot qui sotto. Potresti pensare che questo sia un insieme di simboli ridicolo e molto complesso. In effetti, non tutto è così difficile, c'è un certo algoritmo.
Ci sono solo circa 150 tag e ognuno di essi è responsabile di un'azione specifica: collegamento, trasferimento, grassetto, colore, titolo e così via. Non è così difficile capirli se c'è un desiderio e non importa il tempo.
Con la conoscenza di questi attributi, quasi ogni compito può essere risolto. Qui ci sono solo modi per raggiungere l'obiettivo, ogni sviluppatore trova il suo.
I creatori esperti vedono immediatamente come ottenere il risultato, mentre altri devono pensare, cercare una risposta negli articoli o nel codice sorgente dei concorrenti. Prendono solo la parte di cui hanno bisogno da un sito di terze parti e modificano da soli. Ciò riduce notevolmente il processo di lavoro.
Più avanti, ti mostrerò un esempio specifico.
Visualizza codice
Quindi, lascia che ti mostri prima come procedere se hai bisogno di imparare l'html di qualcun altro. Poi daremo un'occhiata più da vicino a tutte le altre questioni.
Il modo migliore
Il metodo che descriverò per primo è un po' difficile per i principianti, ma come introduzione andrà bene, continua a leggere. Apri la pagina e clicca con il tasto destro del mouse. Seleziona la voce "Salva con nome..."
Salva l'intera pagina web. Come puoi vedere nello screenshot, ho già scaricato tutto in anticipo. Abbiamo due cartelle qui.
Tutto ciò di cui hai bisogno è qui. Ogni articolo. Se capisci questo, puoi ottenere rapidamente tutto ciò di cui hai bisogno. Ma un tale compito sta diventando sempre più impossibile. Il download non è in corso. Cosa fare se è vietato copiare la pagina?
Questo è Google Chrome
Come avrai già notato, io uso più spesso Google Chrome e trovare il codice di qualcun altro in questo browser è facile come sgusciare le pere. Come in linea di principio, e in qualsiasi altro. Lo schema non sarà solo simile, ma identico. Apriamo la pagina, di cui vogliamo conoscere il codice, e clicchiamo ovunque con il tasto destro del mouse. Nella finestra che appare, fai clic su "Visualizza codice pagina".
Un foglio di codice si aprirà in una nuova finestra, che è abbastanza difficile da capire per un principiante. Ma non allarmarti prima del tempo.
Se hai bisogno di conoscere il codice di un solo elemento, passaci sopra con il mouse e fai clic con il pulsante destro del mouse. Selezioniamo un'altra funzione di chrome: "Visualizza il codice dell'elemento".
Ad esempio, potrei essere interessato a come viene realizzato il logo, utilizzando un'immagine o un linguaggio di programmazione? Dopotutto, puoi disegnare un quadrato usando css. Molti esperti consigliano di codificare quante più informazioni possibili. Come funzionano sui siti popolari?
Quindi sono apparse le informazioni necessarie. HTML in alto, CSS in basso. Queste sono due lingue. Il primo è responsabile della componente di testo e il secondo del design. Se non ci fosse css, dovresti prescrivere il colore e la dimensione del carattere ogni volta. Per ogni pagina, è un tempo molto lungo. Ma se non ci fosse l'html, allora non avremmo i testi. Spiegato grossolanamente, ma in generale è tutto così.
A proposito, se sei interessato a come funziona qui, puoi vedere il link all'immagine qui sotto. Ecco la tua risposta.
Mozilla Firefox
Se ti piace lavorare in manicotto, allora tutto sarà esattamente lo stesso. Apri la pagina e clicca con il tasto destro del mouse. "Codice sorgente della pagina" se vuoi vedere l'intero codice nella sua interezza.
Quando passi con il mouse su un elemento, diventa possibile aprirne il codice.
Qui, i dati vengono visualizzati nella parte inferiore dello schermo, ma per il resto tutto è esattamente lo stesso.
browser Yandex
Nel browser Yandex, tutto è esattamente lo stesso delle due versioni precedenti, apri la pagina, fai clic con il pulsante destro del mouse, vedi il codice della pagina.
Passa il cursore su un elemento se vogliamo scoprire esattamente il suo codice.
Tutto viene visualizzato qui allo stesso modo di Chrome.
musica lirica
E infine, Opera.
A proposito, potresti aver notato che non è necessario usare un mouse. C'è una scorciatoia da tastiera rapida per aprire il codice, ed è la stessa per tutti i browser: CTRL + U.
Per gli elementi: Ctrl + Maiusc + C.
Ecco come appare il risultato.
Sarà interessante per i principianti
Ora guarda come funziona tutto. Trovi un sito e ti piace molto qualche elemento. Ad esempio, questo. Sai già come aprire il codice dell'elemento.
Ora copialo.
Io uso, incollo questo codice in un nuovo file html, nel tag body (corpo in inglese).
Ora vediamo come appare tutto nel browser.
Pronto. Affinché il testo sia allineato ai bordi e acquisisca un colore verdastro, è necessario collegare css a questo documento e copiare un altro codice dal sito da cui abbiamo digitato questo.
Ora non lo farò. Ci vuole più tempo, sia mio che tuo. Penso che descriverò tutti i dettagli nelle mie future pubblicazioni. Iscriviti alla newsletter e sii il primo a conoscere l'articolo.
Se non lo sopporti e vuoi saperne di più su html e css in questo momento, posso tradizionalmente consigliarti corsi di formazione gratuiti.
Ecco 33 tutorial per aiutarti a padroneggiare l'html - "Corso HTML gratuito" .
Ed ecco le informazioni complete su css - "Corso CSS gratuito (45 video tutorial!)" .
Adesso ne sai un po' di più. Ti auguro ogni successo nei tuoi sforzi. Fino alla prossima volta!
Abilità cambia il codice sorgente della paginaÈ un'abilità utile per un utente Internet avanzato. Sostituendo il codice HTML, puoi modificare la pagina web aperta come preferisci. In questo articolo ti diremo, come cambiare il codice della pagina in Google Chrome. Tuttavia, in altri browser tutto è fatto allo stesso modo, quindi non dovrebbero esserci difficoltà.
Qual è il codice HTML di una pagina?
Ogni pagina che apri in un browser ha il proprio linguaggio di markup HTML. Questo codice è tag e testo. I tag sono tipi di tag che indicano al browser come visualizzare una parte particolare del sito. Il testo è il contenuto della pagina, ciò che l'utente vede. Inoltre, gli stili CSS possono essere collegati alla pagina, che impostano l'aspetto degli elementi della pagina. Per cambia il codice sorgente del sito Non è necessario conoscere a fondo HTML e CSS e presto lo vedrai da solo.
Perché cambiare una pagina web?
Puoi cambiare i dati sul sito, cambiare il testo del messaggio, fare uno screenshot falso. Tieni presente che tutte le modifiche sono visibili solo a te e quando ricarichi la pagina, scompariranno. Anche i dati modificati non saranno reali. Ad esempio, se non ho 10 dollari e cambio a 100, non avrò più soldi. Questa è solo la visualizzazione della pagina da parte del browser. Esempio:
Dopo:
Ad esempio, prenderò lo stesso sito e modificherò il precedente annuncio dell'articolo “” Apertura della home page in Google Chrome. Fare clic con il tasto destro sull'elemento che voglio modificare, ad esempio il titolo dell'annuncio e selezionare "Visualizza codice".
Nella finestra che si apre, vai alla scheda Elementi e vedi il codice HTML della pagina. In esso è necessario trovare il testo di nostro interesse. (sottolineato in rosso)
Ora eliminerò il vecchio testo e inserirò quello nuovo.
Questo è tutto, il titolo dell'annuncio è stato cambiato. Ora cambierò l'annuncio stesso, i tag e l'intestazione.
Puoi inserire un'altra immagine modificando l'attributo src nel tag img.
Quindi, oggi esamineremo diversi strumenti utili per un Web master che semplificano la vita per il layout del sito Web. Iniziamo con la console del webmaster in Google Chrome. E passiamo alle domande che più spesso sorgono dal web-master durante l'impaginazione del sito.
Per accedere alla console, apri il tuo sito in Google Chrome, fai clic destro in un punto qualsiasi della pagina Web e seleziona Visualizza codice pagina dal menu a tendina contestuale, oppure su un elemento specifico per la ricerca selezionando Visualizza codice elemento " .
Nella parte superiore, avrai diverse schede elencate. Oggi parleremo della scheda "Elementi" , che presenta gli elementi di una pagina web con l'evidenziazione di tag, proprietà, l'evidenziazione dell'annidamento degli elementi, la rappresentazione della gerarchia di un elemento nell'albero del DOM (suggerimento in fondo, dal genitore radice a quello attualmente esplorato), la possibilità di modificare gli elementi, un elenco delle loro proprietà, considerare la ricerca per elementi e familiarizzare con la visualizzazione degli stili CSS associati agli elementi, ecc.
Come posso vedere tutti gli stili associati a un elemento specifico? Quale viene applicato ora? In quali file si trovano?
Quindi, niente potrebbe essere più facile! Apriamo il browser Google Chrome, apriamo il nostro sito - la fonte delle domande, facciamo clic con il pulsante destro del mouse sull'elemento desiderato, se è visibile nel contesto della pagina e selezioniamo "Visualizza codice elemento" dal menu di scelta rapida.
In basso, abbiamo una console con una scheda evidenziata a sinistra "Elementi" e tutti gli stili associati all'elemento a destra, dove: Stili calcolati- questi sono stili generali di "riassunto" che sono stati assegnati a un elemento dalle regole css e dalle impostazioni del browser dell'utente (il suo ambiente) e la scheda è compressa.
Ma siamo interessati alla scheda "Stili", espansa sotto di essa, in cui sono elencati uno per uno tutti gli stili assegnati a un elemento, nonché i file in cui queste regole sono indicate per questo elemento per tipo, id, classe, nome, proprietà, attributo, ecc... Allo stesso tempo, se la regola css è barrata, è stata ridefinita prima / dopo (il che rende facile tenere traccia di quale delle regole css ha la priorità e viene applicata in questo caso all'elemento).
Sotto la console c'è una riga che mostra un elemento nella gerarchia del documento, consente facilmente di visualizzare l'intero elenco di elementi padre dalla radice all'elemento selezionato. Qualcosa come le briciole di pane.
Tag HTML non visibile nel contesto della pagina? O hai bisogno di trovare tutti i tag, ad esempio, per una certa classe, nome, proprietà, tipo?
Apri il sito in Google Chrome, fai clic con il pulsante destro del mouse, apri il menu di scelta rapida, seleziona « Visualizza il codice della pagina » ... Premi contemporaneamente la combinazione di tasti "CTRL + F", inserisci la frase di cui abbiamo bisogno ( Per esempio: classe = "imbottitura") e navigare nell'elenco dei risultati trovati, lungo il percorso cercando tutti gli stili associati agli elementi desiderati sul lato destro della pagina.
Come visualizzare il codice html degli elementi caricati dinamicamente (ad esempio: da Ajax)
Stiamo aspettando il caricamento della pagina in Google Chrome. Eseguiamo le azioni necessarie affinché l'Ajax funzioni. Fare clic con il tasto destro del mouse sui dati caricati, selezionare "Visualizza codice elemento" dal menu contestuale, esaminare il risultato nella console nella scheda "Elementi" a sinistra.
Visualizza le modifiche negli stili CSS in tempo reale
A proposito, è anche conveniente osservare, se necessario, quali stili sono assegnati a un elemento al volo, ad esempio, quando si scorre la galleria e altri eventi in base al timer. Tutti gli stili assegnati da JavaScript in tempo reale verranno visualizzati nella proprietà stile l'elemento selezionato nella finestra nella scheda "Elementi".
Anteprima dal vivo dell'effetto delle regole CSS sulla presentazione dei tag html
Google Chrome fornisce una console interattiva per gli stili CSS. E questo significa che puoi non solo visualizzare quali stili sono applicati all'elemento, ma anche spostare il cursore del mouse sul css specificato dalle proprietà, abilitarlo utilizzando il segno di spunta a comparsa a destra o disabilitarlo deselezionando il flag e visualizzare il risultato risultante sulla pagina.
Modifica al volo della struttura di presentazione degli elementi html (direttamente nel browser)
Quindi, abbiamo già imparato come esplorare la struttura di un documento Web in Google Chrome, ora esamineremo brevemente gli elementi di modifica al volo. Andiamo alla console in qualsiasi modo conveniente per noi. Troviamo l'elemento richiesto nella scheda "Elementi", fai clic con il pulsante destro del mouse su di esso, chiamando così il menu di scelta rapida a comparsa:
- Aggiungi attributo- aggiunge un attributo per l'elemento specificato. Non appena il cursore diventa attivo, iniziamo a impostare la proprietà desiderata. Per esempio: scriviamo name = ”itemImage”, che verrà immediatamente aggiunto al nostro articolo.
- Modifica attributo- se fai clic con il pulsante destro del mouse su un attributo di un elemento, l'articolo diventa disponibile modificareattributo... Fare clic, modificare.
Esempio di utilizzo: abbiamo dimenticato la password salvata sotto gli asterischi in Google Chrome (se la password è stata salvata in questo browser). Fare clic con il tasto destro del mouse sull'articolo con una password, fare clic su "Visualizza codice articolo" , nella console a sinistra nella scheda Elementi fare clic sul tipo di attributo = "password" con il tasto destro del mouse, fare clic con il tasto sinistro su Modificareattributo, cambiando l'attributo tipo = "parola d'ordine " Su tipo = "testo ", e ora, invece degli asterischi, viene visualizzata la stessa password sotto forma di testo.
- Modificarehtml- fare clic con il tasto destro su un elemento nella console Elementi, scegliere Modificarehtml, cambia il codice a tuo piacimento.
- copiacomeHTML- copiare la porzione HTML di cui abbiamo bisogno per ulteriori ricerche, ad esempio in un blocco note, o per altri scopi in cui dobbiamo applicare esattamente lo stesso layout. Risparmiamo tempo.
- copiaXPATH- copia la rappresentazione XPATH della struttura dalla radice dell'elemento genitore all'elemento selezionato.
- Eliminanodo- se è necessario rimuovere l'elemento attualmente selezionato e tutti i suoi figli dal contesto della pagina Web e vedere il risultato.
- Parolaavvolgere- renderà la visualizzazione della pagina web nel contesto della console Elementi più leggibile.
Nei prossimi articoli continueremo la nostra considerazione sugli strumenti per il webmaster e, in particolare, faremo conoscenza con il resto delle schede degli strumenti per il webmaster in Google Chrome, e considera anche il debug di errori javascript utilizzando browser diversi
