Related
Why the result of printing x using console.log is undefined?
Update:
This is not a duplicate. I'm trying to understand why console.log doesn't print.
I'm not talking about the return value of console.log.
So I dig a little bit and I found something that could of happen to you.
when you open your Dev Tools, you have this little icon on the left:
if you clicked on it, it will open a sidebar and if you are marking one of the two options that I point, it will not show the console.log print.
Change to the first selection, and you'll find out that you get the print.
Logging to the console is a redundant action in devtools, since it is bound to output to the console any values that are passed to it.
x
Is the proper way to print the value of x to the console.
console.log(x)
Is basically the same as writing
console.log(console.log(x))
Which returns undefined. Though, if you have an active debugger, it will evaluate and also print the value
I found an answer here: Chrome: console.log, console.debug are not working:
By #Tim:
Same issue, but I just cleared my settings. I went into Settings > Preferences and Clicked [Restore defaults and reload]. Just remember what your settings were.
Chrome's Developer Tools rock, but one thing they don't seem to have (that I could find) is a way to find a JavaScript function's definition. This would be super handy for me because I'm working on a site that includes many external JS files. Sure grep solves this but in the browser would be much better. I mean, the browser has to know this, so why not expose it? What I expected was something like:
Select 'Inspect Element' from page, which highlights the line in the Elements tab
Right-click the line and select 'Go to function definition'
Correct script is loaded in the Scripts tab and it jumps to the function definition
First off, does this functionality exist and I'm just missing it?
And if it doesn't, I'm guessing this would come from WebKit, but couldn't find anything for Developer Tool feature requests or WebKit's Bugzilla.
Lets say we're looking for function named foo:
(open Chrome dev-tools),
Windows: ctrl + shift + F, or macOS:
cmd + optn + F. This opens a window for searching across all scripts.
check "Regular expression" checkbox,
search for foo\s*=\s*function (searches for foo = function with any number of spaces between those three tokens),
press on a returned result.
Another variant for function definition is function\s*foo\s*\( for function foo( with any number of spaces between those three tokens.
This landed in Chrome on 2012-08-26
Not sure about the exact version, I noticed it in Chrome 24.
A screenshot is worth a million words:
I am inspecting an object with methods in the Console. Clicking on the "Show function definition" takes me to the place in the source code where the function is defined. Or I can just hover over the function () { word to see function body in a tooltip. You can easily inspect the whole prototype chain like this! CDT definitely rock!!!
Hope you all find it helpful!
You can print the function by evaluating the name of it in the console, like so
> unknownFunc
function unknownFunc(unknown) {
alert('unknown seems to be ' + unknown);
}
this won't work for built-in functions, they will only display [native code] instead of the source code.
EDIT: this implies that the function has been defined within the current scope.
2016 Update: in Chrome Version 51.0.2704.103
There is a Go to member shortcut (listed in settings > shortcut > Text Editor). Open the file containing your function (in the sources panel of the DevTools) and press:
ctrl + shift + O
or in OS X:
⌘ + shift + O
This enables to list and reach members of the current file.
Another way to navigate to the location of a function definition would be to break in debugger somewhere you can access the function and enter the functions fully qualified name in the console. This will print the function definition in the console and give a link which on click opens the script location where the function is defined.
Different browsers do this differently.
First open console window by right clicking on the page and selecting "Inspect Element", or by hitting F12.
In the console, type...
Firefox
functionName.toSource()
Chrome
functionName
in Chrome console:
debug(MyFunction)
MyFunction()
I find the quickest way to locate a global function is simply:
Select Sources tab.
In the Watch pane click + and type window
Your global function references are listed first, alphabetically.
Right-click the function you are interested in.
In the popup menu select Show function definition.
The source code pane switches to that function definition.
I had a similar problem finding the source of an object's method. The object name was myTree and its method was load. I put a breakpoint on the line that the method was called. By reloading the page, the execution stopped at that point. Then on the DevTools console, I typed the object along with the method name, i.e. myTree.load and hit Enter. The definition of the method was printed on the console:
Also, by right click on the definition, you can go to its definition in the source code:
In Google chrome, Inspect element tool you can view any Javascript function definition.
Click on the Sources tab. Then select the index page. Search for the
function.
Select the function then Right-click on the function and select
"Evaluate selected text in console."
If you are already debugging, you can hover over the function and the tooltip will allow you to navigate directly to the function definition:
Further Reading:
Chrome DevTools > JavaScript Debugging Reference
You encounter VM defined JS function ,you can try this command in Chrome console panel below.
Like this:
foo function name is window.P.execute
>window.P.execute.toString()
<'function(d,h){function n(){var a=null;e?a=h:"function"===typeof h&&(p.start=w(),a=h.apply(f,wa(d,k,l)),p.end=w());if(b){H[d]=a;a=d;for(da[a]=!0;(z[a]||[]).length;)z[a].shift()();delete z[a]}p.done=!0}var k=g||this;"function"===typeof d&&(h=d,d=E);b&&(d=d?d.replace(ha,""):"__NONAME__",V.hasOwnProperty(d)&&k.error(q(", reregistered by ",q(" by ",d+" already registered",V[d]),k.attribution),d),V[d]=k.attribution);for(var l=[],m=0;m<a.length;m++)l[m]=\na[m].replace(ha,"");var p=B[d||"anon"+ ++xa]={depend:l,registered:w(),namespace:k.namespace};d&&ya.hasOwnProperty(d);c?n():ua(l,k.guardFatal(d,n),d);return{decorate:function(a){U[d]=k.guardFatal(d,a)}}}'
so we got full function code.
In the Developer Tools' Console in Chrome, I want to be able to completely delete all variables stored in memory.
For example:
var x = 8;
x // 8
clear()
x // not found, x is not defined
instead every time I try to do a variation of clear() or console.clear(), the variables still exist in memory and I get:
var x = 8;
x // 8
clear()
x // 8
Any help with this would be greatly appreciated.
Clearing the console history is easy, right click on the Console window and select the "Clear console history" option from the context menu.
Golden rule: You cannot delete anything declared with var
If you want to hack your way through cleaning up the global scope you could identify what you've added by exploring the keys of the window object.
Object.keys(window)
Make a note of the keys you want to remove and then try to delete them:
['a', 'x'].map(prop => delete window[prop]);
Delete will try to remove the property from the window object and returns a boolean result, so you might end up with a response like
[true, false]
This indicates the first item was deleted but unfortunately the second was not.
In your case you could assign the x variable to null so it is marked for garbage collection but when will the window object go out of scope?
There clear function just removes the text from the console.
There is no mechanism to remove all existing variables or clearing the cache from JS.
Open the Network tab and tick "Disable cache" then refresh the page to do that.
I was facing below issue with const variables declared within snippet when i tried to run the snippet multiple times without refreshing the page.
SyntaxError: Identifier 'MY_CONST_VARIABLE' has already been declared
If you have created variable within console or snippet and want to clear just those variables but not the variables created by js file added to your html page using script tag, then you can just refresh the browser page and all variables created by you using "console and snippet" will get removed.
Chrome's Developer Tools rock, but one thing they don't seem to have (that I could find) is a way to find a JavaScript function's definition. This would be super handy for me because I'm working on a site that includes many external JS files. Sure grep solves this but in the browser would be much better. I mean, the browser has to know this, so why not expose it? What I expected was something like:
Select 'Inspect Element' from page, which highlights the line in the Elements tab
Right-click the line and select 'Go to function definition'
Correct script is loaded in the Scripts tab and it jumps to the function definition
First off, does this functionality exist and I'm just missing it?
And if it doesn't, I'm guessing this would come from WebKit, but couldn't find anything for Developer Tool feature requests or WebKit's Bugzilla.
Lets say we're looking for function named foo:
(open Chrome dev-tools),
Windows: ctrl + shift + F, or macOS:
cmd + optn + F. This opens a window for searching across all scripts.
check "Regular expression" checkbox,
search for foo\s*=\s*function (searches for foo = function with any number of spaces between those three tokens),
press on a returned result.
Another variant for function definition is function\s*foo\s*\( for function foo( with any number of spaces between those three tokens.
This landed in Chrome on 2012-08-26
Not sure about the exact version, I noticed it in Chrome 24.
A screenshot is worth a million words:
I am inspecting an object with methods in the Console. Clicking on the "Show function definition" takes me to the place in the source code where the function is defined. Or I can just hover over the function () { word to see function body in a tooltip. You can easily inspect the whole prototype chain like this! CDT definitely rock!!!
Hope you all find it helpful!
You can print the function by evaluating the name of it in the console, like so
> unknownFunc
function unknownFunc(unknown) {
alert('unknown seems to be ' + unknown);
}
this won't work for built-in functions, they will only display [native code] instead of the source code.
EDIT: this implies that the function has been defined within the current scope.
2016 Update: in Chrome Version 51.0.2704.103
There is a Go to member shortcut (listed in settings > shortcut > Text Editor). Open the file containing your function (in the sources panel of the DevTools) and press:
ctrl + shift + O
or in OS X:
⌘ + shift + O
This enables to list and reach members of the current file.
Another way to navigate to the location of a function definition would be to break in debugger somewhere you can access the function and enter the functions fully qualified name in the console. This will print the function definition in the console and give a link which on click opens the script location where the function is defined.
Different browsers do this differently.
First open console window by right clicking on the page and selecting "Inspect Element", or by hitting F12.
In the console, type...
Firefox
functionName.toSource()
Chrome
functionName
in Chrome console:
debug(MyFunction)
MyFunction()
I find the quickest way to locate a global function is simply:
Select Sources tab.
In the Watch pane click + and type window
Your global function references are listed first, alphabetically.
Right-click the function you are interested in.
In the popup menu select Show function definition.
The source code pane switches to that function definition.
I had a similar problem finding the source of an object's method. The object name was myTree and its method was load. I put a breakpoint on the line that the method was called. By reloading the page, the execution stopped at that point. Then on the DevTools console, I typed the object along with the method name, i.e. myTree.load and hit Enter. The definition of the method was printed on the console:
Also, by right click on the definition, you can go to its definition in the source code:
In Google chrome, Inspect element tool you can view any Javascript function definition.
Click on the Sources tab. Then select the index page. Search for the
function.
Select the function then Right-click on the function and select
"Evaluate selected text in console."
If you are already debugging, you can hover over the function and the tooltip will allow you to navigate directly to the function definition:
Further Reading:
Chrome DevTools > JavaScript Debugging Reference
You encounter VM defined JS function ,you can try this command in Chrome console panel below.
Like this:
foo function name is window.P.execute
>window.P.execute.toString()
<'function(d,h){function n(){var a=null;e?a=h:"function"===typeof h&&(p.start=w(),a=h.apply(f,wa(d,k,l)),p.end=w());if(b){H[d]=a;a=d;for(da[a]=!0;(z[a]||[]).length;)z[a].shift()();delete z[a]}p.done=!0}var k=g||this;"function"===typeof d&&(h=d,d=E);b&&(d=d?d.replace(ha,""):"__NONAME__",V.hasOwnProperty(d)&&k.error(q(", reregistered by ",q(" by ",d+" already registered",V[d]),k.attribution),d),V[d]=k.attribution);for(var l=[],m=0;m<a.length;m++)l[m]=\na[m].replace(ha,"");var p=B[d||"anon"+ ++xa]={depend:l,registered:w(),namespace:k.namespace};d&&ya.hasOwnProperty(d);c?n():ua(l,k.guardFatal(d,n),d);return{decorate:function(a){U[d]=k.guardFatal(d,a)}}}'
so we got full function code.
I want to listing all input elements in console of firebug so in console window write the followings:
var inputs = $(":input");
console.log(inputs);
but when I press the Run in console appear null
also when I write just var inputs = $(":input"); the console show Undefined I sure the page have a lot of input elements, where is the problem?
There is nothing wrong with the provided snippet.
Though, without specifying what to write (using console.log) firebug will print whatever the last statement returned, when declaring a variable using var the result is always undefined.
var inputs = $(":input"); // firebug printing 'undefined' is valid
var abc = 123; // results in the same thing
Please make sure that the website in question actually uses jQuery (bound to global $), and that there really are input elements present in the DOM.
Also make sure that the jQuery version running is of a version later/equal to 1.0 (:input selector didn't exists until then).
If it has jQuery it probably is of a more recent version, how ever; without you providing us with additional information there is no way to guarantee it.
simply go to the firebug console and wrtie as #refp mentioned the page in question must have jquery included
$(":input")
press run