How to manually disconnect webpack dev server from chrome - google-chrome

Can I manually disconnect a chrome window from refreshing automatically when I change my code.
Basically I want to disconnect the websocket connection using devtool or some other way. I tried offline checkbox, but its not helping.
This will come handy for a HTML developer for him to compare the HTML changes done from a developer tool and to the original one.

Right-click the WS connection in the Network panel then select Block Request URL. Based on the websocket.org echo demo, it seems to provide the effect you're looking for.

Have you tried setting the hot module reload to false? There is mention of it in the docs.

Related

How do I tell figwheel to start and connect to Google Chrome instead of Firefox?

I'm taking some baby steps with figwheel.
When I fire up the tutorial application, it starts firefox, which then connects back to the figwheel process to get code to run on its JavaScript engine. If firefox is already running, a new tab is opened and the connection proceeds likewise. Figwheel probably just executes the firefox command with appropriate options. Or maybe it is using xdg-open.
The system is a Fedora Linux with KDE. Interestingly a "default browser" is not currently configured (how to configure the default browser is described in these KDE help pages): the application to start is selected based on URL contents. So I am not sure why figwheel selects firefox instead of Google Chrome, also installed.
Now, for testing purposes I sometimes want figwheeel to use a Google Chrome process instead. Is there a way to do that?
There seems to be no option regarding this.
You can use figwheel's :launch-js option to define what action should be taken for example:
:launch-js ["chrome" "--repl" :open-url]

Can i debug html page on run-time execution?

