Chrome DevTools |呈现为HTML时预览窗格中的滚动问题 [英] Chrome DevTools | Scrolling issues in preview pane when rendering into HTML
问题描述
在Chrome DevTools的网络面板中，将过滤器请求类型设置为全部/ XHR，在预览窗格滚动条（垂直和水平条）下均不会滚动
为了克服上述情况，我采用了以下两种方法：
因为这两种方法的操作方法相同，所以将DevTools停靠在一个单独的窗口中，然后按 F12 或按 CTRL + SHIFT + I 在DevTools内部进行检查-进行检查（即嵌套检查）
In order to overcome the above situations, I have followed these two approaches they are as follows:
Since both the approaches follows the same as, undocking the DevTools into a separate window and then hitting F12 or pressing CTRL+SHIFT+I to inspect inside the DevTools — Inspect-in-Inspect (i.e., nested inspects)
检查预览iframe，您将能够看到 .html-preview-frame 具有指针事件属性设置为 none 。
禁用指针事件属性或将其设置为 auto 滚动功能将继续，直到刷新页面或切换到另一个文件。
Inspecting the Preview iframe, you'll be able to see .html-preview-frame has a pointer-events property set to none.
Disabling or setting the pointer-events property to auto the scrolling function resumes until you refresh the page or switching into another file.
通过使用本地修改的CSS脚本覆盖。嵌套检查中的 Sources面板中，有一个名为 network / requestHTMLView.css 的脚本显示在 Sources中页面标签的 无域部分下的列表，并从编辑器窗格中修改/替换包含以前版本的CSS脚本这些代码行与下面的这些代码行一起，可恢复滚动功能！直到&除非没有刷新页面或切换到其他文件。
By using a local modified CSS script to override. In the Sources panel from the nested inspects, there is a script named "network/requestHTMLView.css" that appears in the Sources list under the "No Domain" section of the Page tab and from the Editor pane modifying/replacing the CSS script containing previous lines of code with these below lines of code, scrolling function resumes! until & unless without refreshing the page or switching into another file.
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文件中，是否有任何永久性解决此问题的方法。
But the problem that was faced was each time, if we try to refresh or switch to another file it'll remain persistent. Is there any workaround to fix this issue permanently either through by defining our own custom CSS file or by defining our own JavaScript functions and then embedding it to HTML file.
最后，解决方案应该是这样，即使刷新或切换到另一个文件后，滚动功能也应该起作用！
Finally, the solution should be such that even though after refreshing or switching to another file scrolling function should work!
安装了Google Chrome版本67.0.3396.99（正式版本）（64位）。
Installed Google Chrome Version 67.0.3396.99 (Official Build) (64-bit).
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 Linux Canary不适用于Linux用户。
Awaited for the Official fix through upgrading to a newer release, but couldn't find the fix with this issue and Chrome Canary isn't available for Linux users.
推荐答案
有兴趣的人。我已经使用上述CSS修复程序修改了Chrome开发工具主题。这是一个黑暗的主题，但是相同的修补程序也可以应用于任何其他DevTools主题。
For anyone interested. I have Modified a Chrome Dev tool Theme with the above mentioned CSS fix. It's a dark theme, but the same fix can be applied to any other DevTools theme.
链接： chrome-devtools-zerodarkmatrix-theme
UPDATE
如果您克隆存储库，则可以直接加载它
更新＃2
Chrome浏览器68包含此修复程序-不再需要自定义DevTools主题。您可以按照相反的安装说明来禁用上述主题（如果您安装了建议的主题）。
UPDATE #2 Chrome Browser 68 includes this fix - no more need for a custom DevTools Theme. You can disable the above theme (if you installed the suggested Theme) by following the install instructions in reverse.
这篇关于Chrome DevTools |呈现为HTML时预览窗格中的滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
