Edición de código fuente HTML con Google Chrome

34

En Internet Explorer, puedo abrir un archivo .html local y editarlo seleccionando "Fuente" en el menú "Ver", "hacer un cambio rápido y luego" Actualizar "(volver a cargar) la página web.

¿Cómo puedo hacer eso con Google Chrome?

¿Puedo abrir el archivo .html en el Bloc de notas de Windows? (Me gusta el bloc de notas porque es muy rápido).

google-chrome browser html notepad barlop
fuente

Respuestas:

27

Ctrl+Shift+I or F12-> Elementos, debería mostrar su fuente. Haga clic derecho sobre cualquier elemento y haga clicEdit as HTML

Editar:

Hay algunas extensiones que se parecen a lo que quieres: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditorY Live WebSite Editorparece prometedor.

Agregado por barlop
veo que (después de ctrl-shift-I / F12), haciendo clic derecho en la <HTML..> or </HTML>etiqueta y haciendo clic en "editar como html". me permite editar en cualquier lugar dentro de él. Elegir la etiqueta de apertura significa que la ventana emergente para editar solo cubre toda la fuente html que está allí, lo cual es muy ordenado en términos de espacio al editar. Elegir la etiqueta de cierre puede ser útil ya que la ventana emergente aparece debajo del html para que veas un antes / después. O mejor, como dice benjamin, F2 para editar, ctrl-enter para confirmar.

Codificador casual
fuente
1
intente hacer clic exactamente en el nombre de la etiqueta, por ejemplo<body>
Casual Coder
1
Esta es una herramienta de depuración. No es una herramienta de edición. Para crear páginas, use algo como Aptana, Netbeans u otro IDE más adecuado. Con finalización de etiqueta, referencia, finalización de javascript, etc. Esta es una forma mucho más productiva de crear páginas web. Si insiste en usar Chrome Developer Tools como su editor html, hay una copy as htmlopción de menú contextual. Para que pueda volver a pegarlo en el editor de texto principal que elija u otra herramienta.
Codificador casual
1
Lo más cercano a lo que estás hablando, que yo sepa, es el complemento Firebug en Firefox. Entre las diversas herramientas de depuración de javascript / css / dom que le ofrece en el menú contextual en una Open with Editoropción de página . Puedes agregar varios editores. Por supuesto, puede configurarlo para usar el Bloc de notas.
Codificador casual
2
es un poco más rápido usar F2 para editar y Ctrl + Enter para confirmar
Benjamin
1
F2 y F2 nuevamente hacen el mismo trabajo que Ctrl + Enter.
Frank Nocke
23
  1. Abra DevTools.
  2. Abra el panel Elementos.
  3. seleccione html o body u otro elemento que desee.
  4. consola abierta de Esc.
  5. escribir $ 0.contentEditable = true

ahora puede editar texto en la página y mover imágenes, pero no es lo que realmente quiere :)

loislo
fuente
44
No es realmente lo que quiero, ¡pero esa es una característica muy divertida!
barlop
¿Tengo razón en que esto está activado de forma predeterminada en las versiones actuales de Chrome? Quiero decir, ya puedo editar en la pestaña Elementos.
Alex
Acabo de darte +100 usando esta función.
Benjamin
Característica realmente asombrosa
iroel
@Benjamin ¿Está hablando en serio sobre el +100 (es decir, le dio votos adicionales en su copia local, obviamente, no va a tener un efecto en el sitio en sí, pero aún así), eso sería interesante ... ¿Cómo lo hizo? o estabas haciendo una broma muy mala y engañosa?
barlop
1

Puede probar este InlineEditor para editar y guardar html estático en las páginas del navegador aquí está la demostración

MKK
fuente
1

Si desea editar el archivo como fuente html (y no elementos individuales) puede hacer lo siguiente:

  1. seleccione la pestaña 'Fuentes' en el lado izquierdo
  2. haga clic derecho en el panel 'Fuentes' y seleccione 'Agregar carpeta al espacio de trabajo' y agregue la carpeta con el archivo HTML fuente
  3. haga clic con el botón derecho en el archivo html que desea editar y seleccione 'asignar a recurso de red'
Paul Troon
fuente
Esta es la forma correcta de desarrollar en el navegador
sidonaldson