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

Issue 691950 link

Starred by 6 users

Issue metadata

Status: Duplicate
Merged: issue 681492
Owner:
Last visit 29 days ago
Closed: Feb 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Styles panel is empty in Elements tab (Developer Tools)

Reported by thd...@gmail.com, Feb 14 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.37 Safari/537.36

Steps to reproduce the problem:
1. Go to any website (make sure Developer Tools is closed before you do this).
2. Right-click on an element and select "Inspect". You should see various styles in the Styles panel.
3. Without closing the Developer Tools, go to a second website that is fairly complex (e.g., https://www.amazon.com/).
4. If you're not able to reproduce the issue, then repeat step 3 and go to different websites without closing the Developer Tools and you should be able to reproduce the issue eventually.

What is the expected behavior?
Every time you go to a new website, you should see various styles in the Styles panel.

What went wrong?
After going to the second website (or subsequent if you're able to reproduce on the second website) the Styles panel becomes empty as shown in the screenshot.

Did this work before? Yes Previous version

Chrome version: 57.0.2987.37  Channel: beta
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

I'm using 70% of my 8GB RAM when encountering this issue, so it could be related to memory consumption.

 
2017-02-14_170122.png
9.9 KB View Download
Labels: Needs-Bisect Needs-Triage-M57

Comment 2 by l...@chromium.org, Feb 14 2017

Owner: lushnikov@chromium.org
Thank you for the report.  I'm unable to reproduce this on Linux 58.0.3009.0.
A few questions:

- When you see this, which element is selected in the elements tree?  Is it possible that the <html> tag is selected and it simply has no styles applied?
- If you click to select an element in the tree next to the styles pane, does the styles pane become populated?
- Do the styles populate the pane eventually after some time?
- If you refresh the page, is it still empty?

Comment 3 by l...@chromium.org, Feb 14 2017

Cc: l...@chromium.org lushnikov@chromium.org brajkumar@chromium.org
 Issue 691786  has been merged into this issue.

Comment 4 by thd...@gmail.com, Feb 15 2017

> - When you see this, which element is selected in the elements tree?  Is it possible that the <html> tag is selected and it simply has no styles applied? It doesn't seem to matter what element is selected; I can reproduce the issue regardless of the element selected.

> - If you click to select an element in the tree next to the styles pane, does the styles pane become populated? No. When I select other elements, the Styles pane remains empty -- it's like it's been disconnected from the DOM.

> - Do the styles populate the pane eventually after some time? No. To fix the issue, I have either (1) close and reopen Developer Tools or (2) reload the web page.

To reproduce, did you repeat step 3, going to different websites, until the issue surfaces? Also, it might help if you try to replicate my setup:

- use Windows 7 Pro
- simulate a low memory scenario (e.g., less than 1GB of memory free)
Also seeing this, same version.

Much simpler reproduction method:
1. Right click an element to inspect it.
2. Hard reload/Ctrl+F5 to refresh (normal refresh doesn't exhibit issue)

To answer the questions, the original element remains selected in the DOM tree - even if you click other elements Styles never populates.

Computed is also empty.

Comment 6 by d...@random.agency, Feb 15 2017

I'm having the same problem. It happens almost all the time for me while developing a client site.

Steps to reproduce:

1. Load https://www.amazon.co.uk/ or any site with a fairly heavy set of HTML
2. Open Dev Tools
3. Choose an element to inspect
4. Hit reload (I wasn't hard reloading like the poster above)
5. Wait for page reload and if issue doesn't occur repeat from step 4

I recorded a video of the issue and have attached it.

I hope this gets resolved soon, it's really slowing down my development.

OS: Windows 10 Pro x64
CPU: Intel Core i5-2500K
RAM: 16GB (Utilisation around 60%)
Chrome: Version 57.0.2987.37 beta (64-bit)
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.37 Safari/537.36

2017-02-15_10-16-23.mp4
5.1 MB View Download
Great! I wasn't able to reproduce the bug and explain it correctly in a previous merged bug. I'm facing exactly the same issue, and comment #6 reproduce it really easily. On https://www.amazon.co.uk/, after opening the inspector and few refreshes (normal or hard), classes disappear.
screenshot.png
161 KB View Download
screenshot1.png
121 KB View Download

Comment 8 by thd...@gmail.com, Feb 16 2017

Good to know I'm not the only person having this issue :). If it helps any, I only noticed this happening after getting auto-updated to 57.0.2987.37 beta.
Mergedinto: 681492
Status: Duplicate (was: Unconfirmed)

Sign in to add a comment