时间戳

首页 > 解决方案 > Chrome 开发工具 | 呈现为 HTML 时预览窗格中的滚动问题

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

问题描述

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

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

第一种方法：

检查预览 iframe，您将能够看到属性设置.html-preview-frame为. 禁用或将属性设置为滚动功能会继续进行，直到您刷新页面或切换到另一个文件。pointer-eventsnonepointer-eventsauto

在此处输入图像描述

第二种方法：

通过使用本地修改的 CSS 脚本来覆盖。在嵌套检查的“源”面板中，有一个名为“network/requestHTMLView.css”的脚本 出现在“页面”选项卡 的“<strong>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 用户。

标签： javascriptcssgoogle-chromeiframegoogle-chrome-devtools

解决方案

对于任何有兴趣的人。我已经使用上述 CSS 修复修改了 Chrome 开发工具主题。这是一个黑暗的主题，但同样的修复可以应用于任何其他 DevTools 主题。

链接：chrome-devtools-zerodarkmatrix-theme

更新 如果您克隆存储库，您可以直接加载它

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

推荐阅读