Editando código fonte HTML com o Google Chrome

34

No Internet Explorer, posso abrir um arquivo .html local e editá-lo, selecionando "Origem" no menu "Exibir", faça uma alteração rápida e, em seguida, "Atualizar" (recarregar) a página da web.

Como posso fazer isso com o Google Chrome?

Posso abrir o arquivo .html no Windows Notepad? (Eu gosto do bloco de notas porque é muito rápido.)

— barlop
fonte

27

Ctrl+Shift+I or F12-> Elementos, deve mostrar sua fonte. Clique com o botão direito do mouse em qualquer elemento e clique emEdit as HTML

Editar:

Existem algumas extensões que parecem com o que você deseja: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditore Live WebSite Editorpareça promissor.

Adicionado por barlop
, vejo que (após ctrl-shift-I / F12), clique com o botão direito do mouse na <HTML..> or </HTML>tag e clique em "editar como html". permite-me editar qualquer lugar dentro dele. Escolher a tag de abertura significa que o pop-up para edição cobre apenas toda a fonte html existente - o que é muito interessante em termos de espaço durante a edição. Escolher a marca de fechamento pode ser útil, pois o pop-up aparece sob o html para que você veja um antes / depois. Ou melhor, como benjamin diz, F2 para editar, pressione Ctrl e Enter para confirmar.

— Casual Coder
fonte

11

tente clicar exatamente no nome da tag, por exemplo<body>

— Casual Coder

11

Esta é uma ferramenta de depuração. Não é uma ferramenta de edição. Para criar páginas, use algo como Aptana, Netbeans ou outro IDE mais adequado. Com conclusão de tags, referência, conclusão de javascript etc. Essa é uma maneira muito mais produtiva de criar páginas da web. Se você insistir em usar as Ferramentas do desenvolvedor do Chrome como seu editor de html, existe a copy as htmlopção de menu de contexto. Assim, você pode colá-lo de volta ao seu editor de texto principal de sua escolha ou a outra ferramenta.

— Casual Coder,

11

O mais próximo do que você está falando e que eu saiba, é o complemento Firebug no Firefox. Entre muitas ferramentas de depuração javascript / css / dom, ele fornece o menu de contexto em uma Open with Editoropção de página . Você pode adicionar vários editores. Claro que você pode configurá-lo para usar o Bloco de Notas.

— Casual Coder

2

é um pouco mais rápido usando F2 para editar e Ctrl + Enter para cometer

— Benjamin

11

F2 e F2 novamente fazem o mesmo trabalho que Ctrl + Enter.

— 27616 Frank Nocke

23

abra o DevTools.
abra o painel Elements.
selecione html ou body ou outro elemento que desejar.
console aberto por Esc.
write $ 0.contentEditable = true

agora você pode editar o texto na página e mover imagens, mas não é que você realmente queira :)

— Loislo
fonte

4

não é exatamente o que eu quero, mas esse é um recurso muito divertido!

— barlop 29/09/10

Estou certo de que isso está ativado por padrão nas versões atuais do Chrome? Quero dizer, eu já posso editar na guia Elementos.

— Alex #

Acabei de lhe dar +100 usando esse recurso.

— Benjamin

Realmente incrível recurso

— Iroel

@Benjamin Você está falando sério sobre o +100 (ou seja, você deu a ele votos extras em sua cópia local, obviamente, não afetará o site em si, mas ainda assim), isso seria interessante .. Como você fez isso? ou você estava fazendo uma piada muito ruim e enganosa?

— barlop

1

Você pode tentar este InlineEditor para editar e salvar HTML estático nas páginas do navegador. Aqui está a demonstração.

— MKK
fonte

1

Se você deseja editar o arquivo como fonte html (e não elementos individuais), faça o seguinte:

selecione a guia "Fontes" no lado esquerdo
clique com o botão direito do mouse no painel 'Fontes' e selecione 'Adicionar pasta ao espaço de trabalho' e adicione uma pasta com o arquivo HTML de origem
clique com o botão direito do mouse no arquivo html que deseja editar e selecione 'mapear para recurso de rede'

— Paul Troon
fonte

Esta é a maneira correta de desenvolver no navegador

— sidonaldson