I have chrome 39.0.2171.71, and I have enable source mapping check box enabled, but hx files are empty in debugger, any one can help explain why source mapping does not work?
EDIT
I am not using a server, I am opening the HTML file directly in chrome
In chrome network tab, I can see:
(failed)
net::ERR_FILE_NOT_FOUND
file:///C:/Users/samir.s.MOTAHIDAEDU/Documents/haxe/quiz-generator/bin/file:/C:/Users/samir.s.MOTAHIDAEDU/Documents/haxe/quiz-generator/src/com/quiz/Question.hx
I compile the js project, like this:
haxe -debug --each -lib createjs -lib Actuate -cp src -js C:/Users/samir.s.MOTAHIDAEDU/Documents/haxe/quiz-generator/bin/Quizgenerator.js -main Main -resource quiz.txt#quiz_text_file -lib random
EDIT 2
Where can I set the source map of my project? I think I just have to set the path correctly, I am on Windows 7
I believe this is a Google Chrome bug, since it cannot load the local files.
You could try to compile with the compiler flag -D source-map-content. This include the hx sources as part of the JS source map. For me this works pretty good.
Related
I installed chrome beta - Version 60.0.3112.24 (Official Build) beta (64-bit)
In chrome://flags/ I enabled 'Experimental Web Platform features' (see https://jakearchibald.com/2017/es-modules-in-browsers)
I then tried:
<script type="module" src='bla/src/index.js'></script>
where index.js has a line like:
export { default as drawImage } from './drawImage';
This refer to an existing file drawImage.js
what I get in the console is error in
GET http://localhost/bla/src/drawImage
If I change the export and add ".js" extension it works fine.
Is this a chrome bug or does ES6 demands the extension in this case ?
Also webpack builds it fine without the extension !
No, modules don't care about extensions. It just needs to be a name that resolves to a source file.
In your case, http://localhost/bla/src/drawImage is not a file while http://localhost/bla/src/drawImage.js is, so that's where there error comes from. You can either add the .js in all your import statements, or configure your server to ignore the extension, for example. Webpack does the same. A browser doesn't, because it's not allowed to rewrite urls arbitrarily.
The extension is part of the filename. You have to put it in.
As proof of this, please try the following:
rename file to drawImage.test
edit index.js to contain './drawImage.test'
Reload, and you'll see the extension js or test will be completely arbitrary, as long as you specify it in the export.
Obviously, after the test revert to the correct/better js extension.
ES6 import/export need “.js” extension.
There are clear instructions in node document:
Relative specifiers like './startup.js' or '../config.mjs'. They refer to a path relative to the location of the importing file. The file extension is always necessary for these.
This behavior matches how import behaves in browser environments, assuming a typically configured server.
https://nodejs.org/api/esm.html#esm_import_expressions
I installed chrome beta - Version 60.0.3112.24 (Official Build) beta (64-bit)
In chrome://flags/ I enabled 'Experimental Web Platform features' (see https://jakearchibald.com/2017/es-modules-in-browsers)
I then tried:
<script type="module" src='bla/src/index.js'></script>
where index.js has a line like:
export { default as drawImage } from './drawImage';
This refer to an existing file drawImage.js
what I get in the console is error in
GET http://localhost/bla/src/drawImage
If I change the export and add ".js" extension it works fine.
Is this a chrome bug or does ES6 demands the extension in this case ?
Also webpack builds it fine without the extension !
No, modules don't care about extensions. It just needs to be a name that resolves to a source file.
In your case, http://localhost/bla/src/drawImage is not a file while http://localhost/bla/src/drawImage.js is, so that's where there error comes from. You can either add the .js in all your import statements, or configure your server to ignore the extension, for example. Webpack does the same. A browser doesn't, because it's not allowed to rewrite urls arbitrarily.
The extension is part of the filename. You have to put it in.
As proof of this, please try the following:
rename file to drawImage.test
edit index.js to contain './drawImage.test'
Reload, and you'll see the extension js or test will be completely arbitrary, as long as you specify it in the export.
Obviously, after the test revert to the correct/better js extension.
ES6 import/export need “.js” extension.
There are clear instructions in node document:
Relative specifiers like './startup.js' or '../config.mjs'. They refer to a path relative to the location of the importing file. The file extension is always necessary for these.
This behavior matches how import behaves in browser environments, assuming a typically configured server.
https://nodejs.org/api/esm.html#esm_import_expressions
I have a minimized file in production, with a an error handler that logs the errors, as well as the source map that was generated when I minified the file, however I have no way to map the errors to my source file since the errors are in a log and do not occur in a chrome or firefox where minified files and sourcemaps are easily consumed. Is there an app or a tool that will convert the error reporting from the minified file using the source map I have generated to the location in the original unminified files? So to be completely clear I have
dist.min.js
which is made up of several js files concated and then minified with uglify.js. I have
dist.min.js.map
which is the mapfile generated when the uglify minified the file. What I need to do is take the error
ERROR: Uncaught TypeError: Cannot call method 'indexOf' of undefined, dist.min.js:1
"TypeError: Cannot call method 'indexOf' of undefined
at distmin.js:1:21815 at ab.event.dispatch (dist.min.js:3:25564)
at q.handle (dist.min.js:3:22314)"
and figure out where that error is actually happening in my original source code. I know how to use sourcemaps with Chrome, but is there an external tool that will allow me to manually enter the line and column and bring up the location in my source code?
You can use mozilla's source-map library to reverse-map to the original positions, as follows:
var smc = new SourceMapConsumer(rawSourceMap); // <-- put map in there
console.log(smc.originalPositionFor({ // <-- plug positions here
line: 2,
column: 28
}));
Output is similar to:
{
source: 'http://example.com/www/js/two.js',
line: 2,
column: 10,
name: 'n'
}
The example is straight from Mozilla's documentation. The same library is used to generate the source-maps in uglifyjs (links to the Mozilla project when mentioning source-map generation).
Since there wasn't a GUI tool already built for this, I quickly built one based on Electron and the Mozilla Source-Map library that #tucuxi pointed out.
You can find it at its GitHub page: https://github.com/kriserickson/sourcemap-translator.
Uglify.js has a thing named source map for such functionality. Please use following flag with command:
--source-map yoursource.min.js.map
Whole command looks like:
uglifyjs yoursource.js -o yoursource.min.js --sourcemap yoursource.min.js.map
More info:
http://tarantsov.com/WorkflowThu/source-maps-with-coffeescript-and-uglify-js/
I have SDK 1.13 and I want to use pageload API to give the alert message when html form is loaded in firefox browser. but I'm getting an error on console: require is not defined.
I have linked cfx file of add on SDK to file system directory:
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
Still, I am not able to solve this error. Here is my code (Included in XUL file):
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.html",
contentScript: 'window.alert("Page matches ruleset");'
});
I assume you've installed the SDK and have run bin\activate within your extension before trying cfx run, right?
You can't run this stuff from an XUL file, which is why require... wont work. All of this needs to be in a main.js (in the lib folder). You'll need to communicate via the content script that you'll write (in the data folder). When the html loads (I'd add a window.listener or something from the content script) you'll use port.emit("loaded") or something similar and then you'll have to listen in the main.js with something like addon.port("loaded",somefunction). There's a lot of good documentation on this!
XUL files is quite an opposite of SDK modules. SDK and XUL Comparison.
I want to run some custom batch code just before every build. In a VS<11/C# app I could set the pre-build events in the project settings. I can't find similar settings in a javascript metro VS11 solution.
Anyone know where it is, or if the option is gone (!) what kind of workaround I can do in its place?
You can use the BeforeBuild target in the Visual Studio .jsproj file to accomplish this:
<Target Name="BeforeBuild"></Target>
<Target Name="AfterBuild"></Target>
To get here:
Right-click your project in Visual Studio and choose Open Folder in Windows Explorer
In Explorer, right-click the .jsproj file and choose Open With... and choose an editor like Notepad
Scroll to the bottom of the file and you'll notice these two Target sections commented out
Uncomment the BeforeBuild target and add your custom step inside of it. You can use the element to execute a command line script; the same $ variables are available as in C# pre-build steps (e.g. $(ProjectDir)). You can do more than call command line scripts in a Target, but this is closest to what you would normally do with C# pre-build steps.
As an example, the following code would call a batch file named processFile.bat passing it a path to default.js in the project root and an output path to create a file named output.js in the project's output directory (e.g. /bin/Debug in Debug mode):
<Target Name="BeforeBuild">
<Exec Command="processFile.bat "$(ProjectDir)default.js" "$(OutDir)output.js"">
</Target>
Note: The " is on purpose inside of the Command arguments, this makes sure the two parameters are quoted when passed to processFile.bat and called via cmd.exe.