Editing in the Chrome debugger

javascript google-chrome debugging
Tom picture Tom · Feb 21, 2011 · Viewed 316.3k times · Source

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.

Answer

sjacob picture sjacob · Oct 22, 2012

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

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

Related questions

How do you launch the JavaScript debugger in Google Chrome?

When using Google Chrome, I want to debug some JavaScript code. How can I do that?

Read More
JavaScript: Is there a way to get Chrome to break on all errors?

I am looking for an equivalent in Chrome to the "break on all errors" functionality of Firebug. In the Scripts tab, Chrome has a "pause on all exceptions", but this is not quite the same as breaking on all errors. …

Read More
How do I print debug messages in the Google Chrome JavaScript Console?

How do I print debug messages in the Google Chrome JavaScript Console? Please note that the JavaScript Console is not the same as the JavaScript Debugger; they have different syntaxes AFAIK, so the print command in JavaScript Debugger will not …

Read More