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

javascript - Chrome DevTools |呈现为HTML时预览 Pane 中的滚动问题-LMLPHP
为了克服上述情况,我遵循了以下两种方法:
由于两种方法都遵循相同的方法,即将DevTools停靠在一个单独的窗口中,然后按F12或按CTRL + SHIFT + I在DevTools中进行检查-进行检查(即嵌套检查)

第一种方法:

检查Preview iframe,您将能够看到.html-preview-framepointer-events属性设置为none
禁用或将pointer-events属性设置为auto时,滚动功能将继续,直到刷新页面或切换到另一个文件为止。

javascript - Chrome DevTools |呈现为HTML时预览 Pane 中的滚动问题-LMLPHP

第二种方法:

通过使用本地修改的CSS脚本进行覆盖。在嵌套检查中的源面板中,存在一个名为“network / requestHTMLView.css”的脚本,该脚本显示在页面标签的无域”部分的来源列表和在编辑器 Pane 中,使用下面的这些代码行修改/替换包含先前代码行的CSS脚本,滚动功能将恢复!直到&,除非没有刷新页面或切换到另一个文件。

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

javascript - Chrome DevTools |呈现为HTML时预览 Pane 中的滚动问题-LMLPHP

但是每次遇到的问题都是,如果我们尝试刷新或切换到另一个文件,它将保持不变。通过定义我们自己的自定义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开发工具主题。这是一个黑暗的主题,但是相同的修补程序也可以应用于任何其他DevTools主题。

链接:chrome-devtools-zerodarkmatrix-theme

更新
如果克隆存储库,则可以load it directly

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

07-24 09:44
查看更多