Edit HTML from Google Chrome

Question

How can I edit and reflect the changes that I have made in the HTML on Chrome dev tools (press f12 on chrome)?

In source tab we can edit the page but when I click on the save button it does not reflect the changes on the original file.

Is there any way to save these changes?

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Ribbon</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="container">
        <div class="menu">
            <ul>
                <li class="l1">
                    <a href="#">CSS3</a>
                </li>
                <li class="l2">
                    <a href="#">is really</a>
                </li>
                <li class="l3">
                    <a href="#">powerful</a>
                </li>
            </ul>
        </div>

        <div class="bubble">
            <div class="rectangle">
                <h2>3D CSS.................................................................... ...................klklklklk Ribbon</h2>
            </div>
            <div class="triangle-l"></div>
            <div class="triangle-r"></div>
            <div class="info">
                <h2>I Have Used Only CSS, friends!</h2>
                <p>For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it&#39;s really fantastic.<br />
                It doesn&#39;t work with IE!</p>
                <p><a href="http://www.pvmgarage.com/en/2010/01/10/">Go to the tutorial!</a></p>
            </div>
        </div>
    </div>
</body>
</html>

possible duplicate of [How to save CSS changes of Styles panel of Chrome Developer Tools?](http://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools) — Colin Pickard, Apr 26 '13 at 10:13
There is no need of HTML code here for what you are asking ;) — Sachin Jain, Apr 26 '13 at 10:18
@blunderboy u better give me the solution and FYI the forum was not acception the post thats y i hav put the code ..... — Mayur Gupta, Apr 27 '13 at 09:29
@MayurGupta Thats okay. I just said because it makes your question look bigger..What you want to ask could have been asked in 2-3 lines. — Sachin Jain, Apr 27 '13 at 09:45

score 4 · Accepted Answer · answered Apr 27 '13 at 09:58

The answer is No, You can not save files back on webserver.. It just saves files locally.

Some Points:-

You can do some local modifications like Changing some Styles of some elements, Updating some JavaScript in source tab, Updating some HTML in Elements tab. But these changes will get lost once you reload the page.
If you own the site, you can always copy the final files from dev tools and update your files on web server.

You can always think of the reason why browsers can't do it for you. I shouldn't say it would be a security flaw. Infact it would be security less. This just mean you can update any site which does not belong to you.

I hope you get it.

Ho1 · Answer 2 · 2016-03-22T22:57:52.340

0

It seems that the above message is outdated and actually wrong. Source code editing in Google Chrome is possible and recommended.

http://www.hongkiat.com/blog/google-chrome-workspace/

It's been a while since this is possible. This is from 2013:

http://www.sitepoint.com/edit-source-files-in-chrome/

edited Mar 22 '16 at 22:57

answered Mar 22 '16 at 22:35

Ho1

1,239
1
11
29

score -1 · Answer 3 · answered Apr 26 '13 at 10:20

-1

It cant be changed. You change it temporary, but when you reload it , it is loading from server, with its code, not code you entered. If you find a way to crash a server, then you can save your changes on their files :D

answered Apr 26 '13 at 10:20

Bodo Hombah

209
1
3
9

Edit HTML from Google Chrome

3 Answers3