node-inspector / node-inspector

Node.js debugger based on Blink Developer Tools

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Node-inspector not working with inline source map

adamloving opened this issue · comments

I'm not sure if this is a node-inspector issue, or a Webkit issue. I couldn't get node-inspector to work with inline source maps (using the sourceMappingURL=data:application/json;base64,... syntax)

Here's my test. The test file (test.coffee):

debugger
console.log 'Hello world'

From that, generate a map using...

fs = require('fs');
CoffeeScript = require('coffee-script');

answer = CoffeeScript._compileFile('inline/test.coffee', true);
code = fs.readFileSync('inline/test.coffee', { encoding: 'utf-8' });

mapJSON = answer.sourceMap.generate({
  sourceFiles: ['test.coffee'],
  generatedFile: ['testjs'],
  inline: true
}, code)

console.log('map: ----------');
console.log(mapJSON);
console.log('base64: ----------');
console.log(Buffer(mapJSON).toString('base64'));

This makes a map that looks like

{
  "version": 3,
  "file": [
    "test.js"
  ],
  "sourceRoot": "",
  "sources": [
    "test.coffee"
  ],
  "names": [],
  "mappings": "AAAA;AAAA,WAAA;AAAA,EACA,OAAO,CAAC,GAAR,CAAY,aAAZ,CADA,CAAA;AAAA",
  "sourcesContent": [
    "debugger\nconsole.log 'Hello world'"
  ]
}

So the compiled file, with the base64 encoded sourceMappingURL looks like

// Generated by CoffeeScript 1.7.1
(function() {
  debugger;
  console.log('Hello world');

}).call(this);

//# sourceMappingURL=ewogICJ2ZXJzaW9uIjogMywKICAiZmlsZSI6IFsKICAgICJ0ZXN0LmpzIgogIF0sCiAgInNvdXJjZVJvb3QiOiAiIiwKICAic291cmNlcyI6IFsKICAgICJ0ZXN0LmNvZmZlZSIKICBdLAogICJuYW1lcyI6IFtdLAogICJtYXBwaW5ncyI6ICJBQUFBO0FBQUEsV0FBQTtBQUFBLEVBQ0EsT0FBTyxDQUFDLEdBQVIsQ0FBWSxhQUFaLENBREEsQ0FBQTtBQUFBIiwKICAic291cmNlc0NvbnRlbnQiOiBbCiAgICAiZGVidWdnZXJcbmNvbnNvbGUubG9nICdIZWxsbyB3b3JsZCciCiAgXQp9

Then run

$ node-debug test.js

Sadly, there is no test.coffee anywhere to be found in the debugger.

inline sourcemap broken

I'll commit this test code over here: https://github.com/adamloving/coffeescript-sourcemap-demo

What happens when you reference your generated js file from an index.html and run it in Chrome Dev Tools? Is the inline source map picked up?

<head>
<script src="inline/test.js"></script>
</head>

AFAIK source maps inlined in a data URL works. The problem is probably in the fact that the coffee script source is inlined in the source map.

Possibly related: #224.

I'm having a similar issue. My setup is a bit different but ultimately, the output is the same.
I put up a minimal test case there: https://github.com/geekingfrog/nodeInspectorIssue401
Source maps are picked up with chrome but not with node-inspector. Same bug for inline and external source maps.

IMO the sourceMappingURL is not a valid data URL per RFC2397, as it is missing schema and other metadata.

The correct URL should look like this:

//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjog...

You can use strong-data-uri to generate a correct data URL from a node application.

See also #207 which implemented support for embedded source maps as requested in #204.

I suppose we need to relax the parser to treat any non-http(s) url as a data url. The change should be fairly trivial to implement, start by looking at the code added by #207.

+1 running into this issue using babel with inline source maps.

👍 also babel with inline source maps, e.g.,
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW...

I am using node-inspector@0.12.3 and the inline source maps generated by tsc (i.e., TypeScript compiler) appear to work. I also tested with babel and node-inspector is able to pick up the source map just fine.

//# sourceMappingURL=data:application/json;base64,... is what is generated for both tsc and babel.

jashkenas/coffeescript#4111 would allow inline sourcemaps natively in coffeescript. I tested this with node inspector and it seems to work so this could probably be closed.

@michaelBenin inline sourcemaps are already in babel and @ericvw has said that this works with node-inspector.

Unless i'm missing your meaning?

This can probably be closed. There are some other issues with babel's inline sourcemap merging (i.e., babel/babel#2336), but I have been using inline sourcemaps for the past month now with no problems.

Cool, I am glad inline source maps work for you folks. I am closing this issue per the comment above.

I am also encountering the same (similar) issue as @michaelBenin i.e. the above image is exactly the same for me. Node Inspector 0.12.3, same result for Babel 5 and Babel 6.

The only thing I can think of is that the code is using babel-core/register rather than generating ES5 files. Is this likely to make a difference?

@damonmcminn I get the same thing running a similar setup.

I've found that on my personal computer which is 5 years old I have this issue. On my work computer which was issued last year it works fine.