Debugging JavaScript questions

in the web browser Inspect module, you should able to find a Debugger, then you can click on the line number to set a break point for debugging.


the concept is pretty much the same as how you debug in VBA Editor.

Hi Rayn,

I know about setting breakpoint in Chrome, my question was about those other items listed above that exists in VBA and I cannot seem to find them in JavaScript debugger.

For Example #2 above, see attached how easily it is to do it in Access, would like to see how is that done in JavaScript?

Thanks,
Ben
Untitled.png

Ben

What debugging functionality are you referring to in point 2?

Do you mean the ability to drag the yellow bar that indicates the current/next line of code execution up/down?

@bfuchs

do you mean the "Immediate Window" feature for web page debugging?

Hi,

Do you mean the ability to drag the yellow bar that indicates the current/next line of code execution up/down?

Yes.

do you mean the "Immediate Window" feature for web page debugging?

That too, see attached.

At #1, I meant to ask, why is F11 not stepping thru the entire code below for example.

function saveBrowserInfos(redirectionURL) {
    var url = "https://MyAcct.caspio.com/dp/12345/emb";
    (function($, nextURL){
        var div = document.createElement("div");
        var id = "id" + (new Date().getTime());
        div.id = id;
        div.style.display = "none";
        var script = document.createElement("script");
        script.src = url;
        div.appendChild(script);
        document.addEventListener('DataPageReady', function (event) {
            $("#InsertRecordDatapage").val(encodeURIComponent(JSON.stringify(bowser)));
            $("[name*=ParamVirtual1]").val(bowser.version);
            var xip_Nurse_UserName = $("#xip_Nurse_UserName").val();
            $("#" + id + " [name*=Nurse_UserName]").val(xip_Nurse_UserName);
            var form = $("#" + id + " form");
            var action = form.attr("action");
            $.post(action, form.serializeArray(), function() {
            // UNCOMMENT THIS LINE IF YOU WANT TO REDIRECT USER TO A PAGE
            //  OR VIDEO SHOWING HOW TO UPGRADE IT'S BROWSER	
                    location.href = nextURL;
            }).always(function() {
                loginForm.submit();
            });
        });
        document.body.appendChild(div);
    })(jQuery, redirectionURL);
}

Select allOpen in new window

After the following line, it skips thru the end.

