Chrome 开发工具 |呈现为 HTML 时预览窗格中的滚动问题

Question

在 Chrome DevTools 的网络面板中，过滤请求类型设置为 All/XHR，在预览窗格下滚动条（垂直和水平条）不滚动

为了克服上述情况，我遵循了这两种方法，它们如下：
由于这两种方法都遵循相同的方法，将 DevTools 取消停靠到单独的窗口中，然后按 F12 或按 CTRL+SHIFT+我 在 DevTools 内部进行检查——Inspect-in-Inspect（即嵌套检查）

第一种方法：

检查预览 iframe，您将能够看到 .html-preview-frame 的 pointer-events 属性设置为 none。 禁用pointer-events 属性或将auto 属性设置为auto，滚动功能将恢复，直到您刷新页面或切换到另一个文件。

第二种方法：

通过使用本地修改的 CSS 脚本来覆盖。在嵌套检查的 Sources 面板 中，有一个名为 "network/requestHTMLView.css" 的脚本出现在 Sources 页面标签的“No Domain”部分下的列表，以及从编辑器窗格修改/替换包含以前的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 开发工具主题。这是一个黑暗的主题，但同样的修复可以应用于任何其他 DevTools 主题。

链接：chrome-devtools-zerodarkmatrix-theme

更新 如果你克隆仓库，你可以load it directly

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

Answer 2

这里是 DevTools 技术作家。听起来像一个错误。请在https://crbug.com 提出问题。