I'm developing in Firefox and was asked today to test connectivity drops. How do I simulate this from the developer tools? All I can see in the network tab is speed throttling, ranging from GPRS to WiFi. How do I disable the internet entirely?
(I can't just turn the laptop's Wi-Fi off, I want the DB GUI up in a separate window.)
I noticed that accoring to this answer, Chrome has this feature, but I don't use Chrome.
This is not available in Firefox devtools. You can follow this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1029203
In the meantime, you can use "Work Offline" in the File menu. On Windows, press Alt to show the menu bar: https://support.mozilla.org/en-US/kb/restore-menu-bar-firefox#firefox:win11:fx108
Related
In developing our passkey integration I'm encountering unusual behavior in Chrome on Windows.
On my PC, when I register a new physical key I see this Windows dialog.
When I enable the virtual authenticator environment in the Chrome Dev Tools I get this Chrome dialog instead.
However, someone testing the application for me on another PC, without using the virtual authenticator environment, gets the Windows dialog first. If they click Cancel in the Windows dialog, then they get the Chrome dialog.
Is there anything I can do to nudge the browser towards delivering a more consistent experience? I'd rather always show the Chrome dialog if possible.
For reference, this is the virtual authenticator environment in the Chrome Dev Tools:
The problem is that lots of enterprise users have to use a physical security key one or more times a day. So there's a strong desire not to put extra clicks in their way and thus to jump directly to the Windows system UI. But the Windows UI doesn't support using phones as authenticators, so sometimes the browser UI is needed as hitting escape is quite non-discoverable.
Quite how that balance is struck has varied over time and might change again in the future. You can see the current logic here if you want to craft requests that trigger the browser UI. But the intent is that sites should do the obvious thing and the UI should be fairly reasonable.
In MacOS in the Activity Monitor Google Chrome extensions show as "Google Chrome Helper". These often take up much of the CPU time. Is it possible to determine which tab a given Google Chrome Helper process is running on?
Other people have suggested setting the plug-ins run mode to "Click to play". It seems that this doesn't cover all instances of the helper, since I already have it set to click to play. As you can see from the image below, there are MANY instances of this helper running. Anyway this doesn't get to the heart of the question- which tab is the process running on.
Chrome's built-in Task Manager (accessible from Menu > More tools > Task manager) will show you a per-tab resource utilization.
If case the culprit is extension code or a plug-in running in a normal tab, you won't be able to identify it with only that; extension entries in the Task Manager are only for background pages of extensions.
You may be able to investigate further with Dev Tools profiler.
I have quite a good experience with this "Google Chrome Helper" and how to debug the notorious problems on Mac.
1. CHROME EXTENSION
In this case go to the 3 dots you find on the right upper side of your browser and then More Tools > Extensions, here you can have an overview of all your extensions.
Deactivate all of them and relaunch Chrome.
If the issue is resolved we can now point out that the issue was related to one of your Extension. But what extension? You can now reactivate one by one while you have your Activity Monitor open and see when the "Google Chrome Helper" is trigged.
2. CHROME EXTENSION OR CHROME SYNC
Sometimes you can find the Chrome extension that is draining your CPU but you have to work and keep that Chrome Extension available. Or maybe that Extension is managed by your Company and you cannot disable it.
In this case you have to click on your Chrome account on your browser and sigh out from all of your Accounts.
Now close your browser, reopen it and "Google Chrome Helper" shouldn't bother you at all. Well, this is normal, because you are not signed in. Now Sign in into Gmail but don't never ever click on the "Turn on sync..." button
Now you can also install the Chrome Extension that was giving you pain and you shouldn't experience any problem. Just don't touch that "Turn on sync..." button.
3. I STILL HAVE PROBLEMS
Well, in this case you are facing something I haven't faced myself. The only suggest you I can give you is to debug the issue by yourself. When the CPU is spiking high open the Activity Monitor and target the "Google Chrome Helper", look at that line and take the PID number (in the picture that you can see in the question is 29048).
Now open a terminal and run:
killall -9 29048
This way you have now killed the process itself. Try to spot what has changed in your Chrome: maybe an Extension has been deactivated, maybe a tab was closed, maybe a webpage has become unresponsive. Dig and you will find the solution.
I wish to implement the suggestion in this post:
Visual Studio 2012 Mobile Device Emulators
but Opera Mobile Emulator seems to no longer come in a Windows version. Anyone else experiencing this issue?
Yes, that's not just you.
People at Opera forums discovered a direct link to the Windows version:
http://www.opera.com/download/get.pl?sub=++++&id=35131
Considering that the link in the article on this topic has no mention of the Opera Mobile Emulator, I concluded that the desktop version is no longer supported. However, all major browsers have a built-in mobile emulator in the developer tools.
For Opera, these are the steps to access it:
Select the tab with the web page to be tested
Open Menu > Developer > Developer Tools or CTRL + SHIFT + I
Select the "Toggle device toolbar" icon at the top left (looks like a phone next to a tablet)
Select the device from the first drop-down menu on the toolbar. It will be "Responsive" by default, or the last device used.
It's a similar process on other major browsers, like Chrome, Firefox and Edge. Comparing to physical devices I'd say it's reasonably accurate for testing layouts. It doesn't have the latest phones like iPhone 12 at this time, but you can add a custom device by specifying the viewport height and width.
My understanding is that each browser tests how it would behave on its own mobile version, which means, it's best to test it on the developer tools on all supported browsers. On this topic, there are tips and links to commercial testing tools on the MDN article on cross browser testing. My main take away is test a lot, and fix or provide fallback solutions.
I wanted to write an AJAX based hybrid Android application.
I tried to get my head around weinre but I can't get the network panel to appear. It does not show regular network interactions and for any XHR interaction it states "status pending" and "type pending".
Has anybody else faced this problem?.
This link did/did not solve the problem: https://issues.apache.org/jira/browse/CB-5424
Weinre is pretty limited, and nowadays better solutions exist to inspect your Hybrid app:
On Android 4.4 and above (or lower Android if you're using CrossWalk), you can use Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging Just point to chrome://inspect/#devices and you should see your device and hybrid apps and browsers. You may need to first run adb start-server for Chrome to see your device
On iOS, you can use Safari (on a Mac): you need to enable Web Inspector on Safari on iOS, and use the Developper mode of Safari on the Mac. See eg http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/
I have an HTML5 application that requires offline support. For running the application, I use a local Apache server. I am trying to figure out what the best way is to simulate offline mode.
Currently, in Firefox I disable my Air-Port to simulate offline mode, but this is a pain.
Any suggestions? I am open to using other browsers, if a method exists that doesn't require turning off my Internet.
For Firefox
☰ (hamburger menu)->More->Work Offline
Google Chrome doesn't appear to have this feature
Edit:
Also, another alternative is slightly more time-consuming to setup in the beginning but might be worth it. For Firefox/Chrome there should be proxy plugins, set up a fake/bad profile for each so that you proxy to something that doesn't exist... like 127.0.0.20:8080. After that you can switch the proxy setting on and off to emulate a full-stack test.
The other answers are out of date. The only place this appears in Firefox v92 is under
File > Work Offline
The File menu can be accessed in the top left of Firefox by pressing the ALT key.
Be warned that this does not prevent traffic from "localhost" loop-back itself, unless you additionally turn on
network.disable-localhost-when-offline
preference in about:config.
Bugzilla issue: Add option to disallow connections to localhost while in offline mode.
In Chrome you can open developer tools switch to the network tab and set throttling to offline
For Firefox, from the ☰ (hamburger menu), choose Web Developer > Work Offline.
For Chrome, open DevTools and select the Network panel. Throttling is set to Online (Disabled) by default. From the dropdown menu, you can choose presets Fast 3G and Slow 3G, but to simulate Offline Mode, you want to choose Offline.