34
13
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.)
barlop
Posted 2010-09-26T11:23:50.927
Reputation: 18 677
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.
Casual Coder
Posted 2010-09-26T11:23:50.927
Reputation: 3 614
23
now you can edit text on the page and move images but it is not that you really want :)
loislo
Posted 2010-09-26T11:23:50.927
Reputation: 331
@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 – 2016-02-05T16:59:17.970
4not really what I want, but that is a very amusing feature! – barlop – 2010-09-29T15:50:16.873
Am I right that this is on by default in current Chrome versions? I mean, I already can edit in the Elements tab. – Alex – 2013-05-24T07:21:37.007
I just gave you +100 using this feature. – Benjamin – 2013-06-27T08:13:47.913
Really amazing feature – iroel – 2013-07-19T23:37:07.163
1
You can try this InlineEditor to edit and save static html in browser pages here is the demo
MKK
Posted 2010-09-26T11:23:50.927
Reputation: 111
1
If you want to edit the file as html source (and not individual elements) you can do the following:
Paul Troon
Posted 2010-09-26T11:23:50.927
Reputation: 11
This is the correct way to develop in browser – sidonaldson – 2016-05-31T09:43:30.067
To casualcoder and @Benjamin Even when I do ctrl-ENTER, I notice that if I reload the page the change isn't saved. And i'm talking about for a local page , so there should be a way to save though I don't see it – barlop – 2015-03-26T10:53:39.283
1F2 and F2 again does the same job as Ctrl+Enter. – Frank Nocke – 2016-02-26T08:32:46.683
sometimes I right click and it says edit html, sometimes edit as text. sometimes it refreshes automatically, sometimes it doesn't – barlop – 2010-09-26T11:54:48.430
1try clicking exactly on the tag name for instance
<body>– Casual Coder – 2010-09-26T12:10:57.663that 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 – 2010-09-26T13:10:54.923
1This 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 htmlcontext menu option. So you can paste it back to your main text editor of choice or other tool. – Casual Coder – 2010-09-26T13:50:35.580I don't insist on using chrome debugging tools. It was just your idea, and may not such a good solution to this. Cheers for the IDE tips though and the note on what that chrome developer tool is for. Suppose my IDE is whatever it is. And i've got an html file I wrote locally. How can I from chrome, get that file opened up in my IDE? I guess that's something there should be a plugin for. Though I don't know of one – barlop – 2010-09-26T14:34:47.223
With IDE (for instance http://aptana.com/) it is actually the other way around. What I mean is, that from IDE you specify which browser displays your code. On top of that IDE usually is starting its own local development web server. Not getting to much into details, the whole workflow of creating web pages is smoothen.
– Casual Coder – 2010-09-26T15:03:09.530I'll give you an example of where what i'm wanting to do is more efficient. Suppose I don't need an IDE. The HTML file is so small and so simple, that I can edit it in notepad as easily as an IDE can. I don't need to go through the process of opening notepad and specifying or browsing to the file. That'd just be done with one or two clicks. And the file is open in notepad. I only need one or two changes, that I can do very efficiently in just notepad, for reasons mentioned. And I don't even need notepad to remain open, cluttering my taskbar. I can close it. refresh, not even a new tab needed – barlop – 2010-09-26T15:52:17.137
It's not for what one might call "web development". No big project, no flashy stuff. It's quickly changing an HTML file that I am viewing locally in my browser. That is a very efficient way of doing it. Internet Explorer has been able to do it for ages(perhaps even since its birth).. I would like it if chrome could. – barlop – 2010-09-26T15:54:18.660
1Closest to what you are talking about that I am aware of, is Firebug addon in Firefox. Among many various javascript/css/dom debugging tools it gives you in context menu on a page
Open with Editoroption. You can add several editors. Of course you can configure it to use Notepad. – Casual Coder – 2010-09-27T10:50:29.873I see that right clicking the <HTML/ tag and clicking edit – barlop – 2013-05-25T07:37:31.173
2it's a little faster using F2 to edit and Ctrl+Enter to commit – Benjamin – 2013-06-27T08:10:45.573