When I open the console, I would like to be able to search for a value instead of having to browse through it. Is there any easy way to do it ?
For instance, in the case below I used console.log(element.style) in JS. I would like to be able to input somewhere in the console height or 100px and that every occurrence appears instead of having to browse through the output (see below).
Is there any easy way to achieve that in Firefox ?
You can right click on CSS2Properties => Store as Global Variable, and the variable temp will be available in the console
I used to see all my javascript objects content like this before:
But now, I don't know why but it doesn't show their content at all:
I use visual studio 2015 community with cordova and Ripple emulator.
I tried to create a new project or even tried to uninstall / reinstall VS2015, but it didn't work.
To make it more clearly, I don't have the "expando-toggly" button on the left of my objects any more.
Do you have any idea about the reason ? I just use console.log and console.error as I always did before.
To make it more clearly, I don't have the "expando-toggly" button on the left of my objects any more. Do you have any idea about the reason ?
console.log/console.error take two arguments, the first is argument is the string message, which will be printed as a string in js console. The second is the object message, which can be expanded like an object.
So if you want to log the object in javascript console. You simply need to pass the object as the second argument to console.log/console.error.
ex:
var parentElement = document.getElementById('deviceready');
console.log("parentElement: ", parentElement);
and the result:
Using a JS bookmarklet to set a custom field in the Wordpress Edit Post screen. The following code works well when I copy/paste it into the console (latest Chrome stable):
document.getElementById('metakeyselect').value = "foo";
document.getElementById('metavalue').value = "bar";
document.getElementById('meta-add-submit').click();
Works without a hitch; I jut paste this into the console, and a new custom var is added to the post (I have "foo" as a var name in WP already).
In bookmarklet form, this same code looks like this:
javascript:document.getElementById('metakeyselect').value = "foo";document.getElementById('metavalue').value = "bar";document.getElementById('meta-add-submit').click();
And it fails: When I click it, the Name and Value boxes are filled in, but nothing gets submitted. The console shows the following error:
Uncaught TypeError: Cannot call method 'click' of null
Any idea why? Same exact code, same browser, same page.
I had a similar problem and am quite sure that's what causes your code to break too.
My minimal example would be the following code on this website (should work afor the entire stackoverflow.com domain):
document.getElementsByName("q")[0].value="foo";
This should write "foo" to the search field (that has no id but is the only element with the name "q"). Both web console and bookmarklet will set the value as expected but the bookmarklet will also change the page to an empty header and a body containing only the word "foo" after a short delay. Assuming that this is not a random bug that only applies to me, the reason for the thrown exception in your example is that the bookmarklet sets the value "foo", then "bar" but changes the content of the web page to "foo", then "bar" before your last line terminates.
Unfortunately I don't know the reason for this behaviour (I found this question looking for that exact information) but that is what most likely causes the TypeError in your excample.
It is possible that the same code runs without any problems when used in a Greasemonkey script (e.g. as the onclick script of a button you added using Greasemonkey).
[Edit:] Apparently, if a bookmarklet evaluates to anything other than undefined, the inner html of the website is replaced by a string representation of that value. To make sure that the bookmarklet evaluates to undefined, you can just type undefined as the last line outside of any condition block. unfortunately that means it is less likely that my assumption toward OP's error is correct but at least future visitors still might find this information usefull.
It looks like the code you use in console works ok.
It seems like the method you turn console code into a bookmarklet is what might result into an error.
The basic IIFE-construction, i.e. Immediately Invoked Function Expression, looks like this:
javascript:(function () {
/*code here*/
})();
Therefore, the code that is supposed to work might be this.
javascript:(function () {
document.getElementById('metakeyselect').value = "foo";
document.getElementById('metavalue').value = "bar";
document.getElementById('meta-add-submit').click();
})();
Does it solve your problem?
I have a Javascript application that relies on capturing keyboard events in a textarea. While testing and debugging it on Firefox (14.x) with firebug (1.10.2) I noticed that my application behaves differently when I have breakpoints active and the debugger is working.
I know how to detect Firebug but I would like to know if it is possible to detect (with Javascript) when the Firebug is actually used for debugging?
Edit: here is an example on some random site
This site catches the key event in an input box, prints out character code and replaces the pressed key with a text representation (ie. "enter" for enter key) or an uppercase (if a letter).
When I debug it with Chrome and place a breakpoint on the listener function, nothing happens when the breakpoint is reached (as expected), when I resume the script the text is printed out as normal.
When I debug it with Firebug on Firefox: Let us say that previously I pressed the "e" letter and the input bar contains text "E". I turn on the breakpoint and press letter "z". Firebug stops at the breakpoint but the input bar now has text "Ez" instead of "E". When I resume the script, this text is replaced with "Z" as expected.
I tried out another Firefox debugger (Venkman 0.9.89) and the same thing happened. So my guess is this is a Firefox problem, not the debugger problem. So the question might be more general, can it be detected when is the Javascript code being debugged?
This is what I do to detect Firebug:
if (window.console && (window.console.firebug || window.console.exception)) {
// At this point, Firebug is enabled
}
The first test is important to make sure that the console actually exists The second one will test for Firebug, although it will only work for older versions of it. The third one is there as Firebug adds the "exception" This is because the property "exception" is added by Firebug's plugin.
(Unrelated but interested: window.console.exception is the method used by Firebug to display a message onto the console. For example, type:
>>> window.console.exception("A message", {param:'Value'})
You will see an error that will look very familiar, with a dump of the passed object!
Merc.
Well, hope this answer will help someone.
Let function we debug to be such as:
function debugged()
{
debugger;
}
setTimeout(debugged, 3000);
add this debug detection code is:
setTimeout(this.x = function(a){ s = Math.abs(new Date() - a.c - 1000); a.c = new Date(); setTimeout(a.foo,1000, a); if(s>100)console.log("debug") },1000, {c: new Date(), foo:this.x})
so if we run it in some place and open debugger, it will trigger breakpoint and debug event will be catched(you can see it by "debug" word appearing in console). This is a concept, you may change detection period time and a way of raising debug flag. Thanks to single-threaded javascript.
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.