nwjs / nw.js

Call all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.
https://nwjs.io
MIT License
40.16k stars 3.88k forks source link

Debugging connection was closed: WebSocket disconnected #8175

Open silambu-sundaram opened 2 months ago

silambu-sundaram commented 2 months ago

Issue Type

Current/Missing Behavior

Unable to open dev-tool for the application when I running using nwjs 0.84.0 version

Error Debugging connection was closed: WebSocket disconnected Reconnect when ready reopening DevTools

Note: the application works in nw.js 0.50.1

By accessing like this also same error: http://127.0.0.1:9222/devtools/inspector.html?ws://localhost:9222/devtools/page/PageID

Expected/Proposed Behavior

It should be launch the chrome dev-tool without WebSocket disconnected error

Additional Info

Package.json

{
    "name": "Preview",
    "main": "preview.html",
    "window": {
        "id": "app-preview",
        "title": "Preview",
        "min_width": 600,
        "min_height": 600,
        "position": "center",
        "icon": "images/icon.png"
    },
    "domain": "127.0.0.1",
    "chromium-args":  "--disable-web-security --disable-devtools"
}

preview.html


<html lang="en">

<head>
    <title>Preview</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
    <div class="main-toolbar">
        <input type="button" value="" class="browser-back" data-target="browser-back" title="Back" />
        <input type="button" value="" class="browser-forward" data-target="browser-forward" title="Forward" />
        <input type="button" value="" class="preview-refresh" data-target="preview-refresh" title="Refresh" />
        <input type="button" value="" class="devtools-toggle" data-target="devtools-toggle" title="Hide/Show Developer Tools" />
        <input type="button" value="" class="devtools-position-dock-toggle" style='display: none' />
    </div>

    <div class="main-body">

        <div class="preview-content">
            <div class="device-preview">
            </div>
        </div>
        <div id='split-pane-resizer'></div>
    </div>

    <script src="js/bridge.js" type="text/javascript"></script>
    <script src="js/events.js" type="text/javascript"></script>
    <script src="js/toast.js" type="text/javascript"></script>
    <script src="js/init.js" type="text/javascript"></script>

    <script type="text/javascript">
        window.onload = function() {
            let wsServerParam = nw.App.argv.find((param) => param.startsWith('--wsServer'));
            let debugPort = nw.App.argv.find((param) => param.startsWith('--debug-port'));

            init(wsServerParam.split('=')[1], debugPort.split('=')[1]);
        };
    </script>
</body>
</html>

To launch the app from CLI

"C:/nw/nw_win/nw.exe" --remote-debugging-port=9222 "C:/preview/inlinepreview" --wsServer=ws://127.0.0.1:9009 --debug-port=9222

image

image

image

ayushmanchhabra commented 2 months ago

When you say DevTools for the application do you mean Chrome or NW.js DevTools? I noticed you disabled NW.js DevTools via your chromium-args.

Could you strip down the preview.html that you referenced? Will help pinpoint issue.

silambu-sundaram commented 2 months ago

~When you say DevTools for the application do you mean Chrome or NW.js DevTools? I noticed you disabled NW.js DevTools via your chromium-args.~

Could you strip down the preview.html that you referenced? Will help pinpoint issue.

I have added preview.html. If I remove --disable-devtools and tried to run still same issue.