javascript – Chrome DevTools |在渲染为HTML时,在预览窗格中滚动问题

在Chrome DevTools的“网络”面板中,过滤器请求类型设置为“全部/ XHR”,“预览”窗格滚动条(垂直和水平条)下方不会滚动

为了克服上述情况,我遵循以下两种方法：
由于这两种方法都是相同的,所以将DevTools解除连接到一个单独的窗口然后按下F12或按CTRL SHIFT I来检查DevTools内部 – Inspect-in-Inspect(即嵌套检查)

第一种方法：

检查预览iframe,您将能够看到.html-preview-frame的指针事件属性设置为无.
禁用或设置指针事件属性以自动滚动功能将恢复,直到您刷新页面或切换到另一个文件.

第二种方法：

通过使用本地修改的CSS脚本来覆盖.在嵌套检查的Sources面板中,有一个名为“network / requestHTMLView.css”的脚本,它出现在Page选项卡的“No Domain”部分下的Sources列表中,并且从Editor窗格中修改/替换包含的CSS脚本以前的代码行,下面的代码行,滚动功能恢复！直到&除非没有刷新页面或切换到另一个文件.

iframe.html-preview-frame {
    Box-shadow: 0 1px 3px rgba(0,0.5);
    flex-grow: 1;
    margin: 20px;
    pointer-events: auto;
}

但是每次遇到的问题都是,如果我们尝试刷新或切换到另一个文件,它将保持持久性.是否有任何解决方法可以通过定义我们自己的自定义CSS文件或通过定义我们自己的JavaScript函数然后将其嵌入到HTML文件中来永久地解决此问题.

最后,解决方案应该是这样的,即使刷新或切换到另一个文件后滚动功能应该工作！

已安装Google Chrome版本67.0.3396.99(官方版本)(64位).

Google Chrome:  67.0.3396.99 (Official Build) (64-bit)
Revision:       a337fbf3c2ab8ebc6b64b0bfdce73a20e2e2252b-refs/branch-heads/3396@{#790}
OS:             Linux
JavaScript:     V8 6.7.288.46
Flash:          30.0.0.113 /home/nishanth/.config/google-chrome/PepperFlash/30.0.0.113/libpepflashplayer.so
User Agent:     Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/67.0.3396.99 Safari/537.36
Command Line:   /usr/bin/google-chrome-stable --flag-switches-begin --flag-switches-end
Profile Path:   /home/nishanth/.config/google-chrome/Default

等待通过升级到新版本的官方修复,但无法找到此问题的修复程序,Chrome Canary不适用于Linux用户.

解决方法

对任何感兴趣的人我已使用上述CSS修复修改了Chrome Dev工具主题.这是一个黑暗的主题,但同样的修复可以应用于任何其他DevTools主题.

链接：chrome-devtools-zerodarkmatrix-theme

UPDATE
如果你克隆了回购,你可以load it directly

更新#2Chrome浏览器68包含此修复程序 – 不再需要自定义DevTools主题.您可以按照反向安装说明禁用上述主题(如果您安装了建议的主题).

原文地址：https://www.jb51.cc/js/150097.html