CODEWITHSUNDEEP
javascriptgoogle-chrome
Royi Namir
Royi Namir

Reputation: 148524

How to Edit Source Files Directly in Chrome ?( and keep it after refresh)

After reading this article which suppose to help with my question ( but didn't) - I still have a question .

Ok . My goal is to be able to edit downloaded scripts and keep the edit ! ( for next refresh).

Now i'm aware that it might wont work if a new timestamp is added to the file. but within my testing - the url is the exact name.

Say jQuery.com :

It downloads a script name main.js :

enter image description here

I click to edit it in the right pane , :

enter image description here

Then I save it ( notice the pink background).

I also save it in the desktop ( so it will be saved to a file system , as the article states)

But : when I refresh the page ( f5 , not ctrlf5) - I get a fresh copy without my modifications :

enter image description here

Question

What am I doing wrong ? and how can I make my modifications to stay even after refresh ?

(and besides if it shows the pink background-color as a saved , file .... saved where ? why the changes are not saved ")

nb : chrome ver 35.0.1916.153 m

Upvotes: 7

Views: 4067

Answers (4)

vorillaz
vorillaz

Reputation: 6266

I have achieved a quite similar work flow using this tutorial

You can also use Chrome's extension for autosave

More detailed instructions can be found here: http://github.com/NV/chrome-devtools-autosave

Note that you can edit your own files only, and that a server like setup is required

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try, at console at jquery.api.com . Edit, or compose new pieces at textarea, click refresh to re-load original document , with edited, or newly composed pieces included.

i.e.g., alert(1) or click event, other pieces, composed at textarea, for re-loaded or "refreshed" document.

(function refresh() {
return $.get($("script").filter(function () {
        return (/main/.test(this.src) ? true : false);
    }).attr("src") || "http://api.jquery.com/jquery-wp-" 
    + "content/themes/jquery/js/main.js")
    .done(function (data) {
    $("<textarea id=edit class=edit style=width:480px;>")
    .val(data).appendTo("body");
    $("<input class=edit type=button value=refresh>")
    .appendTo("body");
    $("#edit").focus();
    })
    .always(function (data, textStatus, jqxhr) {
        $("input.edit").on("click", function (e) {
            var edit = $("textarea.edit").val();
            return $.get("", function (data) {
                    console.log(data);
                    var refresh = document.open("text/html", "replace");
                    refresh.write(data);
                    refresh.close();
                    $("html").find("script").filter(function () {
                        return (/main/.test(this.src) ? true : false);
                    }).remove();
                    $("<script type=text/javascript class=edit>")
                    .text(edit).prependTo("head");                
            });
        });
});
}())

Upvotes: 0

AdityaK
AdityaK

Reputation: 661

You are not doing anything wrong, as per my understanding. I just want you to make sure that after you make changes in js file, and saving it, go to the directory where the JS file is placed. Open in some other text editor, say notepad or any other, and confirm if your changes are really saved. Because when you hit refresh in browser, the served js file is picked. There is no browser issue and also there ain't any process issue. I just doubt that changes made from browser are really getting reflected in file or not. Please confirm once and also share across your observations.

Upvotes: -1

Paul B
Paul B

Reputation: 198

I think the critical point here is that the site you're editing needs to be served locally. Unless you're actually serving api.jquery.com from your own computer, your saved changes will be lost when you refresh.

You should save the files you're working on to your computer and open them in Chrome. Then follow the article's directions. When you right-click 'Save As', save it to the same place on disk that the file is being served from.

Upvotes: 6

Related Questions