How can I find the place in my code or page where the location is set?

Question

I tried global event listeners pane in Chrome DevTools, I tried to put a debugger; inside document/window.addEventListener("unload", ...) and it is not working.

I tried to step over the statements in the file main.ts and nothing is breaking the code in there when I click on a link that should open another page than the one it is opening. I checked its HTML attributes and the correct URL is set in its href attribute. The link has a single class which is not used to open another page in the page's code as far as I know.

I also searched for all the places in my code where the (window.)location is changed.

I also updated npm packages using npm update.

I use KnockOut.js and I have this static HTML for the links that go to wrong pages:

<ul class="main-nav" data-bind="foreach: mainMenuItems">
  <li>
    <a data-bind="attr: { href: url, title: text }, text: text, css: { active: $data == $root.activeMenuItem() }"></a>
    <div class="bg"></div>
  </li>
</ul>

And this is a part of the TypeScript code (sorry for the ugly code, it is WIP):

let vm = new PageViewModel(null, "home", () => {
    sammyApp = $.sammy(function () {
        // big article URLs w/ date and slug
        this.get(/\/(.+)\/(.+)\/(.+)\/(.+)\/(.*)[\/]?/, function() {
            vm.language("ro");
            vm.isShowingPage(false);
            vm.isShowingHomePage(false);

            let slug : string = this.params['splat'][3];
            vm.slug(slug);
            console.log('logging', { language: vm.language(), slug: vm.slug() });
            vm.fetch();
            vm.isShowingContactPage(false);
            vm.activeMenuItem(vm.getMenuItemBySlug(slug));
        });

        // any other page
        this.get(/\/ro\/(.+)\//, function () {
            console.log('pseudo-navigating to /ro/etc.');

            vm.language("ro");
            vm.isShowingPage(true);
            vm.isShowingHomePage(false);

            let slug : string = this.params["splat"][0];
            //slug = slug.substr(0, slug.length - 1);

            if (slug !== 'contact') { // this page is in the default HTML, just hidden
                vm.slug(slug);
                vm.fetch();
                vm.isShowingContactPage(false);
            } else {
                vm.isShowingContactPage(true);

                window.scrollTo(0, 0);
            }
            vm.activeMenuItem(vm.getMenuItemBySlug(slug));
        });

        this.get(/\/en\/(.+)\//, function () {
            console.log('pseudo-navigating to /en/etc.');

            vm.language("en");
            vm.isShowingPage(true);
            vm.isShowingHomePage(false);

            let slug : string = this.params["splat"][0];
            //slug = slug.substr(0, slug.length - 1);

            if (slug !== 'contact') { // this page is in the default HTML, just hidden
                vm.slug(slug);
                vm.fetch();
                vm.isShowingContactPage(false);
            } else {
                vm.isShowingContactPage(true);
, () => {
                uuuuucons
            }9 function
                window.scrollTo(0, 0);
            }
            vm.activeMenuItem(vm.getMenuItemBySlug(slug));
        });

        // the home page
        this.get("/", function () {
            console.log(`pseudo-navigating to /${vm.language()}/home`);

            sammyApp.setLocation(`/${vm.language()}/home`);
        });
    });
    sammyApp.run();
});

I have this code that catches the click event:

$("a").on("click", () => {
  debugger;
});

But after this finding I do not know what I can do to find the source of the problem.

When the click is catched by the 3 LOCs above, I get this:

What could be the issue?

Thank you.

Update 1

After seeing these questions and their answers (the only thing I did not try was using an iframe):

If I have a page for which I check the beforeunload and unload event checkboxes in the Event Listener Breakpoints pane in Chrome DevTools' tab Sources, and I click on a link which should not reload the page but it does, and the two breakpoints (beforeunload and unload) are not triggered in this process, what should I do next?

Is this a known bug? If so, can someone give me an URL?

Thank you.

If your `` doesn't have a proper href clicking it will reload the page and so far it sounds like the thing you observe so double-check the url, maybe it has invalid characters. — wOxxOm, May 23 '20 at 14:58
Does this answer your question? [Breakpoint right before page refresh?](https://stackoverflow.com/questions/39065562/breakpoint-right-before-page-refresh) — OfirD, May 25 '20 at 09:03
@wOxxOm I see in the DevTools that the `` has a valid `href`. I also put it in a text editor and it does not have invalid characters. — silviubogan, May 30 '20 at 09:35
@HeyJude It could, because it is the same question, but no answer in there works for me. — silviubogan, May 30 '20 at 10:34
@HeyJude I updated the question with a list of the related questions, and a more clarified question. — silviubogan, May 30 '20 at 10:48
Just to clarify: the navigation to the wrong url happens when something is being clicked, and you can't find what's triggering that click? — OfirD, Jun 01 '20 at 10:46
@HeyJude Yes. I opened a new question to what I believe is the actual problem in my case: https://stackoverflow.com/questions/62102828/rewrite-rules-for-bilingual-single-page-website. Thank you. — silviubogan, Jun 06 '20 at 11:44

How can I find the place in my code or page where the location is set?

Update 1

0 Answers0