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

— barlop
fuente

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

Abra DevTools.
Abra el panel Elementos.
seleccione html o body u otro elemento que desee.
consola abierta de Esc.
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:

seleccione la pestaña 'Fuentes' en el lado izquierdo
haga clic derecho en el panel 'Fuentes' y seleccione 'Agregar carpeta al espacio de trabajo' y agregue la carpeta con el archivo HTML fuente
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