8

I know how to use JavaScript on Google Chrome's console.

But is it possible to edit JavaScript files from within Google Chrome's developer tools and see the changes immediately? If so, how?

I have tried changing the code, but it has no effect on the page.

GangstaGraham
  • 8,865
  • 12
  • 42
  • 60
  • 2
    Funny... this has always worked for me but is not working now for some reason. You shuold just edit the code and hit ctrl+s http://jsfiddle.net/XpU6R/2/ You may need to click the pretty print button twice for chrome to allow you to edit it – Ruan Mendes Feb 25 '13 at 06:12
  • Recently Chrome 25 came out, maybe they made some changes? It's not that I can't change the code it's more of it does not have a direct effect on the page which would ideal (like Chrome already does with editing CSS) – GangstaGraham Feb 25 '13 at 06:23
  • Consider also [Workspaces](https://stackoverflow.com/questions/29232701/unable-to-live-edit-javascript-in-chrome-developer-tools) feature of recent versions of Chrome. – Vadzim May 30 '17 at 13:17

2 Answers2

13

You can edit javascript of the page. You had to make a double click in the old version of chrome or in the recent version you need to make a single click in js file. After that you need to press Ctrl+S or Cmd+S on Mac. Then DevTools will send the changed code to V8.

If you are in a debug session and stay on a pause in a function you can edit it and after Ctrl+S v8 will move the execution point out from the edited function so you will be able to pass it again.

loislo
  • 14,025
  • 1
  • 28
  • 24
  • 1
    But what if the Javascript function only loads once when the page loads? – GangstaGraham Feb 26 '13 at 19:34
  • there are "Save" and "Save as..." items in the context menu. – loislo Feb 26 '13 at 20:12
  • While this still does not answer the question fully, I'll give you a checkmark, although I am surprised Chrome and other browsers do not have this ability. – GangstaGraham Mar 07 '13 at 01:10
  • It is not clear for me what part of the question left unanswered. – loislo Mar 07 '13 at 07:31
  • 3
    Changes to scripts are only executed at evaluation time, meaning that modifications to code that is not running after the page loads will not have an effect. Changes to code executed at a later stage, such as mouseover handlers or click-event callbacks can however be changed and tested on the fly. https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#scripts – Alejandro García Iglesias Jan 07 '14 at 21:37
1

You could redefine a global function or change the value of a variable in scope, but I'm not aware of any way in the Chrome Dev Tools to edit your code while live. I edit, then hit refresh.

You can live edit CSS in the Sources tab.

jfriend00
  • 683,504
  • 96
  • 985
  • 979