We have some JavaScript that is output generated by a compiler that also created a source-map.
Now I'd like to do some simple work on this output JS like adding some lines or stripping some code. But it has to be done in a way that would also update the source-map so it stays valid for the changed code.
Is this possible?
You need to work on the source code, or you will have to generate a new sourcemap from the new one.
Related
I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.
Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;
I found below JavaScript code snippet in adsense's developers.google.com site which allows me to inject external JS file into an iFrame when added few other parameters.
(function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
When I tried to use above snippet in a Typescript file it gives me an error(shown in the picture down below). I tried fixing it but nothing was successful.
Please help me fix this code snippet. I would like to use that snippet in an angular app component.
Typescript has a problem with using multiplication on a date. In this code, multiplication is being used to implicitly coerce the Date to a number. However, you can just accomplish the same thing explicitly.
(new Date).valueOf()
I know this sounds like a strange thing to ask, but is there anyway to get the current line number in a TypeScript script so that it will be emitted to the resulting JavaScript code? I guess I'm looking for something like C's preprocessor
__LINE__
variable.
Edit: I'm asking about the current line in the TypeScript source file (which will usually be different from the corresponding line number in the resulting JavaScript file).
I think souremaps will do what you need. Sourcemaps are a way to map a javascript file back to it's unmodified state.
If you configure your typescript compiler to include sourcemaps then Chrome and other dev tools can reference your typescript files. The result would look like this:
//index.ts
console.log('hey, here is a log!');
console.error('hey, here is an error');
Which would produce this in the console of Chrome's dev tools:
hey, here is a log! index.ts:3
hey, here is an error index.ts:5
The line numbers would be correct even though the typescript complier would strip out the empty lines and reformat the code.
Hope that helps!
I would like to edit CKeditor source file, which is called ckeditor.js. It is a Javascript file but it is completely unindented and without line breaks. How can indent the code to make it readable by human? I tried "gg=G" under vim with no success
The source is not only missing line breaks, but also the variables names are minified.
If you want to edit the CKEditor sources you should checkout the sources from Github and do your changes in a local branch. This way you are able to bring your modified CKEditor always up-to-date.
You are searching for "unminifier" or "beautifier" similar to this
I need to modify WebDriverJS for my purposes. The compiled source is giving me a hard time debugging, though. Describing function names and comments would help me out big time! So I was wondering whether it is possible to compile WebDriverJS without minimizing it's content.
The build.desc for the JavaScript compilation is using js_binary which is using Google Closure Compiler. Anyone of you know how to compile it and preserve functionnames and comments? This would rather be a merge of all sources then a compilation.
Thanks to Chads Post in "Potential differences between compiled and uncompiled Javascript" I've taken a deeper look at the flags of closure compiler.
--compilation_level=WHITESPACE_ONLY preserves function and variable names
--formatting=PRETTY_PRINT doesn't remove linebreaks
--formatting=PRINT_INPUT_DELIMETER gives me a better overview in which file to search for the source
Unfortunately I still couldn't figure out how to save the comments, but thats just a small problem since I can look them up in the source code.
Update:
Seems like the compilation_level doesn't remove the goog.required-calls. I've got to remove them somehow, because the script doesn't work with them.
Update 2:
I've removed all goog.require($mod) and goog.provide($mod) calls and defined Objects where needed (typically to find right after the // Input $int comments). It's working now.