Editing in the Chrome debugger

Editing in the Chrome debugger

How do I “dynamically” edit JavaScript code in the Chrome debugger? It’s not for me, so I don’t have access to the source file. I want to edit code and see what effects they have on the page, in this case stopping an animation from queuing up a bunch of times.

Solutions/Answers:

Solution 1:

You can use the built-in JavaScript debugger in Chrome Developer Tools under the “Scripts” tab (in later versions it’s the “Sources” tab), but changes you apply to the code are expressed only at the time when execution passes through them. That means changes to the code that is not running after the page loads will not have an effect. Unlike e.g. changes to the code residing in the mouseover handlers, which you can test on the fly.

There is a video from Google I/O 2010 event introducing other capabilities of Chrome Developer Tools.

Solution 2:

I came across this today, when I was playing around with someone else’s website.

Related:  In Angular 2 how to check whether is empty?

I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.

So as a quick work around, and if it works with your situation:

  1. Add a break-point at an earlier point in the script
  2. Reload page
  3. Edit your changes into the code
  4. CTRL + s (save changes)
  5. Unpause the debugger

Solution 3:

This is what you are looking for:

1.- Navigate to the Source tab and open the javascript file

2.- Edit the file, right-click it and a menu will appear: click Save and save it locally.

In order to view the diff or revert your changes, right-click and select the option Local Modifications… from the menu. You will see your changes diff with respect to the original file if you expand the timestamp shown.

Related:  Moment js date time comparison

More detailed info here: http://www.sitepoint.com/edit-source-files-in-chrome/

Solution 4:

Pretty easy, go to the ‘scripts’ tab. And select the source file you want and double-click any line to edit it.

Solution 5:

As this is quite popular question that deals with live-editing of JS, I want to point out another useful option. As described by svjacob in his answer:

I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.

The above solution didn’t work for me for quite large JS (webpack bundle – 3.21MB minified version, 130k lines of code in prettified version) – chrome crashed and asked for page reloading which reverted any saved changes. The way to go in this case was Fiddler where you can set AutoRespond option to replace any remote resource with any local file from your computer – see this SO question for details.

Related:  Differences between Isotope and Masonry jQuery plugins [closed]

In my case I also had to add CORS headers to fiddler to successfully mock response.

Solution 6:

Now google chrome has introduce new feature. By Using this feature You can edit you code in chrome browse. (Permanent change on code location)

For that Press F12 –> Source Tab — (right side) –> File System – in that please select your location of code. and then chrome browser will ask you permission and after that code will be sink with green color. and you can modify your code and it will also reflect on you code location (It means it will Permanent change)

Thanks