How can ordinary, top level functions, that are part of the default closure be exposed to the JS console in the browser (for debugging reasons)?
// default.js
function iWantToCallThisFunction() {
console.log("test successfull");
}
There's this answer from 2014, which doesn't seem to be valid anymore: https://stackoverflow.com/a/9054881/6204346
At least a current Chrome can't find the function and defaults to undefined.
Flagging the function with export doesn't seem to make a difference. It would probably be possible but inconvenient to safe the function in the window. Is there a better way?
That's very strange that it's showing as undefined. If you want to view the contents of the function (and it's already loaded and declared) just type iWantToCallThisFunction without the parenthesis at the end. If you want to call the function, just type iWantToCallThisFunction() with parenthesis. You could also try setting the function as a variable. I think that this is because the function isn't actually being created by the time you go into the JavaScript console. Make sure the right JavaScript file is connected, and that there's no errors. If the file has other stuff in it, that might be interfering with this function being made, so maybe try it in a blank file by itself.
Related
I've created custom js function. It worked on console, however I tried to transfer it to GTM using custom js variable function, it returned undefined. The function transfers a string to integer and removes whitespaces.
function(){
a= parseInt(google_tag_manager["GTM-000000000"].dataLayer.get("gtm.element").querySelectorAll("div>div>div>div")[27].querySelector("div>input").getAttribute("value").replace(/\s/g, ""));
return a}
it returns undefined((
No, the function does a lot more than you indicated. All the dom scraping The reason for it "not firing" in GTM may be due to timing. However, you're not supposed to use this kind of global scope code in GTM.
GTM kindly provides you with a {{Clicked Element}} which you can definitely use in your GTM custom JS code. So your code would become something like:
return {{Clicked Element}}.querySelectorAll("div>div>div>div")[27].querySelector("div>input").getAttribute("value").replace(/\s/g, ""));
Still, you can debug it. You can console.log your google_tag_manager["GTM-000000000"].dataLayer.get("gtm.element") from GTM and then debug it further in your console. The console nowadays allows you to copy a consol logged object, put it in a var and query against it.
I've got some code that is occasionally exhibiting unexpected behavior that is hard to reproduce. I'm trying to see what is happening by running:
node --inspect client.js
It gives me a URL which I click, and then Chrome comes up with a console. Now I wait for the bad state to be encountered, and then I want to inspect the value of various variables in main.js (which are in term other objects I can dig into) in order to try to figure out what is going on.
However, I can't see any of my variables! I can see the global scope, but it has no variables from my code in it. How can I introspect the state of my program without having to think too far ahead, i.e. I could expose some variable to the global scope and hope that doesn't cause any side-effects, but then what if the issue is occurring somewhere I didn't think to expose? I want to set everything up and only have to run one time because this is a rather difficult problem to reproduce and may take a substantial amount of time, so once it gets into this state I have to be able to do everything I need to find the problem without losing the current program state.
Edit: Also to add, placing breakpoints is not necessarily helpful, because everything is event driven, and these is no guarantee I can trigger an event, or that it won't change the state in a way the interferes with trying to determine why the program is in a bad state, or that I can see the scope I need to look at from the scope where the event occurs.
Update: I tried adding a bit of code in my main module and then exporting all the top-level variables:
global.main=module
module.exports = {
var1:var1,
...
var99:var99
}
This part seemed to work ok, but I still don't have access the to internal state of objects. To accomplish this, I tried adding a debug function to each object which simply had a debugger statement to stop the debugger, like so:
function SomeOjbect(...) {
var me = this
...
me.debug = function() {
console.log("In debugger")
debugger
}
...
}
The theory being that at this point all the local variables closed to the object would be inspectable. However, when I hit the debug statement and get a breakpoint, the inspection tools completely ignore all my efforts to inspect variables in the object - in the console I get no output, just another prompt, while in the watch window after I type in the variable and hit enter it disappears completely, as if I never even tried to enter a new variable. This happens even if I mention the name of the variable in the code before hitting the debugger to try to prevent it from being optimized out, e.g. when I change the above code to this:
console.log("In debugger")
me;
debugger
I still am unable to inspect me. (It does, however, print me to the console if I replace me; with console.log(me)!)
Update: Actually, it appears that I'm able to do nothing at all in the breakpoint. If I enter console.log("Test") in the console, it doesn't output anything either. If I let the code continue running, the commands I entered into the console don't even show up in history, and in fact I no longer am able to enter any new commands at all, they all continue to be ignored, and sometimes in the source tab all source code vanishes and I pretty much have to shut down the running program and start over because the debugger becomes useless.
What is the source code for the default alert() function in Javascript(method of the window object)? I am trying to write an alert function myself so I would really like to get a peek at the original function code.It is so hard to google it.
The alert() function, like a number of other standard functions, is a part of the browser's Javascript runtime. It cannot be replicated with Javascript code (other than by calling alert()), and there is no platform-independent Javascript source code to the function.
It's a compiled function, probably different for every browser, so there is no source JS code for it.
You've noticed when you call it how it takes over the whole browser - it's not a part of the webpage like a popup or something; so if you're trying to achieve something like that (control at a lower level of the browser), there's no way to do it from JS. If you only need a popup, there are tons of online resources about how it do it.
The source code for alert() is... alert()
It is a primitive Word. If you want details, they are yet in another language.
Interpreted directly by the browser.
I write a plugin for android browser and follow the npruntime rule to let it support JavaScript method. However, after I call the function of my plugin in JavaScript, I get different identifier number in NPAPI's pluginHasMethod() function. I am sure there is no typo error in my JavaScript code. Is there any idea to debug this situation?
Thanks in advance.
NPN_UTF8fromIdentifier is a function you have to provide yourself to call the correct function on the NPNFuncs that you were given when the plugin initialized.
The NPIdentifier is only guaranteed to be the same during the same browser instance; if you quit the browser and start a new one, it may change.
All NPN_* functions are not real functions; those are the "typical" names that you might use for them, but in actuality you are given a structure of function pointers of type NPNFuncs that will have a function pointer for each of the NPN_* functions; if you want those to actually work you need to create the NPN_UTF8FromIdentifier function, etc, and have it call the correct function pointer.
For more info see http://npapi.com/tutorial and http://npapi.com/tutorial2
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.