Flash of Unstyled Content

[smlombardi]

Every time I open dev tools with this enabled, if first loads the default way and then reloads with the style I have chosen in the extension. This makes using dev tools feel slower that it needs to.

Am I missing something? Or is there nothing that can be done to improve the experience?

[micjamking]

Hi @smlombardi, thanks for the feedback. I believe this is similar/related to an existing issue: #137

DevTools is just a web app (HTML/CSS/JS), and DevTools Author works by adding a stylesheet to the DevTools HTML page. FOUC occurs from the browser rendering the default styles before all of the resources have been retrieved. In the case of DevTools, all of the features of the tool are built using web components, so default styles are scoped within the shadow DOM of the component and are rendered instantly. This means DevTools Author's themes are always second to the default, and present a potential for FOUC.

At the moment, the only thing I can think of which may help the FOUC issue is to load the styles directly in the head of DevTools as a <style></style> tag, which would reduce the need for an HTTP request and should theoretically improve performance. I'll try doing some testing and see if I can get any performance gains.

If the performance issue is impacting your development experience, I'd recommend disabling the plugin, since it is merely an aesthetic enhancement and font-size can be adjusted using cmd and +/cmd and –.