'change to this file were not saved to file system error in google chrome version 30.0.1599.101 m

Image Notification

In the google chrome version 30.0.1599.101 m i am not able to save the changed js file. On saving the js file i got yellow triangle symbol with "change to this file were not saved to file system" message. I know this used to work in older version

I am using windows-7 64 bit



Solution 1:[1]

Click on the cog in the developer tools window (lower right corner)

Go to workspace and add the directory which you would be working on.

This is to accidentally prevent you from modifying files that you did not intend on changing.

Solution 2:[2]

Happened to me too. After picking the workspace directory, I also mapped the file from the "Source" panel of Devtools to its filesystem equivalent (using right-click on the file, from the file tree). It solved my problem.

Solution 3:[3]

In chrome > 63, accepted answer option is disabled. In later should be done through workspaces.

Solution 4:[4]

Tonight, I accidentally managed to fix this problem, just open the file on the disk and save it with a simple change even with a space. Refresh the page in Chrome, Chrome will link it(The file) to the disk.

Solution 5:[5]

Using Ctrl + F5 to clear the browser cache worked for me.

Solution 6:[6]

Something to note: if you are making dynamically loaded JS available in devtools via the helpful: //# sourceURL=Example.js comment, this network to local mapping will not work.

Note: Notice the "//# sourceURL=dynamicScript.js" line at the end of dynamicScript.js file. This technique gives a name to a script created with eval, and will be discussed in more detail in the Source Maps section. Breakpoints can be set in dynamic JavaScript only if it has a user supplied name.

https://developer.chrome.com/devtools/docs/javascript-debugging

When you're using sourceURL, you can't actually find the respective JS file in the Sources tree where you might expect it to exist. It is available to open via the "no-domain" tree, however (or quick open with CTRL/CMD+P).

I'm still looking for a solution.

Solution 7:[7]

The easiest solution I found to this problem:

(keep in mind, I was manipulating an html page that lives on my machine)

  • open the associated html page from the command line so the page displays
    • for mac, that's simply $ open <name>.html
  • open Dev Tools
  • open Sources tab
  • in Page, open a new .js file there with whatever name you need
  • write in some text and save

This worked for me. Yes, I had to create a new .js file, but my directory locally recognized it was there when I pulled it, and my editor was updating in real time with the dev tools each time I saved either. At that point, my editor and the dev tools source tab had become one thing.

Solution 8:[8]

It's simple! Right click on your page, Go to Inspect, go to the Network tab and tick the check box 'Disable cache'. Reload the page and you will see the effect.

Solution 9:[9]

Currently on Chrome 100.0.4896.60 (Official Build) (x86_64).

I've got a js file with source maps; the override has always been spotted.

I'm able to override the map file (which won't work though for the debugging purpose) and the index.html file.

Apparently my issue is related to minified js with source maps.

Seem to work in relation to the chrome version installed.

I tried the following attempts but didn't work:

  • remove cache
  • disable / enable override
  • add the dir to the workspace
  • install chrome canary

To debug then I've tried:

  • build my file.min.js to test. In my case was production/file.min.js
  • start a npx http-server in production (cd production && npx http-server) which open to http://127.0.0.1
  • override index.html to consume http://127.0.0.1/file.min.js

Interesting considerations:
When i was doing basic overriding i had to replace the file manually all the times.
Now, I've got a watch task going on and i can basically refresh the page.
I can see as well the source map update.

Solution 10:[10]

Ok, my case might be a bit different but I will share my experience on what I was facing that caused to this warning and how I solved it.

I was trying to check a certain strange behavior on a React app for video streaming, so I opened up Developer console, enabled local overrides and tried editing the js file, immediately upon saving I got the warning “Changes to this file were not saved to file system”.

enter image description here

Note the message at bottom right “Source mapped from app.bundle.min.js”, this indicated that this is not an actual file but a mapping from the app.bundle.js (Webpack bundle) So I moved to editing the app.bundle.min.js, I searched the appropriate string I was interested in from the mapped file (react-dom.production.min.js) and searched it in app.bundle.min.js

enter image description here

Again I got the same warning but I noticed the “app.bundle.min.js” file was fetched using a url parameter ?v=4900, I decided to remove it to check if that was the culprit causing the issue, to achieve that I modified the index.html file and edited the script tag that was fetching the js file from <script src="libs/app.bundle.min.js?v=4900"></script> to <script src="libs/app.bundle.min.js"></script>

After that I forced refresh the page (Shift+F5, normal refresh didn’t work), tried modifying and saving and Jackpooot!! (Take away: You can’t override files fetched with a url parameter). I then was able to beautify, modify and override the app.bundle.min.js implementation and achieved what I wanted.

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kasturi
Solution 2 Adrien Joly
Solution 3 Community
Solution 4 Mamrezo
Solution 5 Mike
Solution 6
Solution 7 mainlyetcetera
Solution 8 ouflak
Solution 9
Solution 10 AguThadeus