I'm writing code for a library consumed by another program that get compiled and deployed. I have followed these steps to edit my javascript directly in the browser but my changes are never applied.
Can you not edit a javascript file part of a library in place?
You should be able to edit the file. See my answer for this other question. Remember to press Command+S or Control+S to commit your changes.
I found what I was doing wrong. I needed to set a flag to false in my code base to use uncompiled javascript.
Related
I have found the settings in Visual Studio Code to enable type checking for JavaScript in JS files. Such that: Bad code is highlighted and it also shows the reason why it's bad code
This behavior does not occur for JavaScript code in Vue files. I have searched through all the settings in Visual Studio Code. I have scoured the internet for any extension that can do this for me to no avail.
How can I make my Vue files type-check the JavaScript in them?
LOL. I found the answer.
All I had to do was add //#ts-check directly underneath the script tag and type checking was enabled.
So HAPPY!!!
Thank you, everyone, for your input
For best results I'd suggest starting a new project using vue-cli and selecting the options for TypeScript and ESLint. You'll also need the ESLint extension for VS Code.
Here's a helpful blog post showing the parts of this process.
Once you have a nicely working setup with the clean project, then move the code over. I suggest this because getting all the config right can be a mess with an existing project.
I downloaded draw.io source files from the github repository and tried to make some minor changes to the import function, but all the sources are minified (especially app.min.js).
So my question is this: is there any way to debug the code with the unminified sources?
Also I tried to pass inside the query string the param dev=1, but it gives some errors and doesn't manage to load.
I already saw the post Draw.io — Is there non-minified source? but I don't know how to build draw.io.
If you know the function that you need to edit you can use https://unminify.com to reverse the spacing minification but the variable and function names will still be simplified making it difficult (but not impossible) to edit.
I've found, in my opinon, a strange solution.
I took build.xml file and replaced all the <jscomp> instructions with <concat> so the result file isn't a minification but just a merge of all source files.
This method works just fine and it solves my problem but i don't know if there is a simpler and more right method.
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
What information can I take from the following debug pause? I don't see any information that I can use to identify the problem :s
UPDATE:
console is empty
The code you show is minified, that's why it's only one line and not readable nor directly debbugable.
But you have a small button { } at the bottom left of the screen you show (the fifth from the left), it lets you beautify the code. Click on it.
You can put breakpoints in this beautified code in a much precise way.
When you are debugging your own website, you should load the uncompressed version of jQuery and any other libraries you need to debug. If you're loading jQuery from the Google or jQuery CDNs, simply change jquery.min.js to jquery.js.
If you're serving jQuery from your own server, always check in both the compressed and uncompressed versions into your source tree. This applies to other libraries too. You don't want to have nothing but the compressed code available.
By using the original uncompressed source, you will have the formatted code with all its comments and the original variable names.
When you don't have access to the original code or just need to take a quick look at something, dystroy's tip about using the built-in DevTools beautifier is an excellent one. It cleans up the formatting nicely, you just don't get the comments or original variable names.
I'm using Tincr (http://tin.cr/) to take advantage of Chrome's code hot-swapping functionality. However, now I need to disable Meteor's refreshing of the page each time I save a file since the code is already update in the browser's runtime environment thanks to chrome hot-swapping.
How can I do that?
i found the answer. add a '~' at the end of files or folders you don't want causing reloads.