Debug SyNode using VSCode

mpv · 2017-04-01 14:28:14

As @George notes in yhis post where is a plugin for VSCode what implement a FireFox Remote Debug Protocol (FRDP) directly. This open a posisbility to debug a SyNode based apps from IDE (great!)

Since inside SyNode where is no DOM, we expose a SyNode runtimes as a add-ons for FRDP and implement a subset of FRDP commands (unit SyNode\core_modules\DevTools\Debugger.js) - enough to use a build-in FireFox debugger.

After playing with VSCode I found:
VSCode debugger launch.json config should be:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "SyNode",
            "type": "firefox",
            "request": "attach",
            "host": "localhost",
            "port": 6000,
            "reAttach": false,
            "addonType": "webExtension",
            "addonPath": "${workspaceRoot}/addon",
            "log": {
                "fileName": "${workspaceRoot}/log1.txt",
                "fileLevel": {
                    "default": "Debug"
                }
            },
            "pathMappings": [{
                "url": "D:",
                "path": "D:"
            }]
        }
    ]
}

In case of debuging add-on VSCode plugin try to "renstall" add-on from sources, so we need to emulate a fake add-on
a) create fake TCP server what accept a connections on port 8888 (on FireFox dev edition this port is used to accept "add-on reinstall command") - I done this by adding withFakeXPIInstaller parameter to TSMEngineManager.startDebugger
b) create a folder `addon` (actually addonPath from debug configuration) and file `addon\manifest.json`with content:

  { "applications": { "gecko": { "id": "server1.conn1.addon0"  } } }

And after this I'm able to connect from VSCode to SyNode, but VSCode use some commands, not implemented in our FRDP implementation, so I will try to found workaround.....

George · 2017-04-01 18:24:38

Great!

This opens a possibility to debug a SyNode based apps from IDE (great!)

Not only SyNode, vscode supports multi debug sessions, that means we should be able to debug client and server side in same time, from single IDE

but VSCode use some commands, not implemented in our FRDP implementation

Does this prevent breakpoints from working? (or i missed something, debugger skips my breakpoints ).
I created test.js in addon folder and executed script from SyNode via require("./addon/test.js").

Last edited by George (2017-04-01 19:10:33)

George · 2017-08-29 18:01:48

~~Should break points work in current implementation?~~
Looks like vscode debug plugin trying to attach to tab instead of attaching to addon. That's how it seen from wireshark.
In addition, firefox can attach, i think that issue on vscode plugin side. Well, i'll post here if get solution.

Last edited by George (2017-08-29 19:16:49)

George · 2017-08-31 19:37:22

On GIT available debugger branch that going to support SyNode.
Now, all changes available from main branch, no need to install special version of debugger, use plugin library from vscode.

Some fixes also required on SyNode side.
Here is some news, in case if anyone would like to enjoy.

Last edited by George (2017-09-22 11:17:03)

George · 2017-09-22 11:40:16

With debugger developer we done some work to provide compatibility.
I patched SyNode sources to get work debugger correctly, modules placed in folder Units_PatchedModules
I'm not sure about one place, where i get thread id (in SyNodeRemoteDebugger.pas), it may be incorrect thread id (i want pass to debugger thread id that processing corresponding smEngine).
Also i patched JS code (Win64\core_modules\). Beyond compare may help evaluate differences.

Here is compiled project with sources (created in delphi 10.2).
Project include use cases of both SyNode demos with additional feature demonstration.
In addition it include vscode project written in typescript (Win64\web.apps\app1\).
Debugging work, even more, source maps work too.

@mpv, take a look, some (or almost all) changes may be imported to SyNode, as well as demo project.

Last edited by George (2017-09-22 11:54:23)

mpv · 2017-09-23 11:55:43

I'm check a demo - good work! Thanks for contributing!
I'm synchronize SyNode with my latest changes see [60581c5b3a] and start to apply your patches.
George - in case you try to switch to a pull requests in future (this articles can help - English, Russian):
- merging will be much easier
- GitHub will remember you as a contributor to mORMot - as for me contributors count is an important indicator for a projects on GitHub (and the stars, of course)

