I load a script from a file, then I use eval to generate javascript code like this:
var code = fs.readFileSync('myfile'); var shiftedCode= 'function(param) {' + code + '}\n'+ '//# sourceURL=myfile'; eval(shiftedCode)
The problem is when i put a breakpoint or debugger inside the code, it stops two lines after the correct one because of the added chars at the beginning I suppose.
Is there a way to shift the sourceURL to the correct start point maybe using sourcemaps ?
Thank you in advance for your help.
4 Answers
Answers 1
Defining the problem
I see that you're trying to import Javascript code from one page to another and you're facing some problems (You defined one and I will define another one):
- The sourcemaps/debugger problem:
- First, I don't recommend building the sourcemap in the run time. Tools like
Gulp
,Grunt
andWebpack
are made to help you with those use cases and will let you focus on the business logic and keep you away from these kinds of problems. - Second Think about someone who will use this code in another page. Do you think that shifting the sourcemap would be fine? It would be the every time shift!
- Possible solution: This
lib
also can help you with your use case. Generate new code first, then run it.
- First, I don't recommend building the sourcemap in the run time. Tools like
var offsetLines = require('offset-sourcemap-lines'); var conv = require('convert-source-map'); var fs = require('fs'); var code = fs.readFileSync('myfile'); var originalMap = conv.fromSource(code).toObject(); var codeBody = conv.removeComments(code); var offsettedMap = offsetLines(originalMap, 1); // One line to be shifted var newSourceMapComment = conv.fromObject(offsettedMap).toComment(); var shiftedCode= 'function(param) {\n' + codeBody + '}\n' + newSourceMapComment; eval(shiftedCode)
- Be Careful! You're using the dangerous
eval()
:- Using
eval()
can open a program up to several different injection attacks. The use ofeval()
in most contexts can be substituted for a better, alternative approach to a problem. - It results in slow code.
- MDN: Don't use
eval()
needlessly!eval()
is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run eval() with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage/extension. More importantly, third-party code can see the scope in whicheval()
was invoked, which can lead to possible attacks in ways to which the similar Function is not susceptible.
eval()
is also generally slower than the alternatives, since it has to invoke the JS interpreter, while many other constructs are optimized by modern JS engines.
There are safer (and faster!) alternatives toeval()
for common use-cases.
- Using
Recommendations
As we agreed, you're trying to import some code. So, why don't you just use one of the modularity systems for Javascript like AMD, RequireJS, CommonJS, ES6 module feature,...
Assume you'll use ES6 modules, it would be very straight forward. You will need to export myfile
script as a module and import it anywhere and that's it
// myfile.js export function sum (x, y) { return x + y } // someApp.js import {sum} from "myfile" console.log(sum(10, 20));
Answers 2
What about that solution . instead of running the code with eval
use Function constructor
myfile.js
var a = 123; console.log(a, param1, param2);
loader.js
var code = fs.readFileSync('myfile.js'); var notShiftedCode = code + '\n//# sourceURL=myfile' var f = new Function('param1', 'param2', code2) f(456,678)
I checked that on chrome devtool and it look very nit ( go into the function with F11)
Answers 3
you can use below package offset-sourcemap-lines
var offsetLines = require('offset-sourcemap-lines'); var conv = require('convert-source-map'); var fs = require('fs'); var codeWithSourceMapComment = fs.readFileSync('/path/to/code-with-sourcemap-comment.js', 'utf-8'); var originalMap = conv.fromSource(codeWithSourceMapComment).toObject(); var header = 'function(param) {' + code + '}\n'; var offset = header.match(/\n/g).length + 2; //you might need to work on this var offsettedMap = offsetLines(originalMap, offset); var codeBody = conv.removeComments(codeWithSourceMapComment); var newSourceMapComment = conv.fromObject(offsettedMap).toComment(); console.log(header + codeBody + '\n' + newSourceMapComment);
Answers 4
I'm digging into sourcemap 'sections' property. From the specs, this could solve my problem by setting the starting offset: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.535es3xeprgt
But the main problem is that I can't find debug tools using this spec: seems widely implemented or not at all.
'offset-sourcemap-lines' is a valuable hack to solve the problem, but it can also offset dependent sourcemaps during merging for example.
0 comments:
Post a Comment