I am working on HTML page and using angular js.
I Want to see how many records my database collection has in run-time.
Is there any way to trace it, like we debug Java class.
You can set break point by using Chrome dev tool.
Open Chrome Dev Tool (Press F12)
Click Sources Tab
Select your JS file from left panel
Click on the line no to set the breakpoint
No..I think it's not available like u want to see data.
But u can do debug through the browser by inspecting elements.and My suggestion is to write business logic in ur language (C#,java....)and make service.And consume from client side.There u can debug easily.
In client side usually, we get an error in syntax or library compatibility.
You can debug all your JavaScript code using developer tools in Chrome for example and its debug functionality.
IDE like VSCode has also a built-in functionality for debugging JavaScript code directly from the IDE for example.
Then if your question is to see live your database from the browser. Nope, you cannot do that. There is nothing related between a front-end application and the connected database directly from the browser.
Then maybe there are few chrome extensions which could allow you to connect to your db and see real time it. But this is not a built-in feature.

How to force chrome to load a local Javascript file instead of a remote one?

I know how to do this with Fiddler (define rules and etc.) but my problem is that Fiddler crashes usually, is there any other stable method?
I use Fiddler for this all the time quite successfully.
Chrome's F12 dev tools let you edit the JS source but it's not used when you refresh the page.
The issue you face is addressed here. Looks like you need a local webserver (like mongoose) and the Redirect plugin for Chrome.

Can Google Chrome be made to auto reload after network outage in kiosk scenario?

I have an unattended touch screen kiosk application which needs to be able to automatically reload the browser home page after a network outage has occurred. At the moment the browser will display an "Unable to connect to the internet" error and will wait for a manual reload to be carried out before proceeding. Can this be automated?
I've searched for plugins and have found some plugins which deal with auto-reload but they don't seem to work in this context. I am guessing that the plugin is only active when a page is loaded so in this case with an error condition, perhaps the plugin is not active.
One alternative might be to override the error page which is displayed by Chrome but I don't know if this is possible. I could then instantiate a Javascript timer to try a reload every n seconds for example. Is this possible?
I saw a suggestion to use frames to allow the outer frame (which is never refreshed) to keep trying the loading of an inner frame but I'm not keen to use frames unless there is no alternative. I also saw a suggestion to use AJAX calls to check if the network was working before attempting a page load but this seems overkill if there is a way to correct the error only when it has occurred rather than pre-empt an error for every page load.
Host system is Windows 7 by the way. I'm keen to keep the browser running if possible rather than kill and create a new browser process.
If you don't want to tackle chrome extension development, you could wrap your site in an iframe, and then periodically refresh the iframe from the parent frame. That way you don't need to worry about OS issues.
if the content were loaded from ajax from the start then the it could simply output a custom message on the page as it does a check via AJAX. Probably prevention over remedy is always recommended
Assuming linux, you could create an ifup script to simply relaunch the browser with something like
#!/bin/sh
killall google-chrome
DISPLAY=:0 google-chrome
On debian/ubuntu, edit /etc/network/interfaces to include a post-up line; Google ifupdown for other distros.
On windows, you'd do roughly the same with a PowerShell script.
If you really want the precise behaviour you describe (without restarting the whole browser), I suggest you develop a plugin/extension: http://code.google.com/chrome/extensions/getstarted.html
I know you are using Chrome, but in Firefox this is trivial by overriding the netError.xhtml page to do a setTimeout(location.reload, 10000);.

How can i temporarily disable websocket in Google Chrome?

I want temporarily disable websocket in Google Chrome to debug a javascript to make sure it work for any browser without websocket support.
To begin, I'd say that there are better mechanisms to test your JavaScript in a websocketless environment. You could run your JavaScript in IE9, for instance, which doesn't implement the protocol. They're still disabled for the moment in Firefox 4 as well, if that's more your style.
Assuming that there's some good reason that you need to test in a websocketless Chromium, I think you're out of luck. There's not a trivial mechanism to disable WebSockets in Chromium. It's not built in as a command-line switch, nor is there a configurable flag. Since there's no mechanism to make this happen natively, I wouldn't suggest spending time testing the scenario. Every version of Chromium that your users use (e.g. 9+) has websockets enabled.
All that said, if you really need to disable websockets, the closest you can get without recompiling the browser would be to drop the relevant variables in your test code:
WebSocket = undefined;
would be relatively brute force, but should work. You could even create an extension to inject that JavaScript into every page you visit, for a truly websocketless experience (assuming, again, that that's somehow valuable for your use case).
I was able to block WebSockets with Fiddler.
Go to Rules / Customize Rules... in the Fiddler menu
Add this code to class Handlers (I put it after the existing RulesOption items):
// Block Websockets
public static RulesOption("Block Websockets")
BindPref("fiddlerscript.rules.BlockWebsockets")
var m_BlockWebsockets: boolean = false;
Add this code in OnBeforeRequest:
if (m_BlockWebsockets && oSession.oRequest.headers.Exists("Connection") && oSession.oRequest["Connection"] == "Upgrade") {
oSession.oRequest.FailSession(502, "Blocked", "Fiddler blocked websocket connection");
return;
}
This adds a menu option Block Websockets to the Rules menu. When it is toggled on, ws connections should be blocked based on the Connection: Upgrade header.
After seeing #user3661841's answer on another question, I created a GreaseMonkey/TamperMonkey script that will allow you to disable WebSockets in a similar way.
Here's instructions for Chromium based browsers (Chrome, Brave, Sidekick, etc.):
Download the TamperMonkey extension from the Chrome Store
Install this script from GreasyFork. By default, installing this script will disable WebSockets on every site you visit. If you don't want to block WebSockets immediately, click on the TamperMonkey icon and the toggle switch to disable blocking.
When you want to turn off WebSockets, click on the TamperMonkey icon and the toggle switch to enable blocking. Refresh the page.
Disable the script when you no longer want to block WebSockets.
Here's the switch you want to click to disable/enable WebSocket blocking:
NOTE 1: You should be able to see output in your console marking that the WebSocket connection was attempted to be opened, but blocked.
NOTE 2: Make sure to disable this when you're done disabling WebSockets for development. If you only use TamperMonkey to disable WebSockets, You'll want your TamperMonkey to look like this most of the time:
And like this when you want to block:
To disable ws you can simply add "Request blocking" in chrome dev tools, but only if specific file is initiating websocket to prevent it from loading if you can't do that this solution might not work
For example:
https://www.websocket.org/echo.html
Websocket connection is initiated by echo.js, so you can prevent that file from laoding and websocket will never start.
Initiator file can be found in network tab