Editing HTML source code with Google Chrome

Ctrl+Shift+I or F12 -> Elements, It should show your source. Right click on any element and click Edit as HTML

Edit:

There are some extensions that look like what you want: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditor & Live WebSite Editor look promising.

Added by barlop
I see that (after ctrl-shift-I / F12), right clicking the <HTML..> or </HTML> tag and clicking "edit as html". allows me to edit anywhere within it. Choosing the opening tag means the popup for editing just covers all the html source that's there - which is very neat in terms of space when editing. Choosing the closing tag might be useful as the popup then appears under the html so you see a before/after. Or better, as benjamin says, F2 to edit, ctrl-enter to commit.

1. open DevTools.
2. open Elements panel.
3. select html or body or another element you want.
4. open console by Esc.
5. write $0.contentEditable = true

now you can edit text on the page and move images but it is not that you really want :)

You can try this InlineEditor to edit and save static html in browser pages here is the demo

If you want to edit the file as html source (and not individual elements) you can do the following:

1. select 'Sources' tab on the left side
2. right click in the 'Sources' pane and select 'Add folder to workspace' and add folder with source HTML file
3. right click the html file you want to edit and select 'map to network resource'