Safari inspector doesn't show javascript errors - javascript

For some reason, since High Sierra and now Mojave, Safari no longer shows page breaking errors in the Inspector console. If I load a page that has a fatal error there is nothing output to the console. Other errors, such as cross origin blocking, 'XMLHttpRequest cannot load' or 'Failed to load resource:' errors DO show up however anything like a reference error or plain broken code show nothing. If the same page is loaded in Chrome or even in Safari Technology Preview it works as expected—displaying the appropriate error in the console. Is there a preference somewhere I've inadvertently switched? It's driving me nuts.

Related

The console in dev tools is blank

I've been attempting to verify some information but I haven't been able to receive any data on the console. I suspect that my code may not be functioning properly, so I accessed just github.com/reddit.com, and here the console produced an error. Initially, I believed that this issue may be related to a problematic browser extension, so I disabled all extensions and opened an incognito window. However, in this case, the console is entirely empty. Does anyone have any suggestions as to what could be the issue?Below are the screenshots:
Tried running a js web app and found the console showing error. Then diabled the extensions and found the console completely blank.

Javascript "TypeError: Load Failed" error when calling "fetch" on iOS

I'm logging JS client errors using Sentry and there's a lot of "TypeError: Load failed" errors. It's only occurring on iOS. I can't find anything on Google. Is this a native Javascript error or something else? What does it mean? This is separate from a seemingly related issue with "TypeError: cancelled".
Screenshot from Sentry of the breadcrumbs
From what I understand, the fetch API may deliberately return very limited error details on failure. (Otherwise, a malicious JS program could issue a variety of fetch requests and look at their results to identify which internal servers exist, which servers the user has access to, etc.)
If you have access to a Mac, you can see this for yourself by experimenting with fetch requests from the Safari DevTools console. For example:
The request for google.com fails due to CORS. The request for example.does-not-exist is an invalid name. The DevTools console gives full details, so a developer who's actually at the browser can troubleshoot, but those details aren't available to JS code; the JS code gets the same "TypeError: Load failed" message in each case.
If you're lucky enough to have a way to access the browser console, you can see more details, but otherwise, I'm not aware of anything you can do to track down the problem - it could presumably be virtually any network error.
Had the same problem, problems occured because of certificate and iphone took addres api as dangerous.
Helped me get into address api directly in safari or chrome for instance: https://my-adres-api/api/product and then choosing allow to connect with that address.
Now requests works excellent
In my case, this issue appeared mostly on iOS 15 in Safari. By debugging an iPhone through Mac I found that preload links with imagesrcset are not handled well in Safari (unless de-prioritized), throwing <link rel=preload> has an invalid imagesrcset value, as described in this question.
The reason why it looks like fetch error in Sentry is that preload link actually uses fetch under the hood.
Given it's just the image preload that is failing, and unless it's causing you performance problems, you can safely ignore this particular issue in Sentry until this webkit Bug 231150 - Safari complains about invalid imagesrcset value in where Chrome doesn't gets fixed.

React app not working in Safari. Working fine on Chrome and FireFox but giving black layout for safari

My react app works in every browser, But not working in Safari on MacOS(Catalina OS & Version 13.1.2 ). I get no error, no console message, nothing that would give me some idea. It only renders blank screen in Safari.
Some people suggest me to clear the cache or turn off the cache and then reload the page but that doesn’t work for me.
I tried to run my react app locally in safari and then I was getting these error messages in the console :-
[Error] Failed to load resource: A server with the specified hostname could not be found.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
Do you have any idea how could I fix this issue?
Thanks
I found the issue. The main reason why it failed was 'callback' function that was not triggered in safari. So I checked on official website of google(https://developers.google.com/identity/sign-in/web/sign-in) about google sign-in and I got that we should use (meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com") and it fixed the issue. Now it's working fine in every browser.

Chrome Console error

The issues I am having is with my Chrome browser. I am getting an error in the console which is creating problems with my development environment. This error on happens in Chrome and no other browser. Fire Fox, Safari and Opera are all fine without this error. Also I used a different computer here with the same version of Chrome (48) on the same WordPress website and did not get any console errors. This makes me think it is just on my computer and my browser. So the console error is the following:
Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window':
The string to be encoded contains characters outside of the Latin1
range.
b.mxpnl.net/cs/dca.js?pid=39266&cid=49544_680_:1
I have found that it is making an external call for this script from b.mxpnl.net in the sources section of the inspect developer tools. It does not make this call with any other browser or in Chrome on a different computer, so again this is making me believe it is just on my computer, my Chrome. Could it be a malware or virus?
We spent all day on this. Turned out to be a extension installed. Disable them and retest.

Firefox mobile error console missing

I'm working on a mobile website, and it works fine in the Android stock browser. In Firefox some JavaScript functions don't work. So I was googling for the error console. I found a support page wich gives information about the error console of an early version.
Is there an error console in Firefox for mobile version 14 (2012-06-26)?
Looks like it is hidden, but adding browser.console.showInPanel and devtools.errorconsole.enabled then setting both to 'true' in about:config will enable the console and preferences panel for JavaScript debugging purposes.
Here is how to find the error console icon:
Firefox Mobile: Enabling the Error Console
It seems that the Error Console is deprecated, so bookmarklets are the simplest of the remaining mobile debugging alternatives:
Android Console:
javascript:(function(){if((/android/gi).test(navigator.appVersion)){console={"_log":[],"log":function(){var%20arr=[];for(var%20i=0;i%20\""+value+"\"");}},"show":function(){alert(this._log.join("\n"));this._log=[];}};window.onerror=function(msg,url,line){console.log("ERROR:%20\""+msg+"\"%20at%20\""+"\",%20line%20"+line);}window.addEventListener("touchstart",function(e){if(e.touches.length===3){console.show();}});}})();
Firebug Lite:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

Categories