How to edit source files directly in Chrome? (And save them after upgrade)

Question

After reading this article , which would suggest helping with my question (but it is not), I still have a question.

Good. My goal is to edit the downloaded scripts and save the editing! (for the next update).

Now I know that this may not work if a new timestamp is added to the file. but in my testing - url is the exact name.

Tell jQuery.com:

Loads the script name main.js :

I will click to change it in the right pane:

Then I save it (note the pink background).

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

But: when I ctrlf5 page ( f5 , not ctrlf5 ) - I get a new copy without changes:

Question

What am I doing wrong? and how can I make changes to my updates, even after the update?

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

nb: chrome ver 35.0.1916.153 m

Answer 1

Try console on jquery.api.com. Edit or create new fragments in textarea , click refresh to reload the original document, with edited or recently collected fragments.

those. alert(1) or click event, other fragments compiled in textarea for a reloaded or updated 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"); }); }); }); }()) 

Answer 2

I think the critical point here is that the site you are editing should be served locally. If you are not actually using api.jquery.com from your computer, your saved changes will be lost during the update.

You must save the files that you are running on your computer and open them in Chrome. Then follow the instructions in the article. When you right-click Save As, save it to the same location on the drive from which the file is sent.

Answer 3

I achieved the same workflow using this tutorial

You can also use the Chrome extension to autosave

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

Please note that you can only edit your own files and that server configuration is required.

Answer 4

You are not doing anything wrong, according to my understanding. I just want you to make sure that after making changes to the js file and saving it, go to the directory in which the JS file is placed. Open in another text editor, say, notepad or any other, and confirm whether your changes are really saved. Because when you click the update in the browser, the js file is selected. There is no problem with the browser as well as problems with the process. I just doubt that the changes made in the browser are really reflected in the file or not. Please confirm once and also share your observations.