Debugging ES6 modules with V8 inspector

[Nupoor Kotasthane]

Hi all,

Is the V8 inspector equipped to debug ES6 modules? Our product embeds V8 and and we integrate with the V8 inspector and use it to debug JavaScript. We have noticed issues when we try to debug ES6 modules with the inspector.

Thanks,

Nupoor

[joko suwito]

Thank you👍

--
--
v8-users mailing list
v8-u...@googlegroups.com
http://groups.google.com/group/v8-users
---
You received this message because you are subscribed to the Google Groups "v8-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to v8-users+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/v8-users/0152cac7-5846-40bd-ab80-7717175387e2o%40googlegroups.com.

[Ben Noordhuis]

We haven't noticed any major issues in Node.js when it comes to
debugging ES modules. Can you go into details?

[Nupoor Kotasthane]

Hi Ben,

We have embedded V8 version 6.7 in our product. We use it to run and debug JavaScript. While debugging scripts is working okay, debugging ES6 modules using the inspector has this one problem. When using Debugger.evaluateOnCallFrame to inspect variables we keep getting an inspector response with reference errors saying the variables are not defined. This is true for all locally declared variables within the current scope in the "mjs" module (I do not see this problem with the imported module, only the importing module). 

It seems like symbols are not generated for the importing 'mjs' module. So do we have to do anything special for modules for this to work? I can share my example if and inspector responses if that will help.

Thanks,

Nupoor

[Nupoor Kotasthane]

I also notice that the 'this' object in the Debugger.CallFrame objects have their 'type' set to 'undefined' when debugging ES6 modules. I also notice that the variables declared in the starting module are missing from the scope when I try to inspect the scope object with Runtime.getProperties.  Is this expected behavior?

[Ben Noordhuis]

On Thu, Jun 25, 2020 at 2:35 AM Nupoor Kotasthane <nupoo...@gmail.com> wrote:
>
> I also notice that the 'this' object in the Debugger.CallFrame objects have their 'type' set to 'undefined' when debugging ES6 modules. I also notice that the variables declared in the starting module are missing from the scope when I try to inspect the scope object with Runtime.getProperties. Is this expected behavior?
>
>
>
> On Tuesday, June 23, 2020 at 2:56:57 PM UTC-7, Nupoor Kotasthane wrote:
>>
>> Hi Ben,
>>
>> We have embedded V8 version 6.7 in our product. We use it to run and debug JavaScript. While debugging scripts is working okay, debugging ES6 modules using the inspector has this one problem. When using Debugger.evaluateOnCallFrame to inspect variables we keep getting an inspector response with reference errors saying the variables are not defined. This is true for all locally declared variables within the current scope in the "mjs" module (I do not see this problem with the imported module, only the importing module).
>>
>> It seems like symbols are not generated for the importing 'mjs' module. So do we have to do anything special for modules for this to work? I can share my example if and inspector responses if that will help.
>>
>> Thanks,
>> Nupoor

It's possible I'm misunderstanding you but it sounds like it's working
as expected.

ES modules run in strict mode. Function calls (not method calls) have
`this` set to `undefined`, and top-level variables are local to the
module, not global.

If that's not what you mean, can you share some example code and
expected vs. actual output?

[Nupoor Kotasthane]

Hi Ben,

Here's the example I have been using:

I have two mjs files:

sample.mjs:

import {a} from '/testmod.mjs';

let p = 9;

var t1 = 1;

var t2 = 2;

var t3 = 3;

var t4 = 4;

var temp = 1;

temp = 2* temp;

temp = 3* temp;

temp

testmod.mjs:

export var a = 10;

export var b = 20;

export var c = 30;

Once I start debugging sample.mjs, I step over a little and reach line 5 and I get the following notification from inspector:

{

  "method": "Debugger.paused",

  "params": {

    "callFrames": [

      {

        "callFrameId": "{\"ordinal\":0,\"injectedScriptId\":1}",

        "functionName": "",

        "functionLocation": {

          "scriptId": "11",

          "lineNumber": 0,

          "columnNumber": 0

        },

        "location": {

          "scriptId": "11",

          "lineNumber": 5,

          "columnNumber": 9

        },

        "url": "/sample.mjs",

        "scopeChain": [

          {

            "type": "module",

            "object": {

              "type": "object",

              "className": "Object",

              "description": "Object",

              "objectId": "{\"injectedScriptId\":1,\"id\":19}"

            },

            "startLocation": {

              "scriptId": "11",

              "lineNumber": 0,

              "columnNumber": 0

            },

            "endLocation": {

              "scriptId": "11",

              "lineNumber": 10,

              "columnNumber": 0

            }

          },

          {

            "type": "global",

            "object": {

              "type": "object",

              "className": "global",

              "description": "global",

              "objectId": "{\"injectedScriptId\":1,\"id\":20}"

            }

          }

        ],

        "this": {

          "type": "undefined"

        }

      }

    ],

    "reason": "other",

    "hitBreakpoints": []

  }

}

At this point I want to inspect variable "p". A Debugger.evaluateOnCallFrame request to inspector with the parameter "p" returns:

{

"id": 12,

"result":

{

"result":

{

"type": "object",

"subtype": "error",

"className": "ReferenceError",

"description": "ReferenceError: p is not defined\n at eval (eval at <anonymous> (/sample.mjs:6:10), <anonymous>:1:1)\n at /sample.mjs:6:10",

"objectId": "{\"injectedScriptId\":1,\"id\":21}"

}

,

"exceptionDetails":

{

"exceptionId": 1,

"text": "Uncaught",

"lineNumber": 0,

"columnNumber": 0,

"scriptId": "14",

"stackTrace":

{

"callFrames":

[

{

"functionName": "",

"scriptId": "14",

"url": "",

"lineNumber": 0,

"columnNumber": 0

}

,

{

"functionName": "",

"scriptId": "11",

"url": "/sample.mjs",

"lineNumber": 5,

"columnNumber": 9

}

]

}

,

"exception":

{

"type": "object",

"subtype": "error",

"className": "ReferenceError",

"description": "ReferenceError: p is not defined\n at eval (eval at <anonymous> (/sample.mjs:6:10), <anonymous>:1:1)\n at /sample.mjs:6:10",

"objectId": "{\"injectedScriptId\":1,\"id\":22}"

}

}

}

}

The expected outcome here would have been to see the actual value of variable "p". I am seeing similar response for all variables declared in sample.mjs and that is unexpected. However, the imported object "a" can does not yield the same response. Inspector returns the right value for "a". 

At the same point if I send Runtime.getProperties request to V8 with the current module scope's object id: '{\"injectedScriptId\":1,\"id\":19}' as parameter, I only see the following:

{

"id": 15,

"result":

{

"result":

[

{

"name": "a",

"value":

{

"type": "number",

"value": 10,

"description": "10"

}

,

"writable": true,

"configurable": true,

"enumerable": true,

"isOwn": true

}

]

}

}

I do not see the other variables in sample.mjs in the above response.

Do you still think this is expected behavior or do you suspect there is another issue here?

Please let me know. Any help will be great!

Thanks,

Nupoor

[Nupoor Kotasthane]

The observation here was that we are able to inspect, only the objects that are imported/exported, using Debugger.evaluateOnCallFrame. For all the other objects, when evaluated, we just get reference errors.  

Any insight on why this may be happening will be great!

Thanks,

Nupoor

[Nupoor Kotasthane]

I am able to reproduce the same behavior with Node.js v10.21.0. 

[Isiah Meadows]

Node v10 uses V8 6.8 (two years old), and the latest version of V8 is 8.4.