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

Question

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

为了克服上述情况,我按照以下两种方法进行了如下操作:
由于两种方法都是相同的,因此将DevTools拆分为一个单独的窗口然后F12按下或按CTRL+ SHIFT+ I来检查DevTools内部 - 检查 - in-Inspect(即嵌套检查)

第一种方法:

检查预览iframe,您将能够看到.html-preview-frame已将pointer-events属性设置为none.在刷新页面或切换到另一个文件之前pointer-events,auto将禁用或设置属性到滚动功能.

第二种方法:

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

iframe.html-preview-frame {
    box-shadow: 0 1px 3px rgba(0, 0, 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用户.

Answer 1

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

链接:chrome-devtools-zerodarkmatrix-theme

更新 如果您克隆回购,您可以直接加载它

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