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

Question

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)

First Approach:

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.

Second Approach:

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.

Answer 1

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

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.

Answer 2

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