0

I have a piece of code* that should run properly, but it seems that it only runs in:

  • JSFiddle
  • StackSnippet if you are using Edge

It doesn't run in (only tested in my Win 11 machine):

  • StackSnippet in Firefox (95.0.2 64-bit)
  • In Edge, which is opened by VSCode
  • In my website

There is simply nothing in the log. I learn about Edge's debugger but I don't know what event listener breakpoint should be used, since this should load without user interaction. The other types of breakpoint are empty (except CSP violation breakpoints), which I don't think relevant here.

I try to add debugger in various places in the function, before and after the loop (see in the code), but it only stops at the breakpoints outside the function. Of those, I don't see anything pop up in the Variables or Watch panels.

User @charlietfl in the meta question about this issue says:

I get "operation is insecure" error thrown in FF on win 10. That is possibly due to some of the features that snippets disable. For example they disable access to API's like localStorage and postMessage

The fact that the same code run perfectly fine in some engines indicates that there is nothing wrong with the code, but in the engines. Is that correct?

Is there a way to debug this?

function myfunction(context, id, func, str) {
    context[id] = undefined;
    debugger;
    return context[func] = function() {
        var config = {
            containerId: id,
            initialCypher: str,
            neo4j: {
                serverUrl: 'bolt://b95e1176.databases.neo4j.io',
                serverUser: 'neo4j',
                serverPassword: 'jgqHo9s6c2fCRv_mT2l1S693dSQ0GKYYC0LZ5Rn7XI8',
                driverConfig: {
                    encrypted: "ENCRYPTION_ON",
                    trust: "TRUST_SYSTEM_CA_SIGNED_CERTIFICATES"
                },
            },
            labels: {
                note: {
                    label: "wrappedname",
                    group: "group",
                    value: "degree_und",
                },
            }
        }
        debugger;
        context[id] = new NeoVis.default(config);
        debugger;
        context[id].render();
        debugger;
        console.log(`function ${func} was called and ${id} is the id`);
    };
}
debugger;
for (let item of document.querySelectorAll("#foo, #lorem, #dolor")) {
    myfunction(window, item.id, item.getAttribute("data-function"), item.innerText)();
}
debugger;
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>

<div id="foo" data-function="bar">match (n)-[r]-(m) return n,r,m</div>
<div id="lorem" data-function="ipsum">match (n)-[r]-(m) where n.gid='Cx' and m.gid='Cx' return n,r,m</div>
<div id="dolor" data-function="es">match (n)-[r]-(m) where n.gid='Kt' and m.gid='Kt' return n,r,m</div>

Here is the expected result:

*Suggested from A piece of JS code is needed to use multiple times with different values and function names. How to do it efficiently?

Ooker
  • 1,969
  • 4
  • 28
  • 58
  • 9
    Might not be the best idea to post your credentials in a publically-viewable question. – Pointy Jan 02 '22 at 18:11
  • I have thought about that before posting it. I think it's not that impacful, plus that I can always change the password after having the solution. Obviously without the credentials you cannot help me debug it – Ooker Jan 02 '22 at 21:55
  • When are you loading the scripts? If you're loading them in the head, they will get executed before the elements it's targeting exist. – yaakov Jan 03 '22 at 05:23
  • The stack snippet actually works fine for me. – Bergi Jan 03 '22 at 05:53
  • There's the classic [Code working in jsFiddle but not in browser](https://stackoverflow.com/q/4637873/1048572) (in lots of variations) but that doesn't appear to be your problem – Bergi Jan 03 '22 at 05:58
  • "*In my machine there is simply nothing in the log.*" - have you tried firing up a debugger and stepping through the code line by line? How far does it get? Is your function called at all? – Bergi Jan 03 '22 at 05:59
  • @Bergi that's interesting. I open Edge and the StackSnippet works fine to me, while in Firefox it doesn't. But when I run it in VSCode, and VSCode opens Edge, it doesn't work. I learn about [Edge's debugger](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/javascript/#step-3-pause-the-code-with-a-breakpoint) but I don't know what event listener breakpoint should be used, since this should load without user interaction. The other types of breakpoint are empty (except [CSP violation breakpoints](https://developer.chrome.com/blog/csp-issues/)), which I don't think relevant – Ooker Jan 03 '22 at 10:23
  • @yainspan can you tell how to answer this question? The code is simply as is, there is no `` tag if that's what you are referring to – Ooker Jan 03 '22 at 10:29
  • You can have a `debugger;` command around the point that you intend to debug. That way, when you load the page, you can see what the values are and what happens in each step. So far we know that the end result differs from the expectations you have, but the main question is: when is the behavior first deviating from the expectations? For that you need to debug, even if it should work without user interaction. The problem can be caused by a zillion potential causes, so here the best chances that you have in order to find an answer is with debugging. – Lajos Arpad Jan 03 '22 at 12:21
  • The fact that the snippet works proves that your current approach is robust by itself. So, something prevents it from working at your actual project. We need to find out what is the exact cause. For that purpose I recommend step-by-step debugging. – Lajos Arpad Jan 03 '22 at 12:22
  • @LajosArpad I try to add `debugger` in various places in the function, before and after the loop (see in the code), but it only stops at the breakpoints outside the function. Of those, I don't see anything pop up in the Variables or Watch panels. – Ooker Jan 03 '22 at 13:34
  • @Ooker Does `document.querySelectorAll("#foo, #lorem, #dolor")` return the elements? If it returns an empty list, the `myfunction` won't get called. – Bergi Jan 03 '22 at 17:46
  • @Bergi I type `document.querySelectorAll("#foo, #lorem, #dolor")` in the console log and it returns `NodeList(3) [div#foo, div#lorem, div#dolor]` as expected – Ooker Jan 03 '22 at 17:58
  • No, I mean in the page, when the code runs. Put in a temp variable before iterating over it, then inspect its value while debugging – Bergi Jan 03 '22 at 18:10
  • @Bergi you are right. I put `console.log(document.querySelectorAll("#foo, #lorem, #dolor"))` into the code and it returns nothing. I wonder why that would be? – Ooker Jan 04 '22 at 06:42
  • Maybe because [the usual reason why a DOM method such as getElementById does not find the element?](https://stackoverflow.com/q/14028959/1048572) – Bergi Jan 04 '22 at 07:19
  • @Bergi thank you so much. Should I close this question as duplicate? – Ooker Jan 04 '22 at 07:31
  • If this solved the issue, yes. – Bergi Jan 04 '22 at 07:34
  • @Bergi thank you for your help. I open a subsequent question here. Hope to see you there: [For the same code which is supposed to not be able to find the elements, why do some interpreters can still find it?](https://stackoverflow.com/q/70575477/3416774) – Ooker Jan 04 '22 at 07:46
  • @Ooker `#foo, #lorem, #dolor` is the selector of the ids from a proof-of-concept. Now that we know that this selector returns nothing in your page I think I know what your issue is. You would need to make your HTML elements to be processed recognizable by adding some ids to them or a class to all of them. Once you are able to successfully select the elements, you will need to set their `data-function` attribute as well so it will be clear what function name needs to be defined for each of them. Their inner text needs to be the `string` that will be used in the config. – Lajos Arpad Jan 04 '22 at 10:18
  • @Ooker the HTML of `
    string1
    ` in the answer to your original question has 1. an id called `foo` that the selector is finding, a `data-function` with the value of `bar` and an inner text of `string1`.     – Lajos Arpad Jan 04 '22 at 10:19
  • @LajosArpad yes, I have made sure that the ids of the divs match with the ones listed in `querySelectorAll` – Ooker Jan 04 '22 at 10:50

0 Answers0