javascript - Chrome 开发者工具 |呈现为 HTML 时预览 Pane 中的滚动问题

Question

在 Chrome DevTools 的 Network 面板中，将过滤器请求类型设置为 All/XHR，Preview Pane 下的滚动条(垂直和水平条)不滚动

为了克服上述情况，我采用了以下两种方法:
由于这两种方法都遵循相同的方法，将 DevTools 停靠到一个单独的窗口中，然后按 F12 或按 CTRL+SHIFT+我在 DevTools 内部检查 — Inspect-in-Inspect(即嵌套检查)

第一种方法:

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

第二种方法:

通过使用本地修改的 CSS 脚本来覆盖。在嵌套检查的Sources 面板 中，有一个名为"network/requestHTMLView.css" 的脚本出现在Sources列表在页面选项卡的“无域”部分和编辑器 Pane 修改/替换包含以前的CSS脚本代码行与下面这些代码行，滚动功能恢复! until & unless 不刷新页面或切换到另一个文件。

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

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

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