Last edited by mpv (2017-09-23 12:05:42)

mpv · 2017-09-30 11:42:49

Yeh! After merging @George patch's and some dirty hacks in firefox-remote-debugger VSCode plugin I'm able to debug my real synode-based app (>1000 server side js files) in VSCode (see pic below)
In truth, it is much more convenient than native FireFox debugger. Now I think how to reduce both synode & firefox to one protocol..

Debuggin real synode app in VSCode

mpv · 2017-09-30 13:37:17

Finally out - see [f9821cf707]
Some tips:
1) we do not need a manifest.json file. Instead better to create a package.json (use npm init -y) in the webAppRoot (app1 in George sample) folder and add there a property "id": "nameOfEngineToDebug":

{
  "id": "app1",
  "name": "app1",
  "version": "1.0.0",
  "description": "Debugging SyNode using VSCode",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "George",
  "license": "ISC"
}

and in the VSCode launch.json addon path will be "addonPath": "${workspaceRoot}/" (without lib)

2) We try to keep SyNode core_modules folder as much close to nodejs as possible, so better not to extend in with non-node files

Last edited by mpv (2017-09-30 13:54:20)

George · 2017-09-30 14:25:15

What about synode.js, i was implemented automatic core modules search with index.js support (when module has index.js it may be loaded as folder name).
With that change, new modules will not require changes in synode.js. Pretty handy isn't it?

dirty hacks in firefox-remote-debugger VSCode plugin

What changes was necessary? Version 1.6.0 of debugger work, only issue was path comparing that case sensitive (afaik it will be insensitive soon).

Now I think how to reduce both synode & firefox to one protocol

And you can cooperate (suggestions, ideas or may be pull requests) with debugger plugin developer
To make both projects better to work together.

mpv · 2017-09-30 14:47:50

George wrote:

What about synode.js, i was implemented automatic core modules search with index.js support (when module has index.js it may be loaded as folder name).
With that change, new modules will not require changes in synode.js. Pretty handy isn't it?

We try to sync a SyNode core modules with NodeJS core modules. Because of nodeJS compatibility reason we do not want to extend it with something... Core modules work in very special way.
May be in future we did as nodeJS and move all core modules to a application resources

dirty hacks in firefox-remote-debugger VSCode plugin

I'm actually confused a little because my project contains a package.json and FireFoxProfile module prefer it to the manifest.json. After debugging a debugger I found what adding a "id": "engineName" ("id": "app1" in your sample) section to a package.json solve all problems. So no hacks is required

Thanks again for your patch!

Last edited by mpv (2017-09-30 14:50:11)

George · 2017-09-30 15:00:08

mpv · 2017-09-30 15:19:30

I'm write a small VSCode configuration manual. It is written for UnityBase, but it is applicable for any SyNode based application.

There is a issue in debugger - it's fails in case application create multiple JS Engine (in FireFox>54 also). Something changed between FF54 and FF55 in debugger protocol. I'm still can't find reeason

mORMot Open Source

#1 2017-04-01 14:28:14

Debug SyNode using VSCode

#2 2017-04-01 18:24:38

Re: Debug SyNode using VSCode

#3 2017-08-29 18:01:48

Re: Debug SyNode using VSCode

#4 2017-08-31 19:37:22

Re: Debug SyNode using VSCode

#5 2017-09-22 11:40:16

Re: Debug SyNode using VSCode

#6 2017-09-23 11:55:43

Re: Debug SyNode using VSCode

#7 2017-09-30 11:42:49

Re: Debug SyNode using VSCode

#8 2017-09-30 13:37:17

Re: Debug SyNode using VSCode

#9 2017-09-30 14:25:15

Re: Debug SyNode using VSCode

#10 2017-09-30 14:47:50

Re: Debug SyNode using VSCode

#11 2017-09-30 15:00:08

Re: Debug SyNode using VSCode

#12 2017-09-30 15:19:30

Re: Debug SyNode using VSCode

Board footer