Related
I can add a folder to the workspace (which doesn't seem to do anything, as far as I can tell), but the "map to file system resource" option seems to have been removed, and I can no longer live-edit css files.
Is this a bug, or has the process for mapping css files been changed?
This talk (https://developers.google.com/web/updates/2017/10/devtools-release-notes) says that the new version uses "magic" to map remote files to local ones, but I can't seem to get it to work at all.
For reference, I'm trying to map a reddit css file to one on my own computer. It worked fine on a previous version of Chrome (basically I add the folder, and map the css file inside it, which has been renamed to have the same name as the remote one) but not on the new one (Chrome 63)
I've just fiddled around with a problem, where only some files got mapped to my local workspace.
Turned out that Google Chrome also checks and compares the last modified date of your files.
If the file on the server has a more recent date than your local copy, this file won't be mapped.
I deleted the Bootstrap file on the server side and uploaded my local copy, which has an older last modified date. Google Chrome instantly mapped the file to my local workspace.
Out of curiosity I ran touch bootstrap.min.js on my server to set the last modified date to today. This broke my file mapping again.
Chrome removed manually mapping to filesystem resources because of the new Workspaces 2.0 (See: https://developers.google.com/web/updates/2017/10/devtools-release-notes).
You should be able to drag and drop your folder into the sources tab and it'll link the files automagically.
However automatic mapping doesn't work in many situations and there is a Chrome bug to re-add manual mapping
I had the same problem so I downgraded to Chrome 62 (preferences, history, extensions and so on are preserved).
Download Chrome 62 from
https://www.slimjet.com/chrome/google-chrome-old-version.php .
On OS X trash /Applications/Google Chrome.
Switch off auto-update by setting "defaults write com.google.Keystone.Agent alwaysPromptForUpdates 1". Default is 0.
May be you have to set "defaults write com.google.Keystone.Agent checkInterval 0" too. Default is 18000.
Install Chrome 62 as usual.
After starting Chrome 62 open "About Google Chrome". Chrome is checking for updates, but will prompt you to confirm.
The "Map to File System Resource..." menu item is missing. There appears to be no way to map files. It is completely broken as far as I can tell.
For me, the problem turned out to be the presence of the copyright symbol © in the file headers (which affected just about every file). With this character in the files, devtool refused to map the files but with it removed, the files map fine.
I'm also using Chrome 63.0.3239.132 (Official Build) (64-bit) and as I wanted to use the DevTools Live-edit to edit some js files I saw that the option "Map to file system resource" is missing.
After some research I have found out that the Live-edit is perfectly working in Version 63, you just have to:
go to Sources and then FileSystem
add the folder with your code to the workspace
After that, a small little green point will be displayed near your files (it means the synchronization is ready) and the changes via DevTools can be persisted locally:
Thanks to others in this thread saying chrome is checking the modified date.
Adding this to .htaccess solved it for me
IndexOptions SuppressLastModified
Of course you would not want this to get into your production code as it could stop browser caching working.
I cleared the cache and it works now.
Previously, I opened my CSS file from my FTP client, then I dragged the containing folder into the Sources tab > Filesystem tab (without caring about any folder names nor structure, I just dragged the FTP clients containing folder into it).
The persistent mapping worked straight away, edits from the Chrome Dev Tools were saving on the server. After 30 minutes of fiddling and playing around, it just stopped working and the CSS resource got greyed out. The file icon with the green dot was not appearing anymore.
It didn't matter what I'd do, it would not work, but when I cleared my cache, it started to work again.
File mapping started working reliably for me once I turned on a devtools setting -- click the upper-right gear icon and check Preferences > Network > "Disable cache (while DevTools is open)"
As of today, with Chrome Version 63.0.3239.108 (Official Build) (64-bit):
The feature appears to be still broken, not working 'automagically' nor consistently with the previous behavior.
However, adding a folder that reflects the resource's URL as seen in the Network tab, make it work again. So if for instance, in the Network Navigator tab you have:
http://mylocal.site/wp-content/themes/mytheme/assets/sass/partials/_header.scss
You will just need to add the whole wp-content/ folder to the Filesystem tab to get the feature work again as expected.
Had the same problem, but when my source maps included sourcesContent, the file mappings were automatically made and I could live edit my scss. Apparently chrome uses the content to find the right file.
node-sass --source-map-contents
I have a google chrome extension that crashes after you install it from the webstore. When installed from a local copy the extension does not crash. The crash happens when you click the tool bar icon that is added once it has been installed. The icon is supposed to load a table with URLs. Once restarted all you get is the option to recover tabs. I was hoping someone could help identify the issue of the crash or tell me how to access a crash report to see what is causing the problem.
The extension is located here:
Chrome Store App
Any help or direction will be very appreciated. Thank you
I've looked into your issue, and there are two issues here:
Your extension gets disabled, "This extension may have been corrupted."
Chrome crashes.
The latter is caused by a bug that has been fixed in Chrome 40, so I'll only focus on the first issue.
The first issue is caused by Content Verification, an (experimental) security feature in Chrome that ensures the integrity of extensions from the Chrome web store, by disabling extensions that have become corrupted crbug.com/369895. Corruption is detected by verifying the checksum of a file whenever an extension file is accessed by Chrome (for files referenced in the manifest file: at install-time; for other (embedded) files: when the file is loaded).
Unfortunately, there are some bugs in the implementation that causes extensions to be disabled in the following circumstances as well:
crbug.com/439464 - The spelling of a filename in does not match the spelling of the path. On Windows and some Mac systems, the filesystem is case-sensitive, so during development, you may not notice that the spelling of the filename is incorrect. Content verification is case-sensitive, so it will treat "icon.png" different from (uppercase) "Icon.png".
(This discrepancy in checks is unfortunate, but a good thing: if you use an incorrect spelling in the icons field, then the extension would not load on case-sensitive filesystems such as those commonly used on Linux.)
crbug.com/444085 - The paths are not resolved into a canonical form. When you use two "//" instead of "/", then Chrome will find the file, but not its corresponding checksum and disable the extension. To fix this, change "path//to/file" to "path/to/file". Fixing static paths (e.g. in HTML and CSS files) is relatively easy, but if you construct the paths dynamically, then finding the culprit becomes much harder.
To find out why your extension gets disabled, follow the instructions at crbug.com/444085#c25.
The problem was related to a broken url in one of the css files. By disabling all scripts and css we were able to find the problem.
My Chrome debug console tends to be full of lines like this:
Denying load of chrome-extension://ganlifbpkcplnldliibcbegplfmcfigp/scripts/vendor/jquery/jquery.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
How can I find the source of the complaint?
EDIT For clarity: I don't know what extension is causing this. I have dozens installed. The log is not very helpful.
As said by Rob Wu, this is a chrome bug, and it has been reported by him HERE.
By the way, as long as the bug isn't solved, if you are experiencing this issue you'll only need to add the resources that are causing it to your "web_accessible_resources" field in your manifest.
Plus, if you don't know the extension that is causing this, you can find its ID in the console error log, contained in the URL of the resource:
chrome-extension://<extension-id>/path/to/some_file.js
To identify the extension you can then copy the extension ID and go to the extension page chrome://extensions, then enable developer mode checking the box on the top right part of the page and find the ID of the extension either memorizing part of it or pasting it into the search field hitting CTRL+F.
Avast Bank Mode can stop viewing mp4 and .H264 files. Works in normal Chrome Browser, and not in the Bank Mode.
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
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.
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.
In chrome > 63, accepted answer option is disabled.
In later should be done through workspaces.
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.
Using Ctrl + F5 to clear the browser cache worked for me.
I found nothing in "workspace" that seemed relevant, and other things people listed didn't help either. What helped was to go in dev tools, where it says Pages, Sources etc., there is also Overrides (duh :)), I chose it, it said "Select folder for overrides", I did, and then also clicked "Allow" on Chrome asking for confirmation. That's it, after that I was able to save the files, the overrides worked.
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”.
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
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.
On Chrome Version 109~ :
Go to F12 > Sources Tab > Overrides (You may need to click the chevron next to Page)
Select/Create a folder to contain Overrides
You can now right-click a file or editor window & save it for Overrides
Image of sources tab where Overrides is located
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.
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.
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.
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.
I worked on a chrome extension and uploaded it to chrome webstore and everything went well, I installed it on my Mac and on my Ubuntu machines in chrome it worked fine and installed. But when I try it on Windows machines, after download it popups a error message saying "Invalid Package, Can't unzip the extension".
Can any one tell me why or what might be the cause for this OS specific issue. Does it have anything to do with the permission or anything with respective folder name or content? The folder name or the extension name don't have any special characters and the previous version was fine.
Thanks in advance.
This is because there a file inside the package with a Windows invalid character in name or there a corrupted file. In my case I've tried to download the CouponsHelper extension and this error was displayed too.
I downloaded the CRX file manually and opened it with 7Zip. In the folder had a file named Icon. When I try to extract using 7Zip an error occurs too.
Note on the screenshot that there an invalid char in Icon file and that it is zero sized (possibly corrupted).
Another cause of this problem (Error: could not unzip extension) might be that you include the root directory in your zip.
You should zip all files in the same level of manifest.json.
Example
-yourappfolder
|_manifest.js
|_popup.html
In this case you should zip only manifest.js and popup.html, instead of zip the entire directory yourappfolder.
In other words, in your zip file you should NOT see the yourappfolder directory.
So the trick it to compress all the files within the folder not the folder itself.
NOTE: If it's saved in Google Drive (local syncing) this well mess it up too. Drive attaches little icons to folders that show up as unknown.
So remake the folder outside of Google Drive.
That's what was messing mine up after the "only compress inside of folder" fix.
I had the same problem but the reason was different.
I found that there is an image which has a name that is too long. When I replaced the name with a shorter one and built new package, it installed successfully.
I hope this helps anyone may facing the same problem.
A quick Google only turned up one possibly useful result but I wasn't sure if it would help.
Is that error message exactly what you see (i.e. word for word)? I couldn't find it in the code.
I may be wrong but I think this could be the code responsible for the error. Unfortunately, the zip::Unzip call can potentially fail for a number of reasons and only provides more details in the logs. I'm guessing such logs output to this location (Windows XP);
%USERPROFILE%\Local Settings\Application Data\Google\Chrome\Application\debug.log
None of this information may be useful to you but I thought I'd show you my investigation :)
Have you tried to install the extension again and do you have administration rights (not sure if this would have an affect here)?
I had the same problem but it was rejecting it because either the file was too big or the paths were too long (Windows...), which was because I accidentally included my entire node_modules directory in the .crx file.
It could be caused by a lot of things.
For me, the problem was having .xcf (Gimp) files inside the package.
The extension loaded fine when unzipped manually but showed the "couldn't unzip" error in when loaded from the Chrome Webstore.
I had problems with zipping with MacOS. There was a bunch of hidden files in the zip.
Using Windows solved it but probably taking not the default zipper in MacOS should do the same.
I had a similar problem.
My solution was:
unzip the CRX to a directory...lets say called freddy123
Rename "_manifest" to "manifest"..i.e remove the underscore.
Chrome->settings->More Tools->Extensions (Check Develop Mode Check box)
Load Unpacked extension (select freddy123 directory)
This worked for me.