Lately I have been learning some Google Map API. I have this line of code:
var paths = this.getPath;
The correct line of code should be:
var paths = this.getPath();
I spent way too much time to figure it out. Pressing Ctrl-Shift-J, try catch in Javascript did not give me a clue.
Is there any tool that tells me that I am wrong when I'm working with a remote API so that I do not make the same kind of mistake in the future? My previous experience working with Java using IDE is much smoother thanks to the syntax error highlighting feature.
Edit: In short, how can I detect a mistake when writing the code, not in run time?
Thank you and best regards
If you're using Chrome (I assume you are from your reference to Ctrl-Shift-J), you have an excellent Javascript debugger that allows you to add breakpoints, inspect variables, view the stack, step up and down the chain, etc.
When you realise you're not receiving the results you expected, the best policy is to set breakpoints on and after the calls to the Map API, and inspect the value of your variables before and after. This would reveal that getPath was a reference to a function and not a returned value.
As a general tip, properties prepended get tend to be functions. If it were a property, it would likely be path as opposed to getPath. The verb gives it away.
Use WebStorm as an IDE. It provides excellent features as code completion, debugging, jslint/jshint,... The best IDE for javascript imho.
Combined with Chrome for testing it rocks!
I think those kind of cases may be covered by your debugger as long as you've toggled the pause button at the bottom left corner to "Pause on all exceptions" (the light blue mode).
IE 10 developer tool's (Strangely the counterpart of Chrome, Firefox failed to notify me my errors, I am retesting this part) debugging can help me out. I will inform you more.
Related
I'm a beginner web developer. I often use Firebug to debug my JavaScript.
Problem is that there are some script files from my page's UI that have a lot of code and this causes my web browser to be unresponsive, i.e. I get a dialog saying the script is unresponsive. Basically this happens when I am within Firebug's Script panel.
How can I deal with this?
I tried finding solution to this problem and nothing.
As for the answer I think the best was posted by #Pablo(can't assign answer to comment unfortunately) and it is simply trying out Google Chrome console. None of the problems I mentioned exists here.
Cheers guys!
I have had the same problem debugging some of our older scripts that make extensive use of the eval() function.
This causes many scripts to be displayed within the Script Location Menu. (Each dynamically generated script is represented there.)
A possible solution, given that it was caused by the number of files in my instance, might be to see if you can bypass the problem entirely by utilizing fewer source files for the same code. Using a 'built' version of whatever frameworks you use might alleviate the problem. (Particularly if they still are debug-able in a built form.)
If that does not work, you might try debugging using Firefox' built-in debugger (available via Ctrl+Shift+S. (Or switch to another browser to do the debugging, but that is obviously a far less desirable solution.)
I'm new to developing and started with a ruby on rails tutorial.
There i came to an error and after redoing it and googling it for days i can't figure it out. I was told to learn how to debug but i have no clue how to. i read that it actually is not possible to debug css. Maybe i used the wrong expression and i don't want to make it about my error which i already asked about here: CSS is not working after push to heroku but works on localhost
and here endless scrolling does not work
but i was wondering how to debug in general. i found various code snippets but not a really good tutorial where it explains everything from the beginning. i found things about breakpoints which i have no clue about what it is and where to set and how to read or where to get the logfile. do you know any good tutorials about that topic which i weren't able to find yet. something like a debugging for dummies.
Thanks a lot.
The Rails Guides site is an excellent resource for learning Rails.
Here's a great one on your subject: http://guides.rubyonrails.org/debugging_rails_applications.html -- section 3 goes into the debugger itself. Should really be all you need, but let me know if you've any specific questions after reading this.
Debugging CSS is different, though. Generally, the best way to debug CSS is to play with it in real time in a web page. You can do this with the Firebug addon for FireFox, or the web inspector which is built in to Chrome and Safari.
Debugging means finding and fixing problems with your code. You can start by checking your code for syntax errors (such as typos in function names or missing punctuation). Then use print statements (such as document.write in JavaScript) to check that your variables have the correct values. Also check for mistakes in logic, such as off-by-ones and infinite loops. Based on the unexpected results (and error message, if any), try to figure out which part of your code is faulty. You can debug without a debugger program, but they offer useful features. Your code can run slowly (line-by-line or pausing at the breakpoint), so after each line/breakpoint, you can check its status.
From MDN.
Invokes any available debugging functionality. If no debugging
functionality is available, this statement has no effect.
I've debugged in IE, Safari, and FF and have found no need for this keyword. Does it have a practical use? Can someone provide a practical example?
Typing debugger; into your code triggers the same functionality as setting a breakpoint in the debugging utility. I have had various debugging utilities not show the script because of using a script inside a cms or other unknown reasons. However the scripts still halted and allowed me to check the state of variables where ever i used debugger;
This may be a stretch of a practical example but i have found a use for it.
Technically
debugger;
appears to be a manual or coding way to trigger a debug utility as opposed to setting a break point inside of a debug utility. Hope this helps.
Our web site has a fairly complex JS app that fails with the latest Firefox 10 release. This is due to what appears to be a bug in the JS interpretor, making variables return NULL when they clearly aren't. This bug only occurs when the JIT compiler is active, not when it's disabled. We will report the bug to Mozilla and try to find a workaround.
Is there a way to disable the JIT in Firefox for a specific script, from inside the script?
Thank you.
The answer comes from Brian Hackett (:bhackett) at mozilla.org:
Using with in a script will disable the JIT for that script, e.g. adding a with({}) {} to the top.
See it here https://bugzilla.mozilla.org/show_bug.cgi?id=730004#c11
Great news. This does indeed work around the issue.
Thanks everyone! Mozilla rocks!
Gabriel, there is no reliable way to do it. You may be able to disable the JIT for particular functions by using some sort of features that the JIT doesn't support yet, but obviously the JIT folks try to minimize the set of circumstances that can trigger this... There is no official "turn off the JIT" command.
On the other hand, once you file the bug the JS engine folks may be able to suggest a workaround on your end, depending on what's going on.
Please cc me (":bz") on the bug you file?
So tried my hand at profiling some code and I figured the easiest way to do it (at least on Firefox) was to use either console's time/timeEnd or profile/profileEnd, and I tried both.
The problem I have is with the number of runs I can do before Firefox crashes on me. Now I won't paste the code here because it's typical benchmarking code (and it's very messy), but obviously the gist of it is that it runs functions (a test is represented with a function), logging their execution time for a certain number of runs.
Now with for example, 5e4 it sorta works but I don't think it's enough to spot (very) micro optimizations, but more than that, it crashes.
So how do you profile your JavaScript? Because this way, it's barely feasible.
When I used to profile my JavaScript code I used Chrome's profiler; the JavaScript Console in the developer view gives it, and it pretty much worked for me. Have you ever tried it?
I have tried profiling a page with a lot of scripting in Firebug on FF4 and the same in Chrome (last version). Firefox crashed within a second or two, Chrome didn't seem to have problems with it. Maybe you can find something on it in the Firebug issues list?
Although not a traditional code profiler, I recommend Google's Speed Tracer:
Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.
I think the profiler in the JavaScript Debugger (aka Venkman) is quite good. The version currently on addons.mozilla.org is not compatible with Firefox 4, but the change necessary to make it work has been committed. See https://bugzilla.mozilla.org/show_bug.cgi?id=614557 for details.
dynaTrace AJAX edition(free)- one more tool in your bag. Offers a little bit more detailed performance metrics, IMHO. They used to have it only for IE, but their new one supports FF too. Also see Steve Sounder's blog