CODEWITHSUNDEEP
htmlgoogle-chromegoogle-chrome-devtools
Mayur Gupta
Mayur Gupta

Reputation: 780

Edit HTML from Google Chrome

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>

Upvotes: 3

Views: 11306

Answers (3)

Ho1
Ho1

Reputation: 1289

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/

Upvotes: 0

Sachin Jain
Sachin Jain

Reputation: 21842

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

Some Points:-

  1. 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.
  2. 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.

Upvotes: 4

Bodo Hombah
Bodo Hombah

Reputation: 209

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

Upvotes: -1

Related Questions