Nw.js: External debug tools not working on NW.js

Created on 31 May 2016 · 11Comments · Source: nwjs/nw.js

We are trying to debug a simple web app with NW.js for instance, the Angular2 "Tour of Heroes" tutorial app and the debugger isn't able to attach to the app running on NW.js.

For this specifc repro case, we tried VSCode from Microsoft.

The following works fine:

Debug Client java script (angular2 code) - VSCode Launch chrome or we can attach to an existent running tab
Debug server script (node.js code) - VSCode launch node.js instance or it can attach to an existent instance.

All those cases we were able to debug both JS and TS (with sourceMaps enabled).

The problem:

If we instead of use vanilla node.js to host the app by launch and/or attach VSCode to it, we try to run it on NW.js, we get the following errors in the output:

If VSCode start NW.js:

›OS: win32 ia32
›Node version: v5.10.0
›Adapter version: 0.0.5
›initialize({"adapterID":"chrome","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true})
›launch({"name":"NW.js","type":"chrome","request":"launch","runtimeExecutable":"nw.exe","runtimeArgs":["c:\\Dev\\Samples\\dietsample\\data","--enable-logging","--mixed-context","--remote-debugging-port=9222"],"sourceMaps":true,"diagnosticLogging":true,"noDebug":false})
›WARNING: "webRoot" is not set - if resolving sourcemaps fails, please set the "webRoot" property in the launch config.
›spawn('nw.exe', ["--remote-debugging-port=9222","--no-first-run","--no-default-browser-check","c:\\Dev\\Samples\\dietsample\\data","--enable-logging","--mixed-context","--remote-debugging-port=9222"])
›Attempting to attach on port 9222
›Error: Got response from target app, but no valid target pages found
at Object.errP (C:\Users\gutem\.vscode\extensions\msjsdiag.debugger-for-chrome-0.3.1\node_modules\vscode-chrome-debug-core\out\src\utils.js:209:13)
at C:\Users\gutem\.vscode\extensions\msjsdiag.debugger-for-chrome-0.3.1\node_modules\vscode-chrome-debug-core\out\src\chrome\chromeConnection.js:178:26
at process._tickCallback (internal/process/next_tick.js:103:7)
›To client: {"seq":0,"type":"response","request_seq":2,"command":"launch","success":false,"message":"[debugger-for-chrome] Got response from target app, but no valid target pages found"}

NW.js starts, load the ANgular app and is killed. Looks like VSCode kill it if it is unable to connect to it after some time. The connect is made to the port 9222 but it looks like it is unable to find the app on it Error: Got response from target app, but no valid target pages found

If we use attach, the error is the same, except that it doesn't start nw.exe since I do it manually before start the debugger.

This is the version of nw.js we are using:

nw.js v0.15.0
Node v6.2.0
Chromium 51.0.2704.63
commit hash: 73bdfec-d5bd333-bc975ec-3233243

We also made tests with Electron and it worked pretty fine.

Just for the sake of information, the configs used in the VSCode debugger(https://github.com/Microsoft/vscode-chrome-debug) are the following:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9222",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true
        },
        {
            "name": "Electron",
            "type": "chrome",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe",
            "runtimeArgs": [
                "${workspaceRoot}",
                "--enable-logging",
                "--remote-debugging-port=9222"
            ],
            "sourceMaps": true,
            "diagnosticLogging": true
        },
        {
            "name": "NW.js",
            "type": "chrome",
            "request": "launch",
            "runtimeExecutable": "nw",
            "runtimeArgs": [
                "${workspaceRoot}",
                "--mixed-context",
                "--remote-debugging-port=9222"
            ],
            "sourceMaps": true,
            "diagnosticLogging": true
        }
    ]
}

The closest thing we have from NW.js is Electron and it works just fine... Node.js and Chrome also work fine with VSCode, so I could only assume that is something related to nw.js itself.

Can you help us with that?

Thanks

Source

galvesribeiro

Most helpful comment

close since the issue is not in NW.

rogerwang on 2 Jun 2016

👍2

All 11 comments

Just to add more info, I got VSCode to start and attach the debugger to nw.js however, now it now throws some weird messages on nw.js console:

