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.
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.)
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.
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
This question already has answers here:
Can I override the Javascript Function object to log all function calls?
(6 answers)
Closed 5 years ago.
Is there a debugging system that allows me to record javascript function calls and their parameters as they occur? this would allow me to trace and debug applications in live/client situations without the performance hit due to manual logging.
Edit: I'm not talking about manually calling functions using a 'console' window and viewing the results, or manually adding 'trace' or 'log' commands into my javascript. I need it to work with any running javascript.
Can you override Function.prototype.call and retrieve arguments and arguments.callee?
This would have the effect of reporting on ALL functions and therefore being super verbose, but maybe you'd want to filter.
Then you have the question of how you want to report, perhaps with if (console) console.log
you could take a look at http://ajax.dynatrace.com/ajax/en/ - its IE only but pretty darn good, see this article by j. Resig : http://ejohn.org/blog/deep-tracing-of-internet-explorer/ > "..dynaTrace provides some information that I’ve never seen before – in any tool on any browser."
#Jenko if what you're looking for something similar to an IDE debugger, in that case Internet Explorer 8 and 9 have a built-in Developer Tools (press F12) and Chrome has Developer Tools as well. Both IE and Chrome allow you to set breakpoints in your code and step through it while it's running. Firefox has Firebug, which others have mentioned, and it too allows to set breakpoints and examine the execution of your code. Opera has Dragonfly (built-in) and has the same features as the other browsers.
As I was reading the answers and laughing at the duplicate answers of "You can use Firebug!" I realized.... you can use Firebug.
Seriously, it has a "profile" command that does exactly what you are asking for. Safari and Chrome have this feature so you can check in there as well. IE8/9 has a "profiler" tool which is similar (but I don't know if it can be called from JavaScript with console.profile())
This will give you accurate times since any code and logging you add would also afect the actual performance. And because this feature is in the top browsers, you get a reasonable amount of data.
I've found fireflow: https://addons.mozilla.org/en-us/firefox/addon/fireflow/
incredible helpful.
If you're talking about browser-side javascript dedub you can use Firebug, which is an excellent tool.
http://getfirebug.com/
Here you can find a step-by-step tutorial:
http://www.digitalmediaminute.com/screencast/firebug-js/
Yes. all major browsers have a debugger built-in (IE, Chrome, Safari), or available as a add-on (Firebug for Firefox).
Firebug is good for this. Or you can use Google Chrome's built-in debugger as well.
for Firefox Firebug
for IE deeloper tool
for chrome built-in debugger is nice to use
Arguably the best online Javascript Code Quality Controll is JSLint. It not only checks code for errors, it improves the coding style of programmes entirely<< this is the reason the author has made it in the first place. My 0,02 $
http://www.jslint.com/
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 14 years ago.
Improve this question
Does a tool exist for dynamically altering running javascript in a browser? For example, to change the values of javascript variables during runtime.
So, Firebug really is one of the best options - or, if you are a developer that owns Visual Studio and want to debug using IE, you can do that. Let's assume you will do this with Firebug using Firefox.
First, determine where you want to alter the code and place the following line just before the line you want to start messing with:
debugger;
That will cause Firebug to stop the execution of the script at that point, at which point you can then step through the code and alter the values of variables.
You can also use Firebug to place breakpoints in by clicking to the left of a line of code in the script window of Firebug:
Firebug , or Venkman Javascript Debugger .
Look into the javascript shell here.
It is like a debugger in your browser.
You can run/alter any javascript function on the active document object.
Very nifty for debugging/handling other peoples javascript, on sites where you do not have access to the source/server.
Did I mention it has tab-completion? it's awesome.
Opera 9 comes now bundled with Dragonfly (FireBug equivalent), and I've understood that it, too, can edit JavaScript on the fly. It's at least a feature to come, if they haven't had the time to include it, anyhow.
Have a look at Firebug
As mentioned by others, Firebug allows you to set breakpoints in your JavaScript (although I haven't had great success with hitting breakpoints when my JavaScript is IN an HTML document as opposed to an external file) which will interrupt the execution of a function during runtime.
It also allows you to view the DOM objects and all of the properties (which includes your JavaScript variables).
There is also a Lite version of Firebug that will work in non-Firefox browsers.
Mozdev has a tool called MozREPL. Not only can you alter and redefine the code on the fly, but you can get access to the underlying browser code as well. It's really cool.
It opens up a port on yoru computer amnmd allwos you to attach a telnet session (from local host only) to it to start executing code. You can also open that port up to connections that are not from localhost.... (but beware, that is pretty insecure and dangerous, etc. etc.).
It comes with an emacs minor mode that lets you send various regions of text right to mozdev, and provides a very nice interaction mode. I've further expanded it to set Firebug breakpoints right from emacs, and launch selenium tests. Basically I can script my browser from my editor. Its pretty cool. At some point soon I am going to release the source code.
JavaScript has an eval() function, you can build your string and then run it.
<script type="text/javascript" language="javascript">
example = function() {alert('first');}
example();
eval("example = function() {alert('second');}");
example();
</script>
The code above is an example of how eval can be used to change existing code.
#eyelidlessness, this shows that you can change existing code. Your edit to the question clarifies the original question, but therefore make my answer look invalild, but at the time it was originally posted it was a valid point, the original poster should have made the question clearer.