Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Set breakpoint on loading time

H

hebrerillo

Active Coder
Hello there!

Sometimes, I want to locate a code that is changing a DOM element. For example, on Chrome I can set a breakpoint "On attribute modifications" for a specific DOM element, so the browser will break when such element has attribute modifications, and I can inspect the code.

However, that does not work when the attribute modifications happen on loading time. And that is my problem, because I want to locate a code that is modifying a DOM element on loading time.

How can I do that?

Thanks in advance!
 
Solution
H
@EkBass @cbreemer thank you both for your help!

I came up with two solutions.

Actually, @EkBass idea was close.

Let's say I want to find a code that is inserting a new attribute ''data-lodaded=true", in a div with class ''target"

The first solution is to insert a "debugger" statement right after the div. This solution is only possible if you have access to the code:

HTML: 
<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Document</title>
        <script>
            //This code is place here as an example, but could be anywhere in the code. It is the code to be found.
            document.addEventListener("DOMContentLoaded", () => {
                const target = document.querySelector(".target")...
Sort by date Sort by votes
I could be wrong but I don't think you can do that. The DOM is not guaranteed to be complete until the page is fully loaded. It seems to make sense that DOM breakpoints will not work before that.
 
Upvote 0 Downvote
Is it possible, if you create somekind of mutation observer that causes pause once something is changed. Then by checking call stack you can find what causes them? Or am i talking about something different here lol
 
Upvote 1 Downvote
EkBass said:
Is it possible, if you create somekind of mutation observer that causes pause once something is changed. Then by checking call stack you can find what causes them? Or am i talking about something different here lol
Click to expand...
That seems to be exactly how a data breakpoint works !? Still not going to work on a document that is not fully loaded yet, I think.
 
Upvote 0 Downvote
@EkBass @cbreemer thank you both for your help!

I came up with two solutions.

Actually, @EkBass idea was close.

Let's say I want to find a code that is inserting a new attribute ''data-lodaded=true", in a div with class ''target"

The first solution is to insert a "debugger" statement right after the div. This solution is only possible if you have access to the code:

HTML: 
<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Document</title>
        <script>
            //This code is place here as an example, but could be anywhere in the code. It is the code to be found.
            document.addEventListener("DOMContentLoaded", () => {
                const target = document.querySelector(".target");
                target.dataset.loaded = true;
            });
        </script>
    </head>
    <body>
        <div class="target">
            The target
        </div>
        <script>
            debugger; //Here you can inspect the target element in the inspector tab and set a breakpoint on attribute modification
        </script>
    </body>
</html>

Once the browser stops in the debugger statement, you can go to the inspector tab and listen for attribute modifications in the div target.

If you do not have access to the code, the only solution I found is to add a browser extension, and implement a mutation observer.

JavaScript: 
const callback = (mutationList) => {
    for (const mutation of mutationList) {
        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
            mutation.addedNodes.forEach(addedNode => {
                if (addedNode.classList?.contains("target")) {
                    debugger; //Here you can inspect the target element in the inspector tab and set a breakpoint on attribute modification
                }
            });
        }
    }
};
const config = {attributes: true, childList: true, subtree: true};
const mutationObserver = new MutationObserver(callback);
mutationObserver.observe(document, config);

Of course, this code should be executed before the DOM is loaded. To do that, in Chrome manifest file, add this to the content file:

JSON: 
"content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"],
            "run_at": "document_start"
        }
    ],


That is why I said that @EkBass solution was pretty close 😀

Thank you all so much!
 
Upvote 0 Downvote
Solution

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom