Opening up the console in a browser shows the javascript line number of a function call or error message.
But I am using TypeScript which is being compiled to Javascript.
Is there a way I can get the line numbers for TypeScript?
I am using VSCode as my editor
There are source maps, but the simple thing to do is to navigate to the source, provided that for development it's not being uglified and rollified and minified, in that case you need source maps.
Otherwise simply using the generated JavaScript file usually points to what the issue might be in the source code. If this sounds cumbersome you can always open a side by side view of source and the built JS.
Related
I would like to allow a JavaScript program running in VisualStudioCode to use readline-sync, but when I try to use the
const input = require('readline-sync');
line that works in environments like Replit after causing that module to be added, I get an error message about not having the appropriate module. In trying to find an answer to this question, I have gotten the impression that modifying a "package.json" file is involved. However, I'm not sure exactly where this file is supposed to be and believe that I may not have one for my current project yet. When I use VSC's Command Palette to enter the
JavaScript: Go to Project Configuration
command, I get a popup in the lower-right corner that says
"Please open a folder in VS Code to use a TypeScript or JavaScript project
Source: TypeScript and JavaScript Language Features (Extension)"
I believe that the problem may have something to do with the fact that I have previously mainly used VSC for standalone code pages that interacted only with the console or with languages other than JavaScript and am not really familiar with how to set up a project that requires multiple files to work in conjunction in the VSC environment.
I am currently working on a web page development. I have used downloaded one external javascript file from CanvasJs and I am using it locally to add some dynamic functionality to a graph in my page. I am using only a small functionality from the file. How do i remove the dead line that I don't use? I don't know which lines are not being used!
Note: I am using the script file to draw a spline chart, but the script file contains code for many more graphs and functionalities. How do I remove those redundant functionalities. The script file is too big with all the functions that I don't use. I wish to reduce the file size by removing the redundant line of codes.
If you are certain that you want to remove all but the code that your application calls:
Find all of the functions that your code calls in the library.
Copy each of these functions into a new file.
In each of these functions, find all functions and any global variables that they reference and return to point 2.
When you have all of the referenced functions and variables in a separate file, try your code out on it in as many different ways as you can think of to make sure that you did not miss anything out.
Do this on the un-minified version of the library and then minify the resulting code, so that it is readable for you.
Another way of stepping through the code is to use the debugger built in to your browser, by setting a breakpoint on your own code and stepping through it, then finding that code in the library file.
If you think that you might need more functionality from the library however, weigh the cost over the wire against the effort of extracting only the required code. It might be best to use the full library or to find another more specialised library if possible.
I am a beginner in Javascript, I decided to practice Javascript by problem solving using it, I found an online judge that accepts Javascript V8 4.8.0 code.
So, I searched online to get that version of Javascript V8 on my machine, but I couldn't find any easy way, All the pages were explaining how to build it, and it seems to be a process that I don't need to go through.
Is there an easy way to compile and run command line apps written in Javascript on my machine?
Note: I don't want to use node.js because I tried using it's I/O and
as a beginner I think it is complex in some way.
Update: I found that package manager pbox.me which provides a version of V8 JavaScript Engine and I managed to install it.
Yet another problem appeared: whenever I try to run a js file writing d8 myfile.js in command line nothing happens as if it is an empty program, knowing that I tryied to d8.exe file and it is working, and I made sure the PATH is inserted in the environment variables.
What am I doing wrong?
The easiest way to get started with JavaScript is probably to use it in a browser. You can type simple things directly into the browser's JavaScript console (check the menu); or you can embed your code in a simple HTML document.
If you want, you can even pretty easily implement the readline()/print() functions, so you can pretend to be doing stdin/stdout based I/O: just read from an array of strings, and send output to console.log (or create DOM nodes if you want to be fancy and/or learn how to generate dynamic website content by hand).
Side note: V8 4.8 is severely outdated, don't use it to execute code you haven't written yourself.
Why using jquery.min.map if:
jquery = 242 ko
jquery.min + jquery.min.map = 83 + 125 = 208 ko (the map is even greater than the library)
And if we remove the comments, we will get a small jquery that could be easier to read (and to debug).
So, why using the map if it will only add more than 100 ko and an extra request?
What is the best practice?
Source maps are loaded only when the developer tools are active. Browsers won't load them for application's users.
Edit: It should be mentioned that there are 2 types of source maps. One which is an external file and there is a link to it in the actual file and another one which is embedded in the main file. Browsers actually have to load the entire file (i.e. including the embedded source map) for the second type.
Check https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more information.
That's called a source map. This answer goes into detail about what they are, how they work, and why you would want to use it.
EDIT
Extracted answer from the above SO link for posterity. Answered by #aaronfrost
The .map files are for js and css files that have been minified. They are called SourceMaps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the sourcemap, then any error would seem cryptic at best.
Same for CSS files. Once you take a SASS or LESS file and compile it to CSS, it looks nothing like it's original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
What is it for?
To de-reference uglified code
How can a developer use it?
You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file?
If you care about being able to debug production code easier, then yes, you should do it.
How does it get created?
It is created at build time. There are build tools that can build your .map file for you as it does other files. https://github.com/gruntjs/grunt-contrib-uglify/issues/71
Our project has more than 300 JSP files and more than 200 JavaScript files. I'd like to do some cleanup, removing unnecessary JS files. Even if the JSP includes the JS maybe none of the functions are used. The goal is to reduce both complexity and time needed to load the page. My IDE is Eclipse. Giving the dynamic nature of JavaScript I guess it will be hard or even impossible.
If it's conceivable that the application can be tested with a lot of coverage (i.e. going through every dialog, error message, and situation imaginable) you may be able to work with your access log files - compare the list of JS files to those fetched after period x of heavy use.
An alternative implementation of this would be setting up a "honeypot" (see my answer to this question).
Both these methods are of course "soft" in that their quality relies in how throroughly the application is actually used during testing time.
If you have any way of grepping all script references, that would be preferable. Maybe you can do a global search on {anything}.js, that would match most ways how to embed a JS file.
To find out what functions and javascript files are used in a project, you need code coverage tools, like JSCoverage or Code coverage for Firebug. These tools will return the functions used and the files used. Using these with an automated test suit like the Selenium or randomized testing should give you a fairly good idea which files are loaded.
If the files are loaded dynamically, you can also use Firebug or Fiddler to log the requests for the JS files.
Unfortunately if you want certainty, not just extremely high likeliness that you get with the above tools, you would have to generate a calling graph for your entire webapp, maybe using a Javascript Compiler, like Rhino...