Very simply, I would like to disable the display of the repeated workbox messages that appear in my browser console while I am debugging. For instance, I don't need to see:
WorkBox: Using NetworkFirst to respond to '/fonts/KFOlCnqEu92Fr1MmEU9fBBc-.woff'
It clutters my FireFox console and it is something I dislike very much. If you like it, fine, please don't try to change my mind about the benefit of such useless (to me) messages.
Do you know how to turn it off?
For info sake, I am using Quasar and Vue to create a SPA - not even a PWA.
Thanks.
Simply add self.__WB_DISABLE_DEV_LOGS = true at the top of your service worker (sw.js) file.
Contrarily to what answers posted here say, the solution is not:
to unregister your service worker to get rid of the messages. Your app may need it to run properly
to add workbox.setConfig({debug: false}) unless knowing what it does:
it switches between a production build and a debug build. workbox automatically selects the debug build when running on localhost.
For me worked:
Console -> Application tab -> Service workers -> sw.js unregister
You can use workbox.setConfig({ debug: false }); in order to use production build and remove extra logging, otherwise adjust your web console log level filtering accordingly.
Doc : https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug
You add this setting in your service worker definition file, after the import. For example:
importScripts(`https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js`);
if (workbox) {
console.log(`Yay! Workbox is loaded š`);
} else {
console.log(`Boo! Workbox didn't load š¬`);
}
// Switch debug logging on/off here. Default is on in dev and off in prod.
workbox.setConfig({debug: false});
For more information on this see https://developers.google.com/web/tools/workbox/guides/configure-workbox#configure_debug_builds_vs_production_builds
Thanks to the answer provided by Antonina K, I was able to locate an answer for FireFox. In case anyone else needs this. As Antonina mentioned, in Chrome, the console has an application tab that has references to all the service workers used by the browser. FireFox does not have the tab (or, at least my version does not).
In FireFox, open a new tab and place about:serviceworkers in the address bar. Scroll through the list to find the workbox service worker. For me, it was listed as localhost:8080. I deregistered that worker and I no longer see the multitude of workbox messages in my console. I can finally debug my app again!
Here is the link that I referenced to fix the problem:
Manage Service Workers in FireFox and Chrome
Related
So I'll keep this succinct: When trying to install, my service worker fails. This is all of my code in sw.js:
var cacheName = 'randomstring';
var filesToCache = [ '/' ];
self.addEventListener('install', function (e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName)
.then(function (cache) {
console.log('[ServiceWorker] About to fail');
return cache.addAll(filesToCache);
})
);
});
I get an exception because cache is undefined (on the cache.addAll bit).
Not really sure why this is the case?
I've used service workers before and never encountered this issue. This is my first time using a service worker with an ASP.Net back-end though, so not sure if that's the problem?
So, I figured this out. I was going to vote to close the question, but I figured I'd leave it here as I saw some other people with this issue who didn't know how to resolve it. Even though it's super-stupid :) (or more accurately, I am).
So I was running the website via the "Play" button, aka "Start Debugging", which, in Visual Studio 2017, launches a special Chrome window, in which the above error will be thrown.
To work around the issue, I can (or you can, internet traveller of the future) simply start without debugging, host the website in IIS, etc.
EDIT: If there's a better workaround where I can use the service worker in debug mode, please suggest it and I'll mark that as the answer. For my specific problem though, the above workaround is fine :).
Encountered the same problem and found some other ways.
VS recognises "chrome.exe" while debugging and adds some parameters, thatĀ“s why service workers wonĀ“t working.
There is an option Debug => Option => Debugging => General => Enable javascript debugging for asp.net (Chrome, Edge and FireFox). If you donĀ“t want to use js debugging in vs - like me because i use chrome for js debugging - just deactivate this option and service workers will work.
VS Enable JS Debugging in Chrome
Alternatively you can add chrome as a new "browser" and switch the browser for debugging. Because vs recognise "chrome.exe" make a symlink via administative commandline "mklink chromedirect.exe chrome.exe" and add it as new browser in visual studio.
This can be done under the "Play" context menu => Browse with.
VS Play Context Menu
Just add chromedirect.exe without any arguments and a friendly name like "Google Chrome Direct". After that you can switch to the browsers and select if you want VS JS Debugging or not.
I've given the docs a good looking over as well as SO, however can't seem to find any answers.
I have a packaged chrome app (new style, not legacy)
I can find many documents on enabling logging as in errors/crash reports, but can't find anything about custom logging. For example:
On initial load some 3rd party data is loaded via a api call, lets just assume it:
$http.get('/api/get-my-data').onSuccess(function(data){
// Yay, I gotz the dataz. Do something
}).onFail(function(error) {
// Damn son, something went wrong.
});
In the above pseudo code I'd like add to a chrome error/custom log to record the onFail condition. I'm not looking to record error in the sense that the app has crashed or a fatal error, I'm looking to log events that in the context of the app running correctly I regard as errors.
If an error caused the app to crash etc then I'd get a entry in the chrome logs, but there must (I assume) be away to log data directly to a log on the server that isn't considered an error (perfectly common if this was a web app on a server (log4j, KLogger, Morgan)) but I can't find it
Anyone else created a chrome packaged add and used the inbuilt logging?
Thanks
N.B. Just to be clear, we are talking about logging in a packaged app with javascript to a log file, not console.log
Thought I'd answer this incase someone else comes across it as it's not clear form the google docs.
when you use console.log it gets sent to your strdout/chrome log file.
You have to enable logging in your chrome app launch config/flags, then any console.log in your code will show up where ever you set your user-dir to be.
It's not clear from the documentation, but basically your chrome app will automatically log and console.log you have
This includes other console methods.
I have next code
function navigate(_hash){
alert('before');
//try#1
window.location.hash = _hash;
//try#2
// window.location.href=window.location.href.split("#")[0]+"#" +url;
alert('after');
}
navigate('someurl')
the issue is that after changing url hash (both variants) app just hangs. And interesting thing that second alert is not firing. so app just... crashes after some time.
Nothing in js console.
Debug log says
The thread 0x*** has exited with code 259 (0x103).
google found nothing on that. Seems like this is acommon error code.
More details:
i'm using ChaplinJs so just can't get away from hash navigation.
second thought was that chaplin overloads system and we caanot get anywhere, but(!) putting logs and alerts in source of lib in window.on('hashchange',....) also didn't make any effort because we do not get there also.
WP 8.0
tried both Cordova 4.* and 5.*
also tried to modify xhrXelper.cs but it is not related tonavigation itself.
PS: I know that jquery mobile suggests to disable hashchanges onmobile navigation. But i can't :(
PPS: also tried todisable chaplin haschanges
new App({routes: routes, controllerSuffix: '-controller', pushState: false,hashChange:true})
but this also didn't make any good results because it's placing hash to href to check it in interval and app hanged again. So i assume that is a webview problem
More additional info:
continious re-run of app makes it work sometimes (1 run of 10 can make it work). That's very strange.
Emulator and device behave in the same way.
Update: Read somewhere that it's critical to restrict navigting before "deviceready" event.
But this is also not a case.
Update2: create cordova proj from scratch. Added hash change indeviceready cb and it hangs
Update3: same code on 8.1 works perfect
The main idea is to run a random page on Internet Explorer and get javascript errors and logs.
Is there a way to recover javascript console logs and execution error
from a random web page without accessing the F12 tool on Internet
Explorer?
I found that with Chrome based browser, you can get it on your AppData file log by adding --enable-logging --v=1 args when launching.
Any solution with any language are welcome.
Thank you for your answer.
NOTE :
random page on Internet Explorer means that I do not have the access on the source code.
Basic solution to this would be:
1. Use Exception Handling to catch the errors.
2. Log errors in a Global Array
3. Log the errors in a file using Blob and URL.createObjectURL. All recent browsers support this.
Have you considered using a Bookmarklet that:
Overrides window.console.log and window.console.error (to intercept messages)
Logs incoming messages somewhere using createObjectURL?
Or you could use something like firebuglite and auto-enable it like this:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js">
{
overrideConsole: false,
startInNewWindow: true,
startOpened: true,
enableTrace: true
}
</script>
More instructions are here: http://getfirebug.com/firebuglite
If the F12 tool is not of your interest, then what about the Event Viewer? Open Event Viewer from Control Panel -> System and Security -> Administrative Tools -> Event Viewer.ā Then select the log Applications and Services Logs\Internet Explorer.
By default no events are being logged for Internet Explorer, to enable them create a new DWORD registry value named Feature_Enable_Compat_Logging under the following registry key:
HKCU\SOFTWARE\Microsoft\Windows\Internet Explorer\Main \FeatureControl
and set the registry value to 1.
Check the logs you get to see if it's what you're looking for.
One idea would be to write a browser extension which listens for window.onerror and writes to a file. Definitely not as elegant as the Chrome solution, but it would work fairly well.
Using local proxy might be a good one-time solution.
Charles web debugging proxy app has nice UI and it allows to replace any response with local resource.
So basically you'll need:
Download one any of the js files used on target page
add any code you wish to saved version
set up Charles to serve you your local version instead of remote one
You might try Fiddler. It's got its own logging and has amazing inspection power. It won't capture IE specific errors, since it's at a different layer, but it will definitely get you any code that's coming over the wire.
I've published a Meteor code example similar to githublogin but for Google login process (https://github.com/lc3t35/googlelogin, How to get Google+ profile with Meteor.loginWithGoogle?), it works fine so i decided to add unittests with rtd on this project (https://github.com/lc3t35/googlelogin/tree/unittest), just for fun :)
Some modifications were needed to run rtd (https://github.com/xolvio/rtd/pull/54).
With rtd you have 2 apps running, the standard app on port 3000 and one in build/mirror_app on port 8000 for code coverage instrumentation.
You can run them manually, the standard app works well but the one in mirror_app fails :
Change your credentials in settings; run grunt so mirror_app is updated in build, stop all.
go to build/mirror_app and run :
meteor --settings settings.json --port 8000
click on LoginWithGoogle, the google window with login/password is displayed, enter login/password and click on Connection, then a new pop-up asks for acceptation to share data with your app, the window closes and the error is
error : Accounts.LoginCancelledError
(more details here : https://github.com/lc3t35/googlelogin/issues/1)
When you run the test with grunt, the behaviour is the same, the tests does not finish all (but no errors are displayed) and grunt displays "Done, without errors", which is not also the expected behaviour.
I'm looking for a pair programmer to review the code...
After reviewing the code with sam#xolv.io, we found that handling _oauth was not needed in fixture.js (test/acceptance/fixtures).
The master includes now the tests with rtd : https://github.com/lc3t35/googlelogin
A better isolation (https://docs.google.com/presentation/d/1nHzs64rDpSbrKrZ0YvQ5iaG26t-XcLCCAGth6Pkr5f4/edit#slide=id.gee27c908_2301) should be implemented to run the tests without the need of an internet connection and avoid google authentication latency.
A request to extend RTD with smoke test was issued (https://github.com/xolvio/rtd/issues/70)