[8672:9248:0531/174712:ERROR:extension_protocols.cc(358)] Allowing load of chrome-extension://nochadnphaoigfjnaclpecjelllocobm/app/heroes.component.js.mapfrom unknown origin. Could not find user data for request.
[8672:9248:0531/174712:ERROR:extension_protocols.cc(358)] Allowing load of chrome-extension://nochadnphaoigfjnaclpecjelllocobm/app/dashboard.component.js.mapfrom unknown origin. Could not find user data for request.
[8672:9248:0531/174712:ERROR:extension_protocols.cc(358)] Allowing load of chrome-extension://nochadnphaoigfjnaclpecjelllocobm/app/hero-detail.component.js.mapfrom unknown origin. Could not find user data for request.
[8672:9248:0531/174716:ERROR:extension_protocols.cc(358)] Allowing load of chrome-extension://nochadnphaoigfjnaclpecjelllocobm/app/heroes.component.tsfrom unknown origin. Could not find user data for request.
[8672:9248:0531/174721:ERROR:extension_protocols.cc(358)] Allowing load of chrome-extension://nochadnphaoigfjnaclpecjelllocobm/app/hero-detail.component.tsfrom unknown origin. Could not find user data for request.
[8672:9248:0531/174728:ERROR:extension_protocols.cc(358)] Allowing load of chrome-extension://nochadnphaoigfjnaclpecjelllocobm/app/dashboard.component.tsfrom unknown origin. Could not find user data for request.

Also, no breakpoint is ever hit while debugger is attached to NW.js.

galvesribeiro on 1 Jun 2016

It should be this issue: https://github.com/Microsoft/vscode-chrome-debug-core/issues/18

rogerwang on 1 Jun 2016

Hi Roger,
Yes, there is a trick/hack today on the debugger extension that I working with them to get it into the addin. I already pass that part. These errors On my last comment come from nw.js, not the debugger anymore.

Get Outlook for iOS

On Tue, May 31, 2016 at 9:19 PM -0700, "Roger Wang" [email protected] wrote:

It should be this issue: https://github.com/Microsoft/vscode-chrome-debug-core/issues/18

You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub:
https://github.com/nwjs/nw.js/issues/4919#issuecomment-222888617

galvesribeiro on 1 Jun 2016

We'll need to identify the location of the root cause -- whether it's in VS Code or in NW.js.

rogerwang on 1 Jun 2016

Sure, that is what I'm trying to do :)

Get Outlook for iOS

On Tue, May 31, 2016 at 9:27 PM -0700, "Roger Wang" [email protected] wrote:

We'll need to identify the location of the root cause -- whether it's in VS Code or in NW.js.

You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub:
https://github.com/nwjs/nw.js/issues/4919#issuecomment-222889429

galvesribeiro on 1 Jun 2016

@galvesribeiro This is due to vscode-chrome-debug-core module used by the VSCode extension. There are at least two issues in this module:

It accepts only Urls of normal web pages when connecting to remote debugging port (see chromeConnection.ts). For NW.js, the type should be either app or background_page. But it was skipped.
When setting breakpoints, it used isExtensionScript() to skip Urls with chrome-extension:// protocol (see chromeDebugAdapter.ts). For NW.js, apps are running under this protocol. Therefore it won't let you set breakpoints even with webRoot set.

Please follow up on the issue of Microsoft/vscode-chrome-debug-core#18.

ghostoy on 1 Jun 2016

👍2

@galvesribeiro BTW to set breakpoints, you should set webRoot to your application root folder and hack isExtensionScript to always return false.

ghostoy on 1 Jun 2016

👍2

close since the issue is not in NW.

rogerwang on 2 Jun 2016

👍2

Thanks @rogerwang and @ghostoy. In fact the only thing missing whas the isExtensionScript() hack. Now it works perfectly :) Will get in touch with MS folks about that. The debugging is working flawless :)

galvesribeiro on 2 Jun 2016

👍1

@galvesribeiro @rogerwang @ghostoy (Can any of you fill me in on what the solution for this is today)? Did MS fix anything? What should the launch.json file look like? (for NW.js)