Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Context
I am trying to understand the internals of a big, hairy JavaScript library.
I already have the un-minified version.
JavaScript's dynamic-ness is making it hard for me to guess what is happening by just reading the code.
I want something like gdb ... where I can "step" through each individual JavaScript function / line of code.
Question:
What browser (Safari? Firefox? Chrome?) should I be using, and with what plugin?
Thanks!
Use the Chrome Developer Tools. A debugger and a profiler are included.
And when you just want to know what's inside an object, use console.log(obj) : you'll see its content in a property tree. As there are many tools, I suggest you completely read the official documentation : using them correctly really makes a big difference in your productivity.
A similar tool is now present in Firefox (you had to use Firebug before) but Chrome is more used, partly because of its more powerful js engine (V8).
IE starts to include such a toolset, but it's really poor and painful to use for now (I guess this will change).
there is a developer tool in every modern browser these days. press F12 OR ctrl+shift+k on the browser window to get one.
you can set breakpoints and use immediate console to analyse the code
You could get FireBug for Firefox.
For debugging i would use Firefox's Developer tools->Error console to check the errors first. Yes, i Use firebug for more advance debugging. But i solve most of my problems by looking at the error console.
“Simplicity is the ultimate sophistication.”
- Leonardo da Vinci
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I am presently studying javascript coding practice on CodeAcademy. When testing code in Codeacademy I use console.log to output strings to the built in browser within Codeacademy. The code works fine. The first issue is this: When I test the same piece of code within Dreamweaver text editor and output it to the browser it prints nothing, I have to change it to document.write for it to work.
Next Part
I then read somewhere that using document.write in production code is not recommended! Can somebody explain this.
Next Part
I was at a brief introduction to JS free meeting a few days ago. At this meeting it was suggested that using something like prompt("La di da"); is not recommended in production work.
If anybody has the time and energy to explain why these things are built into JS but no recommended to be used or why they do not work when used, I would be very grateful.
Code Academy will be emulating a console in their web application. Press "F12" in most browsers, and you'll get "Developer Tools" opening up; which will have a console built in, which is where console.* (including console.log()) calls get output to.
Like I said, Code Academy will have some of their own JavaScript, which will be catching these calls, and to make their tutorials easier to use, outputting it to a place which is easier for you to see.
Dreamweaver however, won't be doing this, which is why you're not seeing it.
There is nothing inherantly wrong with using document.write. However it behaves differently depending on whether the page has loaded or not, and there are generally friendlier and more useful alternatives such as document.getElementById() for targeting where to direct output.
For more info, see Why is document.write considered a "bad practice"?
As with document.write, there is nothing wrong with prompt(), confirm() etc; Stack Overflow themselves use confirm() on their websites. The downside is that they cannot be styled, and prompt() for example, is restricted to asking for one thing at a time.
Model windows however (such as jQuery UI dialog, Bootstraps "Model" or various lightbox plugins, can be.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I use MDN as my Javascript and CSS reference. Considering that the creator of the Javascript language works at Mozilla, I assume this is the best reference. However, every now and then I hear about new features that are available in Google Chrome but Firefox doesn't have them yet. It makes me wonder:
Where and how these new specs are announced?
For the things that are similar between Chrome and Firefox, is it safe to assume that Chrome follows Firefox standards? I get the impression that Chrome's main aim is to be a faster Firefox (?) and that's why it doesn't have a vast wiki like Firefox.
If I'm developing for Chrome (let's say making Chrome apps for example), can I rely on Firefox's MDN as a reference? I couldn't find something equivalent to MDN for Chrome.
I'll mark the best reply as answer. Thanks for sharing your knowledge.
All modifications are announced in the google chrome release blog.
As far as I see it, chrome isn't just a faster Firefox. It's a different browser altogether, that provides, in my view, much better user customization (as seen in things like themes) as well as having a developer base which provides some really good extensions. As to the wiki, chrome is considerably newer, however, it provides some really good user support via chrome support.
AFAIK, spidermonkey (Firefox) and v8 (chrome) engines are reasonably similar in terms of javascript, so you should be alright just using MDN. There's a webmaster.SE thread about the issue here.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm really confused here. I am trying to understand this code (it's javascript) but I don't really know from where I should start. It's more than 25.000 rows including the comments. Therefore, reading the code line by line is definitely not the way to go. Using a debugger would be good, but I don't know any that works like Visual Studio debugger. So what else could I do to understand this code? What would be your starting point?
Change something.
Find something you're interested in (something must be more interesting than "all of it"), and change it. Make it do something different.
Don't fixate on the 25K lines of code, rather fixate on the 2, 10, 100 lines that you care about first. Then, you will implicitly bump in to other parts of the system.
Once you're done, change something else. See what, if any, commonality exists between your two changes.
And just keep going. It's easier that way. Elephants taste better when eaten in small bites.
Take a look at this instead: https://github.com/ajaxorg/ace/tree/master/lib/ace
That format should be much more approachable than all 25k LoC concatenated together. Having the filenames to help provide context is very helpful.
You can step through JavaScript code just like stepping through VB or C# code in Visual Studio. Take a look at the developer tools in your browser of choice - F12 will open them up in Chrome, Firefox, and IE. They will all have a section related to scripts, where you can set breakpoints, step through the code once paused, set watches, and most of the other things you're used to when debugging in Visual Studio.
You can debug javascript in firefox's firebug with breakpoints. This code looks like a library used to convert code from one language to another. It is rather in depth and very well coded.
I would start by finding a effect you want to figure out and off you go...
I would start by looking at the source https://github.com/ajaxorg/ace/tree/master/lib/ace instead of the file with it all scrunched together... The file you linked is the final build, not the edited sources, If my quick glance is correct.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 11 months ago.
Improve this question
I am stuck with one task now. Requesting your help on this.
Description :
There is a functionality written in purely javascript - but with lack of performance.
Its taking more than 3.5 seconds to complete the workflow.
Of cource, Its includes a lot of DB calls & functionalities and loops.
This set of codes written by long years ago, so i am not aware of any functionality much on that.
Question :
Are there any (free) tools available to trace how many times functions getting called and how much time its taking? (Like DotTrace for .Net)
Note : using IE 6.0 & Our product is very huge will not support firefox.
Thanks
Karthik
You shoud try the dynaTrace Ajax IE profiler. Its awesome product (and free).
Check out the JQuery author john resig's review about this tool
Have a look at Jiffy: http://justtalkaboutweb.com/2008/06/25/extensions-for-firebug-yslow-and-jiffy/
If you can afford to buy a product then look at: http://www.softwareverify.com/javascript/profiler/index.html
Another one that comes to mind is http://research.microsoft.com/en-us/projects/ajaxview/
I never heard of pure Javascript calling directly a DB unless u mean it's using XML requests to call server and this last one performs the DB calls.
Anyway a well known tool to profile Javascript is Firebug. You can go on using your website and application with IE6 if you like, but to profile it I would stringly suggest using Firebug.
Download Firefox and than install the Firebug plugin
Profile your Javascript code on Firefox and try to fix the poorly performant parts.
Once you have done it's highly probable that your code will also run faster on IE6.
You can try the "Log calls to 'function name'" on Firebug plugin
If you're like me and not isolated to IE, then it may be helpful to know that there are profilers available in both Chrome and Safari's Web Inspector tool as well as Firebug. In Webkit, click the Profile tab. In Firebug, the profiler is available through the Console tab.
The firebug plugin mentioned in some of the older answers no longer exists. It has been replaced by Firefox's Developer tools.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
what tools do you use for writing jquery code and testing/debugging your code?
The Firebug plugin for firefox is essential - it lets you:
Debug your code (step into, out, etc)
Set watch variables and expressions
See contents of all requests and responses, as well as all content received
Time to download each resource
Inspect and modify the DOM, including viewing the DOM after it has been dynamically modified by JavaScript
And much more!
There are also debuggers available for Internet Explorer and other browsers, but none are quite as powerful as firebug.
Depending on the language, there are other resources available for debugging server side code that come in quite handy, too. But that is another question...
jsFiddle is very handy for quick snippet debugging. There are competitors such as jsbin, but fiddle remains my favorite, even though it's only in alpha at the moment.
Of course I think Chrome's developer tools and FireBug/Web Developer for Firefox are tremendously helpful as well...each tool has it's area that it helps with.
Lastly, let's not forget: the jQuery API itself, a tremendous resource for information.
Google Chrome Developer Tools are really powerful.
Also great for debugging CSS and HTML issues. The DOM highlighting is really handy.
Aptana might be what you are looking for. It has support for jQuery, debugging and also CSS, html and ruby, and is generally very nice to work with.
even if it is funny, I find IE 8 dev tools very convinient for js debug
console.log(); is your friend. Pick up its output with Firebug for Firefox, or the built-in consoles in the developer tools in Safari and Chrome (IE no help as usual).