I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.
Something I'll often do is simply alert a variable to see what it is.
However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...
I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.
So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.
I find the developer tools in Chrome work quite well, giving a good amount of detail on demand (usually just hovering the mouse over the variable in the script tab; if that variable is a structured object, a little tree control appears and you can drill down). But then, I don't have your Firebug issue either (or at least, not often anymore).
Debugging with alert is very time-wasteful and, as you've found, frustrating; if at all possible I'd look at using a real debugger (like Chrome's Dev Tools; I've also heard good things about Opera's).
This should help:
http://www.openjs.com/scripts/others/dump_function_php_print_r.php
The easiest way to inspect a javascript variable is with a debugger. If Firebug is not working out for you try using Google Chrome, it has an inspector built in.
Btw - not sure what you mean by "start a debug session". If you have firebug installed, you should simply be able to click on the firebug icon on the bottom right of your browser. Go to the script tab, and select from the drop down whatever js file you want, stick in a break point (just left-click on the margin) and refresh the page. I've never had a problem with Firebug, it's always worked extremely well. I strongly advise figuring out whatever your issue with it is, it will make your life a million times easier.
Using any of the browser dev tools, including IE9, you can use console.log to get the variable output on the console. What information this gives you will vary by browser, but with Firebug it allows you to explore the variable in the DOM inspector tab, with full access to all properties and functions (you can even copy the content of a function to paste elsewhere).
For instance:
var foo = {};
// Do lots of stuff with foo
if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
console.log(foo);
}
This has the advantage that it doesn't require any break points, so no slow step-debugging. It won't solve everything though, you'll often still need the debugger.
Related
While debugging AngularJS in Chrome inspector I often face the situation when I know that some variables are defined, and I can inspected them by hovering a mouse over them in Chrome inspector. They also appear in 'locals' tab. However, when I try to add them to watch tab or evaluate them in console by typing the variable name I get "undefined". See picture(notice variable 'xhr').
Can anyone explain the reason why sometimes variables are shown as undefined in watch tab and console, when they aren't actually undefined in current scope? And, if it's possible, how to make watch window and console to display values of the variables correctly all the time?
See picture(notice variable 'xhr').
Thanks
Source mapped variables will not show the resolved names in the debugger, as this functionality has yet to be implemented. The interesting part is that the map file does contain a names array, containing the original names. However, the browser has yet to use this. There was an experimental feature in Canary, but that doesn't appear to exist anymore.
You can follow the display source map variable names in Developer Tools thread.
In the meantime, I recommend switching to the un-minified version of the library to debug your particular problem(s), but switch it out in production. Not ideal I know.
Using the Firefox Web Console (which can be brought up with control shift k ) I can easily access things like flowplayers.
jwplayer().play(), for example
The console even offers autocompletion suggestions for it.
What does the console do to be in that kind of, for my lack of words and knowledge, namespace?
I tried things like
content.document.getElementsByName('flvplayer').item(0)
Using Pentadactyls JS intepreter (accessed with :js)
This does seem to give me the player handle, or at least it prints out a <html:object> which corresponds to it.
Appending a .play() to it doesn't work, though. It's not a function.
What do I need to do to emulate the Web-Consoles way of doing it?
I realize that this might be a very spoonfeedy question, so if that is not acceptable then I'd still appreciate to get pointed into directions where I could possibly discover the solution myself by reading.
I tried searching for it myself but the terms seem to be quite ambiguous and I usually get results with people talking about their own sites, with scripts running inside of that 'namespace', not from outside like I am trying to do.
(Unless I am wrong about the concepts of inside and outside here.)
Cheers~~
The following command works for me; it defines the command ypl which
plays the YouTube video on the page
command! ypl open javascript:(function()
{content.document.getElementById('movie_player').playVideo()})()
Another example: this defines the ytr command which takes an integer argument and moves the current time position of the video by that amount in seconds
command! -nargs=1 ytr open javascript:(function(){var vid =
content.document.getElementById('movie_player'); vid.seekTo(vid.getCurrentTime() +
(<args>), true)})()
I hope that helps a bit. When I wrote those a while ago I may have tried :js and if it didn't work used :open javascript:....
I have seen jquery-ui-1.8.11.js verify console.log functionality by doing
if (this.debug)
console.log()
I have also seen people define an anonymous function that is a no-op for browsers with no console logging like IE7.
if(typeof console === "undefined") {
console = { log: function() { } };
}
Is there a technical difference or are both functionally equivalent?
In the first example you've given, this.debug will be a reference to a debug variable in the jQueryUI code. This debug variable will have been set elsewhere, possibly by checking whether console is defined, but also possibly with other settings.
In any case, the first example is specific to the application; if you want to do a generic check to see whether the console is available, you'll need to use the second technique. You don't have to define an empty console object as per the example, but doing it that way does mean that you won't have to do the if() condition every time you want to call console.log().
Having said all of that, I would counsel you strongly to avoid putting any code into production which contains calls to the console. The console should only be used for debugging purposes while you are working on the code. It should not be necessary in final release, and doing so can be a sign that either your code is unstable or you're unconfident of it, neither of which is a good sign if you're releasing the code for live use.
(libraries such as jQueryUI are an exception to this rule, as they need to provide functionality for developers to do debugging while writing code using their library)
Both of those do something else. The first code suppresses logging messages unless a flag is set. The people who develop jQuery UI need logging when working on it, and turn it on. But people using the library don't want to have their console cluttered by log messages from libraries, so it's off by default. It lets you turn off logging even when the browser supports it – that regular users on IE7 don't get script errors is a (possibly intended) side effect.
The second code defines a dummy console.log(), so you can call the method without checking if it exists everywhere. It will not suppress logging on browsers where it's supported.
The second of the two is standalone, not relying on jQuery. In my opinion, that makes it better.
I'm writing a javascript / HTML5 canvas library to provide basic GUI elements for web audio applications.
There's a little demo script that creates widgets with the library and assemble them in a GUI. You can find it # http://bitterspring.net/webshifter/
The problem is, it seems to work correctly on Chrome and on Firefox 3.6 - 4.0 but, in the last cases, only with firebug. Without firebug, the script seems to visualize nothing on screen, while with firebug it does.
The only firebug-related pieces of code are some console.log statement I use to track the behaviour of the library. But these statements should have no effect on a non-firebug enabled browser, as I learnt from Firebug forums. What can prevent the example script to work, in these cases?
The library + example code is freshly committed on http://github.com/janesconference/KievII , by the way.
EDIT: Seems that, when console is not defined, console.log() throws an exception. Is there a way to keep the logging lines of code and not getting the exception? (yeah, one could check if console != undefined, but is there a better way?)
EDIT: This does the trick, it seems (Font)
if (typeof console=="undefined"){console={log:function(A){var B=false;if(B){alert(A)}}}}
Right, the console object is not available in all browsers by default.
This code:
if (typeof console=="undefined"){console={log:function(A){var B=false;if(B){alert(A)}}}}
- currently disables console support in Firefox 4's Web Console, since it tries to inject the console object when opened and won't do that if the page already defined a console object.
An interesting wrapper for console that deals with this problem is: http://benalman.com/projects/javascript-debug-console-log/ , although I haven't tried it myself.
I just started doing some Javascript work for a project, I do mostly backend work so I'm sorry for being new at this! Also, not using a Javascript framework because I want to learn about the fundamentals before making everything very easy for myself :)
So, here is my question/confusion: I wrote a little javascript that dynamically changed forms. This is how I called the code:
// loads the initial box
window.onload = initList(environment_box);
// loads artifacts on each change to environment select box
environment_box.onchange = changeList;
This worked like magic - in CHROME that is! I never noticed it wasn't working in Firefox (its just an internal tool, so I can assume decent browsers, but I figure hey, if its working in Chrome, it will work in Firefox!). So, I did some investigation, and it seems as though the code isnt getting executed in Firefox. I whipped out firebug and wanted to see what was going on.
The interesting thing was, when I enabled Console on firebug, my code got executed! I am very confused as to why, and I would much appreciate any help I could get. Thanks!
-Shawn
You are calling some method on console in your JavaScript is my best guess. Chrome has console defined be default, so it is not a problem.
On Firefox, however, there is no such global object (not without Firebug), so when you try to call a property on an undefined object like,
console.log(..);
it throws an exception which you are not catching, so the JavaScript execution halts.
You're probably calling a method of the console object which just doesn't exist by default in most web browsers. It may be always available on webkit based browsers (like Chrome) but with firefox/IE(/opera?) it requires an external add-on, either firebug or a javascript dependency.
Checkout things like firebugx which simply defines the most common methods of a console object as no-op functions.