34

In Internet Explorer I can open a local .html file and edit it by selecting "Source" in the "View" menu," make a quick change, and then "Refresh" (reload) the web page.

How can I do that with Google Chrome?

Can I have the .html file open in Windows Notepad? (I like notepad because it's really fast.)

27

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.

13
  • 1
    try clicking exactly on the tag name for instance <body> Sep 26 '10 at 12:10
  • 1
    that helps.. I see I can it makes a difference whether I right click the tag or within them.. But once I left click outside them, the pages changes, then I refresh the page, and changes are gone. How do I save? And how would I add another tag/element? like add <p>sdf</p> to the html?
    – barlop
    Sep 26 '10 at 13:10
  • 1
    This is debugging tool. It is not editing tool. For creating pages use something like Aptana, Netbeans or other more suitable IDE. With tag completion, reference, javascript completion etc. . This is much more productive way to create web pages. If you insisting on using Chrome Developer Tools as your html editor there is copy as html context menu option. So you can paste it back to your main text editor of choice or other tool. Sep 26 '10 at 13:50
  • 3
    it's a little faster using F2 to edit and Ctrl+Enter to commit
    – Benjamin
    Jun 27 '13 at 8:10
  • 2
    F2 and F2 again does the same job as Ctrl+Enter. Feb 26 '16 at 8:32
24
  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 :)

5
  • 4
    not really what I want, but that is a very amusing feature!
    – barlop
    Sep 29 '10 at 15:50
  • Am I right that this is on by default in current Chrome versions? I mean, I already can edit in the Elements tab.
    – Alex
    May 24 '13 at 7:21
  • I just gave you +100 using this feature.
    – Benjamin
    Jun 27 '13 at 8:13
  • Really amazing feature
    – iroel
    Jul 19 '13 at 23:37
  • @Benjamin Are you serious about the +100 (i.e. did you give him extra votes in your local copy obviously not going to have an effect on the site itself but still), that would be interesting.. How did you do that? or were you making a very bad and misleading joke?
    – barlop
    Feb 5 '16 at 16:59
1

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

1

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'
1
  • This is the correct way to develop in browser May 31 '16 at 9:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.