Multi tool use

Chrome DevTools | Scrolling issues in preview pane when rendering into HTML

In the Network panel of the Chrome DevTools, with the filter request type set to All/XHR, under the Preview pane scrollbar (both Vertical & Horizontal bar) doesn't rolls

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)

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.

.html-preview-frame

pointer-events

none

pointer-events

auto

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;
}


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!

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


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.

2 Answers
2

DevTools technical writer here. Sounds like a bug. Please file an issue at https://crbug.com.

WontFix

Custom Dev Tools Theme

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.

Link: chrome-devtools-zerodarkmatrix-theme

UPDATE
If you clone the repo you can load it directly

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.