Google Chrome: How to edit JavaScript / CSS files and preview changes without reloading?

Question

I want to make changes through the sources tab in Inspect Elements and want to see a preview quickly without refreshing the browser.

Is there a way to do this?

For example, in JavaScript I have a variable:

var abc = 'xyz';

But through the Sources tab, I got to my script file and changed the code:

var abc = 'hello world';

Now if I try alert(abc) then, will it show latest changes? I don't want to refresh to see this change.

Is there any kind of possibility or plugin that can do this? Because sometimes this is very time saving. For example, each time I test I have to do a lot of steps to see some value or response. So for making a minor change I have to change it in the original file and refresh again to see it and this way I always have to go through the complete process that wastes a lot of time.

Answer 1

You can use Chrome's Developer Tools (press F12 or Ctrl+Shift+I) to debug and manipulate JavaScript code at runtime. You can then set breakpoints in your code, examine objects, play with values, call functions from the Console and more. All without having to actually change your physical source files or reloading the window.

Update following OP's comment below:

Here's a quick-and-dirty example of creating a new function on the fly and then calling it in the console. The first line adds the function (adding the function itself does not return anything meaningful so you get an "undefined" result). Next I call this new function which as expected pops up an alert window (not shown in the screenshot) and returns the value 17.

You can do the same and return values calculated from your actual page in its current state. If you placed a breakpoint in your code you can use the console to examine objects and values or perform changes to them at runtime. BTW, this also applies to the DOM, so you can manipulate the HTML as well through the console.