I tried for a long time, to map the network resource (.js file) with local resource (local .js file) using workspace mapping, but this didn’t work…

I’ve used this method with apps hosted on localhost, but then too it used to be mapping of entire root directory and not individual files…

Anyways, looks like this is allowed only for files coming from localhost…

Here are some other ways that I haven’t tried yet:

The Resource Override extension allows you to do exactly that:

  • create a file rule for the url you want to replace
  • edit the js/css/etc in the extension
  • reload as often as you want 🙂

ref: http://stackoverflow.com/questions/16494237/chrome-dev-tools-modify-javascript-and-reload


If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.


It has some limitations:

  1. has to be a JS file. can’t be embeded tags in a html page.
  2. it cannot be prettified.
  3. If after following the above guideline and the changes in the Sources tab just don’t take effect, try right-clicking on the edited file in the tree-view on the left and select “Save”. A dialog may appear asking you to save a local file, but you can just cancel. Only at that point Chrome’s edit history finally shows that the edit has stuck.

CHANGE THE ENTIRE FUNCTION IN CONSOLE

I don’t know if you need this to save permanently, but if you need to just temporarily modify the js:

I can copy that javascript I want to modify into a text editor, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.

for instance, if the page has:


var foo = function() { console.log("Hi"); }

I can take the content between the script, edit it, then enter it into the debugger like:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

and it will work for me.

Or if you have like,

function foo() {
    doAThing();
}

You can just enter

function foo() {
    doSomethingElse();
}

and foo will be redefined.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s