Dev tools showing wrong line number of sass files

1,606 views
Skip to first unread message

Treen

unread,
May 24, 2016, 6:40:58 AM5/24/16
to Google Chrome Developer Tools

i've recently switched from firefox (memory usage went astronomical (2gb+) every now and than) to chrome. I'm using sass for my CSS and strange thing is happening to me. Sometimes, when i add new rules into a scss file, dev tools starts showing wrong files and/or wrong line numbers for those (and only those) newly added rules. The wierd thing is, that if i reset chrome settings to default, the problem disappears. I havent changed any unusual settings, i even tried not to change any settings after the settings reset, and it's still happening. It might happend once a day or twice a hour, didn't really find anything to get me closer to the reason.

Did anybody experience this issue? Maybe found a solution?

Thank you for your time guys :).

Andrey Lushnikov

unread,
May 24, 2016, 6:36:19 PM5/24/16
to google-chrome-...@googlegroups.com
Hi Treen,

Can you give us some more insights about this?
1. Which chrome do you use? Does it happen for you on Chrome Canary as well?
2. It might be an issue with sourcemap somehow been cached by browser. Try serving it with 
    "Cache-Control": "no-cache, no-store, must-revalidate",
    "Pragma": "no-cache",
    "Expires": "0" 
headers


--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/f7683e24-c32a-41c9-8df7-a3db931de06c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Treen

unread,
May 25, 2016, 4:29:00 AM5/25/16
to Google Chrome Developer Tools
Thank you for your response.. Version of chrome i'm currently using is  50.0.2661.102 m.

about Chrome Canary, i didn't really have time to try that one out, so i'm gonna right now, if you think it might help.

And as for those sourcemap headers.. I'm not sure if i can actually tell sass to add any. At least as far as i know. Would it help if i manually added those headers after the bug appears?

Treen

unread,
May 25, 2016, 11:21:31 AM5/25/16
to Google Chrome Developer Tools, lush...@chromium.org
OK, so i've tryed out Chrome Canary and the bug happend there as well. There was even one more bug. When i refreshed a page, opened developer tools to inspect elements and theyre styles, i saw the correct .sccs source file and the correct line. BUT when i modified any of those styles, the source file next to it switched to the compiled .css file. This doesnt bother me tough, since the bug i originally posted is happening even in canary, so i can switch back to normal chrome, where this bug is not happening.

So to summarise:
Version of Chrome i'm currently using is 50.0.2661.102 m. Same thing is happening in Chrome canary. About the sourcemap headers, see the previous post.



Dne středa 25. května 2016 0:36:19 UTC+2 Andrey Lushnikov napsal(a):

Andrey Lushnikov

unread,
May 25, 2016, 3:06:53 PM5/25/16
to Treen, Google Chrome Developer Tools
I cannot reproduce this behavior. A demo page which exposes the bug for you/screencast will help a lot.


On Wed, May 25, 2016 at 8:21 AM Treen <l.bob...@gmail.com> wrote:
OK, so i've tryed out Chrome Canary and the bug happend there as well. There was even one more bug. When i refreshed a page, opened developer tools to inspect elements and theyre styles, i saw the correct .sccs source file and the correct line. BUT when i modified any of those styles, the source file next to it switched to the compiled .css file. This doesnt bother me tough, since the bug i originally posted is happening even in canary, so i can switch back to normal chrome, where this bug is not happening.
I assume you change your styles through the Styles Sidebar Pane in DevTools. In this case, we intentionally switch the link to .css - to signify that you've actually changed CSS file, not SASS.

Treen

unread,
May 26, 2016, 10:41:11 AM5/26/16
to Google Chrome Developer Tools, l.bob...@gmail.com, lush...@chromium.org
Here are two screenshots. First one shows the bug, At the highlighted declaration is reference to "_modules.sccs:1413", but the actual line is 1423. The second picture i took was after the settings reset. I didn't really do ANYTHING else, than resetings my settings. I don't even change the settings anymore, since i have to reset them few times a day anyway.




I also found out, that the bug is not affecting only newly added styles to the scss file, but also all files BELOW the newly added ones. The difference between shown and correct line number is different every time it happends, it can also be a higher as well as a lower number. It really happends to me on all sites im developing, but here is the one it happend on today: http://customer1685.soundpro.cz/nabidka-detail/prodej/byt/prodej-atypickeho-bytu-3+1-l-po-rekonstrukci-478683



Dne středa 25. května 2016 21:06:53 UTC+2 Andrey Lushnikov napsal(a):
I cannot reproduce this behavior. A demo page which exposes the bug for you/screencast will help a lot.


On Wed, May 25, 2016 at 8:21 AM Treen <l.bob...@gmail.com> wrote:
OK, so i've tryed out Chrome Canary and the bug happend there as well. There was even one more bug. When i refreshed a page, opened developer tools to inspect elements and theyre styles, i saw the correct .sccs source file and the correct line. BUT when i modified any of those styles, the source file next to it switched to the compiled .css file. This doesnt bother me tough, since the bug i originally posted is happening even in canary, so i can switch back to normal chrome, where this bug is not happening.
I assume you change your styles through the Styles Sidebar Pane in DevTools. In this case, we intentionally switch the link to .css - to signify that you've actually changed CSS file, not SASS.

Well it doesnt happend in normal Chrome, so i guess it's just some setting. I don't actually edit my source files with devtools. 

Treen

unread,
May 26, 2016, 11:37:23 AM5/26/16
to Google Chrome Developer Tools
Today i'm working with some larger css files (3k lines+) and it already happend like 8times in last 2hours. It's getting really annoying, since every settings reset logs me off everywhere i'm currently logged in. I hope we will be able to find a solution soon :(.

Treen

unread,
May 27, 2016, 8:33:13 AM5/27/16
to Google Chrome Developer Tools
So today i found a solution to this problem, but unfortunatelly, there is another one.

Today, when i added something to my scss for the first time, the bug immediately happend, i reseted the settings and the line number was correct, than i reverted the changes i did to my scss file and line remained the same as it was after the seggins reset, which is wrong. So i was finnaly able to simulate it. Turns out, it is actually a problem with cache (as you suggested Andrey). When i clicked delete browing data (i don't know how exactly is it in english version of chrome) and than selected only the fourth checkbox from top - images and cache files, it fixed it. If i made those changes to scss file again, the problem was back on, until i deleted the cache again. So i knew it's a cache problem, i went thrue the dev tools settings and found out, that there's an option to disable cache, while dev tools is active and voila, problem solved.

The problem is, that actually don't want all cache disabled. Is there a way to only disable cache for certain file extensions for example?

Andrey Lushnikov

unread,
May 27, 2016, 3:29:44 PM5/27/16
to google-chrome-...@googlegroups.com
Hi Treen,

No, there's no way to disable cache partially at the moment.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages