简体   繁体   English

Chrome上传“太快”无法检查

[英]Chrome upload "too fast" for inspecting

I have a stupid problem.我有一个愚蠢的问题。 I have a page which uses roundcube webmail.我有一个使用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.当我创建一个新邮件并想要附加一个文件时,有一个<li>元素在文件上传时附加到一个<ul>元素。 After the upload is finished the <li> is removed and replaced with another element.上传完成后, <li>被删除并替换为另一个元素。

Because of reasons I need to somehow inspect the temporary <li> element.由于某些原因,我需要以某种方式检查临时<li>元素。 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.我正在使用 Roundcube Docker 容器,并连接到我无权访问的远程 iRedMail 服务器。

I have had the following ideas:我有以下想法:

  • Using a Chrome extension called DOMListener to see the element.使用名为 DOMListener 的 Chrome 扩展程序查看元素。 I do see it there, but I cannot see the content/html for the element.我确实在那里看到它,但我看不到该元素的内容/html。
  • 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;当前最大文件大小为 5.0 MB,我尝试通过更改.htaccess增加该大小,设置upload_max_filesize = 100M; according to https://docs.iredmail.org/change.mail.attachment.size.html .根据https://docs.iredmail.org/change.mail.attachment.size.html This did not work, I can still only upload files <= 5MB.这不起作用,我仍然只能上传 <= 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.搜索实际元素类的代码( uploading ),但我找不到它。

Does anyone have any idea what I can try?有谁知道我可以尝试什么?

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.当有任何 li 标签被添加到 DOM 时,你会看到所有的“li”标签,找到并检查它。

You can also see all the innerHTML instead of the HTML Element (or attributes) if you replace如果您替换,您还可以看到所有的 innerHTML 而不是 HTML 元素(或属性)

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

with

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

Hope this help希望这有帮助

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.您可以根据需要添加自定义限制并在它们周围循环。

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM