I'm trying to follow this tutorial:
https://www.youtube.com/watch?v=2zmUSoVMyRU
And at the beginning he is typing in commands in the console such as
$('a')
which appears to be returning all the a tags in the dom.
When I do this on my website, I get
TypeError: $ is not a function(…)
I also get this when running console.log as a command
function Function() { [native code] }
Im wondering is there something I have missed completely with dev tools, or is it that there might be some problem with my website overwriting the console.log function (i use wordpress)?
There is also a comment at the bottom where a user is having a similar problem (undefined errors), but it doesnt seem they resolve it.
Use like this.It can show you all the a tags in the dom
$$('a')
A quick alternative on chrome dev tools is just to use:
$$('a')
Just to add an explanation: $('a') is using the jquery library which is a piece of JS you have to include in you site. So it will only work on dev tools if the website has jquery included. In your case it doesn't work because of that.
$$ is something built in on chrome dev tools and it will always work, no mater if jquery is included in your website or not.
About console.log you can't just type 'console.log', you have to use it like this: console.log('log my message');
So it needs to be a function call where you pass a string argument that you want to get printed out on chrome dev tools console
Related
When debugging JavaScript I make heavy use of the console to evaluate individual lines of code, to retrieve instance values to test in 3rd party software (i.e. when building SOAP requests)
Now I've got IE11, it looks like the code I type into the debugger is executed (I can open alert boxes etc..) however the results are not printed in the console. Does this mean I now have to surround everything I type into the console with console.log(JSON.stringify( /* ..expression.. */, null, 4 )) statements?
Is there an easier way to return to the IE10 console behavior?
Answered by #MrAnonymous, please direct all (well deserved) praise to the comments above.
As noted above, this is an issue with the Debugger tools themselves and can be rectified by reloading the tools.
I want to backtrack from where the function is called in ExtJS.
Just like in PHP we have debug_trace() which shows the whole chain of methods .
is there something like that available in extjs or javascript
You should be able to set a breakpoint in your browser's dev tools of choice and bring up the call stack.
Search "call stack" in the following articles:
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
https://developer.mozilla.org/en-US/docs/Tools/Debugger
if you are using chrome, i know there is a console.trace() which you can add in your code while debugging to bring you the trace, i havent used it on any other to know if it exists on otheres
you can also use the debugger keyword to add breakpoints or you can use the debugger function in your dev console
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.
I just spent half an one our to find out what caused the Error-Message "Ci is not defined" in my JavaScript code. I finally found the reason:
It should be (jQuery):
$("asd").bla();
It was:
("asd").bla();
(Dollar sign gone missing)
Now after having fixed the problem I'd like to understand the message itself: What does Firefox mean when it tells me that "Ci" is not defined. What's "Ci"?
Update:
I'm using the current version of Firefox (3.0.3).
To reproduce, just use this HTML code:
<html><head><title>test</title>
<script>
("asd").bla();
</script>
</head><body></body></html>
To make it clear: I know what caused the error message. I'd just like to know what Firefox tries to tell me with "Ci"...
I don't know which version of FF you are using, but regardless, the message is probably referring to the fact that bla() is not a function available on the String object. Since you were missing the $, which means you were missing a function, ("asd") would evaluate to a string, and then the JavaScript interpreter would try to call bla() on that object. So, if you had the following code in your project:
String.prototype.bla = function() {};
// now this next line will execute without any problems:
("asd").bla();
So, it is possible that Ci is some internal Firefox symbol that simply refers to the idea of a function. That is my guess, I imagine you are going to need someone that knows something about Firefox's internals to get a better answer to this question...
UPDATE: I am running your example code in the exact same version of FF as you are, but it reports the error as:
Error: "asd".bla is not a function
Source File: file:///C:/test.html
Line: 3
Perhaps you have an extension/plug-in running that does something with this? Maybe some Greasemonkey script or something?
Jason seems to be right. Many plugins (e.g. Firebug, Geode) use Ci as a shortcut:
const Ci = Components.interfaces;
So the plugins seem to cause that strange error message.
Assuming it's CodeIngiter, it can't find the js file.