This question already has answers here:
How to debug obfuscated JavaScript?
(4 answers)
Closed 4 years ago.
I'm using django-compress to shrink my JavaScript files. However, I am now having trouble debugging through it because everything is squished. I believe Stack Overflow use some kind of JavaScript compression too. How do you go about to debug through your JavaScript code on the live site or on your development machine with the code well formatted?
Firebug has all the code in one line which makes it hard to dig through.
The simple answer is you don't debug through a compressed file - you use an uncompressed version for development.
I see an answer has already been accepted, but I am adding a new answer since this is the first result I got on Google and think this new info may help someone.
Some browser DevTools now support Source Maps to map built javascript to is unbuild readable state. You have to minify and/or combine the JS with a tool that supports creating Source Maps. But if you do you can see the original code when debugging the minified/combined javascript.
Find more info here:
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#source-maps
If you are using Google Closure, then there is a plugin that allows you access the unminified version of the code. See the documentation on the Inspector and the source mapping feature.
Some suggestions:
Don't compress until you deploy to production
Reload your source code after the compress code; it will write over the compressed code
When it's worth the investment, I take compressed code and manually uncompress it
Related
This question already has answers here:
jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
(11 answers)
Closed 9 years ago.
I've recently started having this problem with all my projects. When my index page loads which contains a reference to the jquery source file, my console logs this error: GET http://localhost:3000/js/lib/jquery-1.10.2.min.map 500 (Internal Server Error).
This doesn't affect my application at all, but it's really annoying to see whenever I open up the console. Does anyone know where this is coming from?
Edit: Note that I'm not explicitly referencing the .map file, I am just pointing to <script src="js/lib/jquery-1.10.2.min.js"></script>
jQuery recently started using source maps.
For example, let's look at the minified jQuery 2.0.3 file's first few lines.
/*! jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//# sourceMappingURL=jquery.min.map
*/
Excerpt from Introduction to JavaScript Source Maps:
Have you ever found yourself wishing you could keep your client-side
code readable and more importantly debuggable even after you've
combined and minified it, without impacting performance? Well now you
can through the magic of source maps.
Basically it's a way to map a combined/minified file back to an
unbuilt state. When you build for production, along with minifying and
combining your JavaScript files, you generate a source map which holds
information about your original files. When you query a certain line
and column number in your generated JavaScript you can do a lookup in
the source map which returns the original location. Developer tools
(currently WebKit nightly builds, Google Chrome, or Firefox 23+) can
parse the source map automatically and make it appear as though you're
running unminified and uncombined files.
emphasis mine
It's incredibly useful, and will only download if the user opens dev tools.
Solution
Remove the source mapping line, or do nothing. It isn't really a problem.
Side note: your server should return 404, not 500. It could point to a security problem if this happens in production.
I had similar expirience like yours. I have Denwer server. When I loaded my http://new.new local site without using via script src jquery.min.js file at index.php in Chrome I got error 500 jquery.min.map in console. I resolved this problem simply - I disabled extension Wunderlist in Chrome and voila - I never see this error more. Although, No, I found this error again - when Wunderlist have been on again. So, check your extensions and try to disable all of them or some of them or one by one. Good luck!
This question already has answers here:
How do I hide javascript code in a webpage?
(12 answers)
Closed 8 years ago.
I have a site whereby I can currently use firebug to look at all the angularjs files.
Is there anyway I can hide these so people cannot use tools to view them?
No you can't, the browsers need to see the code to execute it.
No. JavaScript files will always be accessible from client tools like IE dev tools or Chrome or just about any other browser's dev tools. You can take steps to make the js harder to read, but it will still be accissible
Yes, but the way is to stop people from accessing your site, which is probably worse. The way JavaScript works on most sites ( other than ones built on Node ) is that it is run in the browser and to do that it must be sent to the browser.
The reason it doesn't matter is that nobody wants to steal your code.
You need to remember that nothing you want to be kept secret should be in that JavaScript- run that on the server and pass the results out to front end - and for production you should probably be minimising your code anyway which provides a lot of obfuscation, but in general it is not worth worrying about.
You cant. But you can minify them using for example Google's closure compiler or Microsoft Ajax Minifier. Minifying not only makes your javascript less in size, but also gives an obfuscation to your code, so it is much more harder to understand
This question already has answers here:
jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
(11 answers)
Closed 8 years ago.
I have a web page that is part of a ASP.NET web site running on Azure. It's run fine for quite a while now. Out of the blue, I am suddenly having a problem with the browser trying to download a ".map" for Underscore.js. I did some reading and apparently JQuery creates ".map" files as debugging aids for Javascript source files (".js"). However, if I look at the Scripts directory for my web site I see that this only happens for some JQuery source files and not all and I am not sure what the pattern is.
However, why would the browser be trying to load a "map" file for Underscore.js which is not part of JQuery? Also, why would this suddenly start happening? I added Underscore.js to the web page quite some time ago and never had this problem before.
The exact error I get when I look in the Chrome Debugger Console tab is:
GET http://myazureapp.cloudapp.net/Scripts/underscore-min.map 404 (Not Found) Scripts/underscore-min.map:1
What you're experiencing is source mapping. This allows you to debug with readable code in your browser's developer tools when working with minified JS files.
The minified version of Underscore has this line at the end of the file:
//# sourceMappingURL=underscore-min.map
Your browser's developers tools will try to download underscore-min.map when encountering this line.
If you want to get rid of the error, either:
Remove that line from underscore-min.js
Add underscore-min.map and underscore.js to your project.
This question already has an answer here:
How can I see the source of built-in JavaScript functions? [closed]
(1 answer)
Closed 6 years ago.
where can I find the source code of native js functions, for example I want to look at eval() function
Both Chrome and Firefox are open source and you can look at the implementation of any part of the javascript engine in the source code for those products. Other browsers have their own implementation (like IE) that is not available to the public to look at.
The Chrome v8 javascript engine code is here: https://github.com/v8/v8
The Firefox SpiderMonkey engine code is here:
https://searchfox.org/mozilla-central/source/js/src
Warning, if you aren't already familiar with those products and their tools, it may take while to get familiar enough to find what you're looking for.
These links may change over time, but can easily be found with Google searches if they move.
Javascript is a script language that is implemented within a Browser's code-base. This means that there may be different implementations of the script language, with different levels of quality, and possibly different intepretations of what is required. Hence the head-against-wall frustrations of many a web-developer when dealing with different web-browsers.
It is possible for you to examine a browser's implementation of Javascript if the browser is an Open Source version, eg: Chrome, Firefox, as given in other answers listed.
In the JavaScript engine's source code.
Most of my javascript work is done with Firebug and I feel annoying most of the times having to switch between the HTML mode and console mode (which again I split into output mode and input mode). When I switch to a different page to see the HTML and come back, I lose the code that I write. What is the best way to go about developing javascript applications using firebug?
Something like a mini IDE would be awesome: It just has to let me insert some code, examine the current page and then let me execute it. Any suggestions?
I use a simple text editor (vim) to write Javascript and HTML, and I check the result every now and then in Firefox. I have always two windows open: one for my text editor, and one with the current page open in Firefox. After saving a change in the Javascript, I switch to the browser and refresh the page to observe results. That was my workflow until recently.
A couple of weeks ago, I discovered the Combiner tool by Nicholas C. Zakas. To release my Javascript code, I am now using a complete build process based on Apache Ant, similar to what I was using while doing Java development previously.
The first step is to check the Javascript code with the JSLint tool by Douglas Crockford. I used to painfully copy and paste my Javascript code in the online version of the tool, once in a while; being able to run it on all my Javascript files at once with this Ant script is a huge convenience.
The second step is to combine all my Javascript files into a single file using the Combiner tool. The third step is to minify the Javascript code using YUI Compressor by Yahoo!. These last two steps allow to optimize the delivery of Javascript code to reduce page loading.
You can find an example Ant build file that you may adapt to your own needs. I am currently using this file to build my own Javascript library, bezen.org.
The other answers so far have been correct: I've never heard of anyone actually developing inside Firefox/Firebug, because it's a tool designed for debugging, not coding. To do your coding, you should use a tool designed for it (either a text editor or a full-fledged IDE).
But that being said, you might want to check out FireEclipse (Link). It will allow you to integrate Firebug with the Eclipse IDE (which itself has at least three different JS plug-ins to choose from). Alternatively I think the main (aka Web Standard Toolkit, aka WST) JS editor for Eclipse has some functionality which is similar to Firebug, but I've never used it so I don't know the details.
Hope that helps.
Write your HTML in an editor/IDE
Save your changes
Preview it in your browser
Debug using Firebug
Make your code edits in your SOURCE CODE
Repeat
Firebug is for debugging and allows you to do some "what if" fiddling while the page is live. This is not a replacement for an IDE.