Chrome upload "too fast" for inspecting

Question

I have a stupid problem. I have a page which uses roundcube webmail. When I create a new mail and want to attach a file, there is a <li> element that is appended to a <ul> element while the file is uploading. After the upload is finished the <li> is removed and replaced with another element.

Because of reasons I need to somehow inspect the temporary <li> element. But since it's visible for too short time, I don't have enough time to really check it.

I am using the Roundcube Docker Container, and connecting to a remote iRedMail-server that I have no access to.

I have had the following ideas:

• Using a Chrome extension called DOMListener to see the element. I do see it there, but I cannot see the content/html for the element.
• Increase the max file size. The current max file size is 5.0 MB, and I have tried increasing that by changing .htaccess, setting upload_max_filesize = 100M; according to https://docs.iredmail.org/change.mail.attachment.size.html. This did not work, I can still only upload files <= 5MB.
• Slowing down the upload somehow. I have no idea how.
• Searching the code for the actual element class (uploading) but I cannot find it.

Does anyone have any idea what I can try?

Answer 1

In Developer tools you have a Throttling option available.

Go to Network tab and select Throttling Dropdown. You can add your custom limits as you wish and cycle around them.

Answer 2

Copy this code to the browser inspector console:

let count = document.getElementsByTagName('li').length;
setInterval(() => {
    if (count !== document.getElementsByTagName('li').length) {
        count = document.getElementsByTagName('li').length;
        console.log(document.getElementsByTagName('li'));
    }
}, 1);

You'll see all the "li"s tag when there's any li tag is added to the DOM, find and check it.

You can also see all the innerHTML instead of the HTML Element (or attributes) if you replace

console.log(document.getElementsByTagName('li'));

with

console.log(Array.from(document.getElementsByTagName('li')).map((item) => item.innerHTML));

Hope this help