14

I have done this a million times, i.e open the javascript file in the "Sources" tab, edit and hit CTRL+S to save it, upon which Chrome would confirm the same with a "Recompilation and Update Succeeded".

But I can no longer do this! There is no confirmation message in the console.

Also, the source window turns reddish indicating failure to do so.

The same script is getting edited from a different system.

I am on Chrome 41.0.2272.101m / WIN8.

The script is not "prettified", just to rule that answer out.!

Neo
  • 150
  • 1
  • 1
  • 6
  • Had the same problem but now I am using livereload. Maybe thats also an option for you too. – newBee Mar 24 '15 at 12:33
  • is livereload a plugin ? – Neo Mar 24 '15 at 12:37
  • partially, yes. You will have a plugin in chrome which will work together with some kind of a server which notifies your browser/plugin about changes. I used Yeoman which will generate you a skeleton for your project and automatically sets up everything you need. However as this is no answer to your original question I will not explain everything in full detail now. You might wanna google it - shouldn't be too hard ;) – newBee Mar 24 '15 at 13:20

3 Answers3

13

Try using workspaces: https://developer.chrome.com/devtools/docs/workspaces

Add the project folder as a workspace in devtools by right-clicking in the left panel in Sources and choosing "Add Folder to Workspace".

Afterwards, select the javascript file from the folder in your workspace. Right-click anywhere within the file to choose "Map to Local Resource" and select the live file that matches the current file in your workspace.

This should allow you to update your JS file and any saved changes will be applied to the current page without refreshing.

micjamking
  • 2,183
  • 1
  • 21
  • 24
  • 2
    Workspaces are definitely the best way to go. Once you have them set up with your local project files, you can do 100% of your work right in devtools if you wanted. I've made whole websites this way without ever needing to leave Chrome. It was great and painless, time-saving, and just cool that it's even possible now. – jaredwilli Mar 05 '16 at 13:10
  • 1
    It does not work, now. I have been trying to edit website JavaScript, but still no affect. – Rahul Bali Jun 03 '16 at 11:05
  • I think this method only allows you to save directly to your file via the console, it does not refresh or live reload the browser – samayo Jul 24 '17 at 15:03
  • @samayo the question wasn't how to enable live reloading, but live editing (which is different). Chrome Developer Tools has no built-in mechanism for live reloading, you'll need to use a third-party tool like [livereload](https://www.npmjs.com/package/livereload) or [browsersync](https://www.npmjs.com/package/browser-sync). However, the above method does work if you need to edit the live JavaScript running on the page through Chrome Developer Tools. – micjamking Jul 24 '17 at 18:43
9

I figured out a nice way to live edit a website's JS WITHOUT having to save anything. It also persists through page reloads, but you have to keep the developer console open:

-Add a breakpoint where you want to insert code.

-Edit this breakpoint and add whatever changes you want to have made.

-Make sure to end the line with "false;" so that the breakpoint never actually triggers (unless you want it to trigger)

Example: if the breakpoint condition is "valueToChange=100; false;", every time the execution goes over this line, 'valueToChange' will be set to 100.

David Stolze
  • 91
  • 1
  • 2
  • What version are you using? – Risinek Nov 02 '16 at 22:46
  • 1
    Oh, this is a brilliant hack to circumvent that the chrome devtools folks shat all over their edit js feature and scoped it to some much narrower problem domain that was easier to implement. Thank you for sharing your ingenuity! Most relivable answer on this page, I think. – ecmanaut Mar 28 '21 at 17:24
  • Perfect! This was so genius of a workaround! Thank you for making my day :D – Agent_Orange Apr 18 '21 at 19:27
0

You can refer following link. It shows step by step instruction. https://www.youtube.com/watch?v=PJDPIsOfFZE One thing I found is that Chrome extension Jet Brain plugin can be configured at option (right click on JB at chrome extension). Make sure the port number matches with Intellij debug port number. If you use JRebel, its port number is different from javascript debugger.

Kyung Hwan Min
  • 357
  • 3
  • 5