[Dev Tools] injected stylesheets can't be accessed
Reported by
zac.spit...@gmail.com,
Dec 21 2017
|
||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36 Steps to reproduce the problem: 1. open http://www.javascriptoo.com/vein-js What is the expected behavior? There needs to be a way to access programmatically injected stylesheets What went wrong? In the Dev Tools, Elements panel, select <div class="block"> in the iframe towards the bottom of the html (it's the rotating square in the demo) In the styles panel, the injected style is listed from <style>...</style> but clicking it just opens the empty <style> element in the <head> section. Normally clicking the source style sheet in the style panel opens the css file in the sources panel. If you open the <head> section, the style tag is there but it's empty Did this work before? No Chrome version: 63.0.3239.84 Channel: n/a OS Version: 10.0 Flash Version:
,
Dec 28 2017
This is by design, you can only edit styles that have /*# sourceURL = ... */ comment at the end, otherwise we don't have a meaningful way to identify them in the UI. Please add sourceURL when injecting the stylesheets and this will work.
,
Jan 4 2018
do you have an example? what should be the sourceURL value? as there is no actual source file as the styles are being generated on the fly in js? By meaningful way do you mean a title for the sources panel? Manually adding a "New style Rule" creates a pseudo "inspector-stylesheet" which shows up in the sources panel. Firefox labels these <inline style sheet #1> in their style editor, but opening the injected styles currently just shows a blank page
,
Jan 8 2018
I created a vanilla js test case but it doesn't seem to be working. https://jsbin.com/relogeq/edit?html,console Paul Irish confirmed via twitter that dev tools just needs a random name for the SourceURL for this to work, but couldn't this just be auto-generated, it already has a unique id via it's position in document.stylesheets ? |
||
►
Sign in to add a comment |
||
Comment 1 by krajshree@chromium.org
, Dec 21 2017