Modifica del codice sorgente HTML con Google Chrome

34

In Internet Explorer posso aprire un file .html locale e modificarlo selezionando "Origine" nel menu "Visualizza", "Apporta una modifica rapida, quindi" Aggiorna "(ricarica) la pagina Web.

Come posso farlo con Google Chrome?

Posso avere il file .html aperto nel Blocco note di Windows? (Mi piace il blocco note perché è davvero veloce.)

— barlop
fonte

27

Ctrl+Shift+I or F12-> Elementi, dovrebbe mostrare la tua fonte. Fare clic con il tasto destro su qualsiasi elemento e fare clicEdit as HTML

Modificare:

Esistono alcune estensioni che assomigliano a ciò che desideri: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditore Live WebSite Editorsembra promettente.

Aggiunto da barlop
vedo che (dopo ctrl-shift-I / F12), facendo clic con il tasto destro del mouse sul <HTML..> or </HTML>tag e facendo clic su "modifica come html". mi permette di modificarlo ovunque al suo interno. Scegliere il tag di apertura significa che il popup per la modifica copre solo tutta la fonte html che c'è - il che è molto pulito in termini di spazio durante la modifica. La scelta del tag di chiusura potrebbe essere utile in quanto il popup appare sotto l'html in modo da vedere un prima / un dopo. O meglio, come dice Benjamin, F2 da modificare, ctrl-invio per eseguire il commit.

— Coder casuale
fonte

1

prova a fare clic esattamente sul nome del tag, ad esempio<body>

— Casual Coder

1

Questo è uno strumento di debug. Non è uno strumento di modifica. Per creare pagine usa qualcosa come Aptana, Netbeans o altri IDE più adatti. Con completamento tag, riferimento, completamento javascript ecc. Questo è un modo molto più produttivo per creare pagine Web. Se insisti nell'utilizzare Chrome Developer Tools come editor html, c'è copy as htmlun'opzione del menu contestuale. Quindi puoi incollarlo nel tuo editor di testo principale preferito o in altro strumento.

— Casual Coder,

1

Più vicino a ciò di cui stai parlando di cui sono a conoscenza, è il componente aggiuntivo Firebug in Firefox. Tra i vari strumenti di debug javascript / css / dom ti dà nel menu contestuale su Open with Editorun'opzione di pagina . Puoi aggiungere diversi editor. Ovviamente puoi configurarlo per usare Blocco note.

— Casual Coder

2

è un po 'più veloce usando F2 per modificare e Ctrl + Invio per eseguire il commit

— Benjamin

1

F2 e F2 eseguono nuovamente lo stesso lavoro di Ctrl + Invio.

— Frank Nocke,

23

apri DevTools.
apri il pannello Elementi.
seleziona HTML o body o un altro elemento che desideri.
console aperta di Esc.
scrivi $ 0.contentEditable = true

ora puoi modificare il testo sulla pagina e spostare le immagini ma non è che tu voglia davvero :)

— loislo
fonte

4

non proprio quello che voglio, ma questa è una caratteristica molto divertente!

— barlop,

Ho ragione che questo è attivo di default nelle attuali versioni di Chrome? Voglio dire, posso già modificarlo nella scheda Elementi.

— Alex,

Ti ho appena dato +100 usando questa funzione.

— Benjamin,

— Funzionalità

@Benjamin Sei serio sul +100 (cioè gli hai dato voti extra nella tua copia locale ovviamente non avrebbe avuto un effetto sul sito stesso ma comunque), sarebbe interessante .. Come hai fatto? o stavi facendo una battuta molto brutta e fuorviante?

— barlop

1

Puoi provare questo InlineEditor per modificare e salvare HTML statico nelle pagine del browser qui è la demo

— MKK
fonte

1

Se vuoi modificare il file come sorgente html (e non singoli elementi) puoi fare quanto segue:

seleziona la scheda "Sorgenti" sul lato sinistro
fare clic con il tasto destro nel riquadro "Sorgenti" e selezionare "Aggiungi cartella allo spazio di lavoro" e aggiungere la cartella con il file HTML di origine
fai clic con il pulsante destro del mouse sul file html che desideri modificare e seleziona "mappa su risorsa di rete"

— Paul Troon
fonte

Questo è il modo corretto di svilupparsi nel browser

— sidonaldson