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.)

google-chrome browser html notepad barlop
fonte

Respostas:

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
  1. abra o DevTools.
  2. abra o painel Elements.
  3. selecione html ou body ou outro elemento que desejar.
  4. console aberto por Esc.
  5. 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:

  1. selecione a guia "Fontes" no lado esquerdo
  2. 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
  3. 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