New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 661615 link

Starred by 3 users

Issue metadata

Status: Duplicate
Merged: issue 485983
Owner:
Last visit 29 days ago
Closed: Dec 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 0
Type: Bug



Sign in to add a comment

DevTools cuts CSS file

Reported by teo.eter...@gmail.com, Nov 2 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

Steps to reproduce the problem:
1. Using workspace mapping to edit CSS 
2. The latest version is very unstable in editing CSS (edited css in elements gets displayed as a one-liner in the css file without breaks but thats another issue)
3. Sometimes the CSS files simply gets cropped

What is the expected behavior?
the CSS file should not be cropped :)

What went wrong?
It happend in two files:
http://prnt.sc/d26vds
http://prnt.sc/d26vjb

had this issue also with older versions of chrome, a few thousand lines have been cut off

Did this work before? No 

Chrome version: 54.0.2840.71  Channel: stable
OS Version: OS X 10.12.1
Flash Version: Shockwave Flash 23.0 r0
 
Owner: lushnikov@chromium.org
Status: Assigned (was: Unconfirmed)
Hi Teo!

Could you please share more details? Does it actually truncates the file so that it is persisted like this to the file system? Are there any watchdogs which might be interfering with this file as well?

Regarding the (2), it would be great to have this filed as a bug as well!
I'm using JetBrains Webstorm in background but it shouldn't interfere with it. 
Could be a GIT issue but it also occurred when i was the only developer on the project.

First we where thinking the file was too big at that point ~5000 lines of code so we split it in two files but the issue still occurs.

The file is always cropped at the bottom. I'm using DevTools for coding and writing CSS mostly through the properties panel in the Elements tab.

Lol, my coworker just told me that the CSS was disappearing character by character we followed it in the GIT history log but it's not a rule that it disappears at each commit so it's probably not GIT.

I don't see a way how to reconstruct the bug so i opened the issue to see if someone has the same problem.

Me and my coworker are both using MacOS / Chrome and the disappearance of the characters is evident in our commits.

I can send you the GIT history log if it can help
Just to make sure - does the behavior reproes with the WebStorm being shut down?
I opened the same file in chrome and webstorm(both CSS files) and also in DevTools with a bound workspace. 
Closed webstorm while the files where open in chrome and webstorm and everything was file.
I also tried to add a few lines of code in webstorm without saving it before closing webstorm but it didn't triggered the bug.

My best guess is that it has something to do with the way how devtools formats the CSS after editing it in the elements panel but it's a ugly guess. 
I have no idea why it would cut only a few characters from the end of the source CSS file.
I could try to get rid of webstorm and see if it happens again
Hi Teo,

Did this happen again for you without webstorm?
http://prnt.sc/d9w86d

It happened also on Canary without WebStorm(was closed) :( 
The only possible factor would be GIT but thats kind unlikely.
From the experimental extensions i have Source Diff active.

So I tested it the whole week and it happened only once the only issue is that I didn't do a lot of CSS changes during last week as usual.

I still can't confirm 100% that it's a chromium bug but it happens only in CSS files that are source mapped and edited thought the source tab. I'm also editing JS and HTML files thought Chrome and never had issues with them.

So my best guess is that the source tab property editing(live editing) is the trigger or the auto CSS format function but still it's a rough guess.

I switched now to persistence 2.0 no idea if it helps
Teo, any updates on this? One more guess - don't you have something like sshfs?

Just updated to Version 55.0.2883.75 (64-bit) - latest

Search seams to work better for now.
Again after manipulating CSS properties in source panel(was just increasing the height value with the key arrows) it just deleted height from the css properties(source panel), when i try to enter a new value the value just disappears. After that the CSS on the website got deformed and i saw that the whole CSS file was empty. 

Webstorm was definitely closed.  The only thing that was abnormal is that the whole chrome was kind of slow (javascript performance issues or the MacOS Mail application utilized the whole CPU).

Maybe an issue with the threads that writes the stuff to the CSS file when editing the CSS properties in source panel ?

It happened to me 2-3 time during one hour that i lose code in the CSS source file and chrome was very slow(maybe i was using inspect at that time not sure but i use it usually in combination with CSS property editing).

This happens too to my colleague of mine but he is not doing as much CSS as I do so it's not that often. 

So I'm 85% sure it's  bound to editing CSS through the Source Panel CSS. Will follow if CPU utilisation / Random Chrome slowness or inspecting the website has something to do with it.
ps. strange thing the local history is also empty for the css file
http://prntscr.com/dg78k9

GIT after the bug
http://prntscr.com/dg79a9


ps. kind of good news i was able to record the bug!! I was also able to kind of reproduce it but it's also quite random I'm just changing CSS till it happens. 
https://www.youtube.com/watch?v=xfGHKru9QQ4

The bug is visible at 0:14, as you can se after the bug the CSS on the website is deformed. After the BUG the CSS file is empty.


ps2. If it was an external application that changed the file devtools would warn me that there was an external application that changed the file so it's definitely devtools
Labels: -Pri-2 Pri-1
Teo,

Thank you for the great feedback. I think a have a few ideas why this might be happening. Thus, a few more questions:
1. Do you switch brunches in git while working on CSS in devtools?
2. Are there any errors in devtools-on-devtools when this happens?
1. no I'm working only on one branch
2. I tried to do it - had to open devtools in a separate window to trigger the dev-on-devtools shortcut then the bug kind of disappears/ it disappears when interacting with devtools.

Is there any way to open devtools in devtools while its docked like in the video ? like a console command to do it ? (i'm never using it in a external window because of my monitor configuration)

You'll have to undock devtools to open devtools-on-devtools, but you can dock them back afterwards. Would it work?
Labels: -Pri-1 Pri-0
Ok so it happened for me with an HTML file. No more doubts about the setup; must be a flaw in the logic.
Mergedinto: 485983
Status: Duplicate (was: Assigned)

Sign in to add a comment