Develop Reference

Can't requestQuota for files since Chrome 86

I recently tried to update one of my former webapp project in which I need to download files from a server and store them on the device (to access it later).
In order to achieve this I use the navigator.persistentStorage (or navigator.webkitPersistentStorage) and its requestQuota function as seen in https://developer.mozilla.org/en-US/docs/Web/API/LocalFileSystem#using_persistent_storage
The issue is that, when I test my application locally (accessing the index.html via file:///) the requestQuota triggers the "Do you want to allow" chrome popup but when I select "Yes" I get a failure with following DOMError :
{
message: "The implementation did not support the requested type of object or operation."
name: "NotSupportedError"
}
On the other hand, when I access the application deployed on its distant server everything works like a charm.
Beeing aware of the restrictions of the file API in local (https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction#file), I ran thoses tests with a custom chrome :
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --ssl-version-min=tls1 --allow-file-access-from-files --allow-file-access --disable-web-security --user-data-dir="C:\tmp\chromeDev"
To test it outside of my application environment, I tried the simple line in chrome inspect :
navigator.webkitPersistentStorage.requestQuota(1024*1024,
r => console.log('success'),
e => console.log('failure : ' + e)
);
On a random local index.html openened in chrome (with file:///) --> "failure".
On a random website (with https://) --> "success".
I downgraded my Chrome and found out all of this problem only occurs since Chrome 86.
Ideally I should upgrade my application to use IndexedDb API, but in the short run a fix or workaround would be quite welcome :)
Thx

How to disable cache for some files in google chrome DevTools

Whenever I run the project, many files(CSS, image and js) requested from a remote server and the project load slowly.
For handling this issue, I unchecked disable cache for all files in the network tab of Chrome DevTools(for caching all files) as follows:
But the problem started when I need some files(for example test.js,...) don't cache because they change quickly.
How to disable cache for some files(JS, CSS,...) in google chrome DevTools?

There are many ways to disable cache for specific files.
Maybe the two most common are:
The build-in bundle system of .net
Add query to your script file name ie:
<script src="../whatever/someFile.js?version=1234" />
//Where version can be a variable taken from web.config or DateTime.Now() of some sort.

press ctrl+shift+i (devTools>network)
select [Disable cache]

Why do I have differences with AJAX hosted local vs remote?

I guess part of my answer relates to "same-origin" but I'm not still not absolutely clear on when it applies and when not (or why it works in one instance, but is not a solution in other cases).
I am using latest jQuery, jQuery mobile and Apache/MySQL/PHP stacks. Client is either Windows 7/Firefox 38, or iPad/PhoneGap.
My AWS hosted php code serves the following to help resolve "same origin":
$http_origin = $_SERVER['HTTP_ORIGIN'];
header("Access-Control-Allow-Origin: $http_origin");
The Phone Gap version of my app works as expected, retrieving data from my AWS server and rendering the data it has retrieved.
Calling the exact same code from my laptop browser fails. Why?
If I copy/paste the AJAX URL into my browser, it correctly pulls the JSON data from AWS.
In an effort to resolve, I dump output to console.log. The jQuery AJAX "error" section gets called instead of the "success" portion. The same "error" result occurs if I call the index.html file (which calls JS) using File Open within Firefox, or if I call the locally apache hosted index.html file, jQuery ajax jumps to "error" section.
So if my phonegap app works, but my laptop does not, why? I mean, I see my app being akin to the laptop web browser. They both in effect have a different origin than my web server so I would expect either both work, or both fail.
If someone can help clarify it would be great - I have twice spent time chasing a problem that only exists in my dev environment but works just fine in production - its frustrating!
Thanks all in advance

Have you white listed domain in your phonegap config ?
http://docs.phonegap.com/en/4.0.0/guide_appdev_whitelist_index.md.html
ex:
Access to google.com:
<access origin="http://google.com" />
__ reading it should improve : https://github.com/phonegap/phonegap-app-developer/issues/169 __

Debug Javascript in netbeans 7.4 inside PHP project

I want to debug javascript code inside my php project in netbeans. I have read on several occasions that this should be possible in the new netbeans 7.4 version, for example here and here, but i cannot get it to work. I have installed de debugger connector for chrome and php debugging works just fine but when i try to set a breakpoint in a .js file it says:
unresolved breakpoint,
debugger is not attached to tab with id....
i understand that the link from the netbeans page is for an html 5 application but i thought this debugging would also be enabled in php projects. Am i doing something wrong?
i know i can debug with firebug or chrome itself but i would like to do it all in one place in my netbeans IDE...
thanks in advance

The unresolved breakpoint usually mean that for instance you set it in file that is not loaded in Chrome's tab right now (or for some reason, IDE cannot match URL of JS file and local JS file). The mixed debugging works only in Embdded Browser or in Chrome with NetBeans connector (you can see the usually yellow bar in your page saying "NetBeans connector is debugging this page" and you can debug PHP and JS at the same time.
Have a look here, although it is about Java EE projects, it is very similar to PHP projects
Updated answer:
One issue I remember (and plain Chrome Dev Tools has it as well) is that if you have JavaScript file attached to HTML/PHP with dynamic parameter to prevent browser from caching, e.g. , where "673612" changes each time a file is loaded. If that's your case, try to remove this dynamic attribute. I think that e.g. Sencha or ExtJS use this feature which "breaks" debuggers.

I had a similar problem : javascript breakpoints were broken, while everything else was working fine (for example php breakpoints were okay).
The reason was that in the run configuration properties I changed the Project URL to something that was not the host anymore, but a subfolder managed by a url rewriting rule.

johanvs is correct, but my reputation is not enough to +1.
Suppose a NetBeans project contains many files in different folders:
/var/www/index.html
/var/www/config.html
/usr/doc/readme.txt
/usr/doc/license.txt
Since "index.html" is not in the project root folder but under "/var/www", NetBeans does not know "http://127.0.0.1/index.html" is corresponding to "/var/www/index.html". To solve, verify below settings in NetBeans -> File -> Project Properties:
Sources -> Web Root
"var/www"
Run Configuration -> Project URL
"http://127.0.0.1/"
Run Configuration -> Index File -> Browse
"index.html"
Run Configuration -> Remote Connection -> Manage -> Initial Directory
"/"
Run Configuration -> Upload Directory
(empty)

How to make the source(path) of MathJax.js environment dependent?

How do I specify the following requirement in my html?
When the computer has access to Internet, the source of MathJax.js is https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js;
When it is offline, and the system is Linux, the source is /MathJax/MathJax.js; if the system is Windows, it is /C:/MathJax/MathJax.js. (It would be even better if I can use environment variable in the local path.)

You can put MathJax in a location relative to your static HTML file:
<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js"></script>
<script>
if( !window.MathJax ) {
document.write(
'<script type="text\/javascript" src="../lib/MathJax.js"><\/script>'
);
}
</script>
This way your implementation is independent of the OS.
Another option would be to set up the location according to your browser URL:
<script>
var url= location.protocol == 'http:'?
"https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js" :
"../lib/MathJax.js";
document.write(
'<script type="text\/javascript" src="' + url + '"><\/script>'
);
</script>

These other pages might provide you with some new approaches to a solution.
The first one demos how you might chain a list of url's together, and continue trying to load the next script if the previous one fails.
Failover loading of .js from sequence of servers?
You would need to add your logic around Windows vs Linux into that.
Here are some ideas around detecting if the web page is running offline:
Detect that the Internet connection is offline?
If you could provide some more information about your application, I can probably come up with some better suggestions. Is this an application users install on their local computer? How do these JS files get onto people's C:\? What is installed when the app installs? How does it run? Is a local server installed as well? Or are the html pages just run from the file system in the web browser?