document.addEventListener('DataPageReady', function (event) {

Select allOpen in new window

Thanks,
Ben
Untitled.png

At #1, I meant to ask, why is F11 not stepping thru the entire code below for example.

you should able to, as long as it's part of the Javascript. (as what I have highlighted in my previous comment)

Alternatively, the purpose of it is to debug the web api/ web service http/https requests, you can use tool such as Postman for the testing.

Postman | The Collaboration Platform for API Development
https://www.getpostman.com/

// DECLARE A FUCTION "saveBrowserInfos"
function saveBrowserInfos(redirectionURL) {
    // DECLARE A VARIABLE url
    var url = "https://MyAcct.caspio.com/dp/12345/emb";
    // CREATE AN ANONYMOUS FUNCTION RECEIVING jQUERY and an URL as PARAMETER
    (function($, nextURL){
        // CREATE A DIV ELEMENT
        var div = document.createElement("div");
        // CREATE A VARIABLE AND SET ITS VALUE WITH "id" + A RANDOM NUMBER
        var id = "id" + (new Date().getTime());
        // SET ID ATTRIBUTE OF THE DIV ELEMNT WITH THE VARIABLE VALUE
        div.id = id;
        // SET THE DIV AS NOT VISIBLE AND TAKING NO SPACE
        div.style.display = "none";
        // CREATE A SCRIPT ELEMENT
        var script = document.createElement("script");
        // SET THE URL OF THE SCRIPT WITH THE URL VARIABLE LINE 4
        script.src = url;
        // ADD THE SCRIPT ELEMENT TO THE DIV ELEMENT
        div.appendChild(script);
        // LISTEN TO THE EVENT "DataPageReady" FIRED WHEN A NEW DATAPAGE IS LOADED
        // RUN A FUNCTION WHEN THIS EVENT HAPPEN
        document.addEventListener('DataPageReady', function (event) {
            // SET VALUE OF THE ELEMENT WITH THE ID "#InsertRecordDatapage" WITH AN ENCODED AND STRINGYFIED VALUE OF "bowser" VARIABLE
            $("#InsertRecordDatapage").val(encodeURIComponent(JSON.stringify(bowser)));
            // SET VALUE OF THE ELEMENT WITH THE NAME CONTAINING "ParamVirtual1" WITH "bowser.version" VALUE
            $("[name*=ParamVirtual1]").val(bowser.version);
            // GET VALUE OF THE ELEMENT "xip_Nurse_UserName"
            var xip_Nurse_UserName = $("#xip_Nurse_UserName").val();
            // SET THE VALUE OF THE ELEMENT WITH A NAME CONTAINING "Nurse_UserName" 
            // WITH THE VALUE OF "xip_Nurse_UserName"
            // INSIDE AN ELEMENT WITH THE DIV ELEMENT, SEE LINE 8
            $("#" + id + " [name*=Nurse_UserName]").val(xip_Nurse_UserName);
            // GET A REFERENCE TO A FORM INSIDE THE DIV ELEMENT, SEE LIN 8
            var form = $("#" + id + " form");
            // GET ACTION OF THE FORM
            var action = form.attr("action");
            // POST THE FORM USING AJAX
            $.post(action, form.serializeArray(), function() {
            // UNCOMMENT THIS LINE IF YOU WANT TO REDIRECT USER TO A PAGE
            //  OR VIDEO SHOWING HOW TO UPGRADE IT'S BROWSER	
                    location.href = nextURL;

            })
            // IF THE AJAX CALL FAIL OR NOT
            .always(function() {
                // SUBMIT THE FORM REFERENCED BY loginForm
                loginForm.submit();
            });
        });
        // ADD THE DIV ELEMENT TO THE PAGE
        document.body.appendChild(div);
    })(jQuery, redirectionURL);
}

Select allOpen in new window

Hi Experts,

#1,
It seems like Adding a breakpoint where Norie suggested did get me into that function, however wondering why its only happening at the 2nd time, while at the first time its not executing the following

 location.href = nextURL;

Select allOpen in new window

#2,
I did find the following partially addressing the issue of getting the code to to re-execute.
https://stackoverflow.com/questions/29053247/step-back-to-previous-line-in-script-with-devtools-debugger
However would really appreciate if someone can figure out how to have full control over it just the way I had in Access,  that you can choose any line of code either forward or backwards and set the next line to be executed, or even to skip some lines w/o having to comment them out.

Thanks,
Ben

Ben

Javascript doesn't work in the same way as VBA, i.e. execute the code strictly top to bottom, left to right etc.

@Norio,

But F11 does seem to work that way, and therefore would assume there must be a way to handle this somehow.
Also the entire concept of a breakpoint would not be valid if code its not being executed in order its written.

Thanks,
Ben

Ben

A breakpoint only tells the debugger to stop on a line when the line is executed, the order of execution doesn't really come into it.

Also, a lot of stuff in Javascript is driven by events which are out of your hands.

use the keyword "debugger"
and/or
be sure to run your code when the debugger console is already opened else your code run, pass your breakpoint away, you open the console but job is already done

Hi,

use the keyword "debugger"

How will that solve my issues, and what are the benefits of it?

the order of execution doesn't really come into it.

But again, why when stepping thru code using F11 key it seems to go in order?

BTW, another major option is missing in the JavaScript debugger (Chrome).
When I want to change something at the spot while running the code, its not possible.
While in Access besides of being able to temporarily change the code for testing at execution time, I can also save it there permanently if I decide to.

I'm kind of newbie when it comes to JavaScript programming, but at least if I would have the right tools to deal with, would make the learning curve much easier.

In Access all this features existed since the first version if I'm not mistaken (about 20 years back), its about time JavaScript picks up some tools from there...

Thanks,
Ben

Ben

Have a look here for more information about Javascript debugging.

PS That's the first promising result I found when doing a simple Google on 'Javascript debugging'.

Hi Norie,
Leaving the office early today, would like to go over in more details this subject (perhaps will close this thread and open a new one to cover these in deep), just came across the following which sort of answers my #2Q.
Have a nice weekend!
Thanks,
ben

Ben

That thread appears to be from 2012 and it seems to be referring to adding debugging to the code.

Thank you!