In the past, when I inspected css using dev tools in Chrome, it would highlight the active class, now it doesn't - has that feature gone away? Is there a way to turn it back on? It's still on all other modern browsers.
The screen shots below show inspecting a button with class btn-primary
Chrome just shows all classes equal color, font weight etc, the Firefox screenshot show how Chrome used to show it.
Related
How do I enable this inspect element in Google Chrome? The part that is enclosed in red box.
Because right now, by default, this is what I see with my inspect element.
Do I need to install something or this is within settings?
Your screenshots are from different browser dev tools. If m not wrong, the top one is on Firefox where the bottom one is Chrome.
The Inspector tab is similar to the Elements tab in Chrome
The Debugger tab is similar to the Sources tab in Chrome
Does Chrome Developer tools stopped displaying preview of CSS background images? It used to display it like this:
But now it's not showing the preview image.
sometimes I just want have a look at the background-image to see how the UI effect being implemented(e.g. effect).Anyone knows how to bring it back without modifying of the chrome version? If not, please show me the official declaration for this.
Checked on Chrome Version 60.0.3112.113
In the Firefox dev tools, in the Rules tab that holds the CSS values, there's a super-useful little box you can click and it highlights the element on the page.
Is there a version of this in Chrome? I can't seem to see it anywhere.
Image attached from a screenshot in Firefox to show what I mean.
In IE11, I have a font that is blue, but I want it to be red. I styled it, and checked in dev tools and it shows it's computed color to be red, but it is still blue on the page.
Does anyone know what is wrong?
If I open it in chrome, it is red.
Thanks
The text is the show users on the left side. Right side shows the dev tools computed values. It shows red as computed.
It looks like you are working within SharePoint? There might be another CSS rule as part of the SP template that is crushing your rule. It might be an IE-only thing that Chrome ignores, explaining why it works the way you expect in Chrome but not in IE.
The documentation for Google Chrome Emulator at https://developer.chrome.com/devtools/docs/device-mode says,
"To view the media query inspector, click the Media queries media queries icon icon in the upper left corner of the viewport. The DevTools detect media queries in your stylesheets and display them as colored bars in the top ruler."
I have clicked on the icon and notice that it is active. However, no colored bars appear anywhere.
Chrome tells me that my version, Version 38.0.2125.122, is up-to-date. The rest of the emulator seems to work OK. The colored bars documented would be REALLY helpful, so I would be extremely grateful if someone could complete or correct Google's instructions.
What would be really terrific is if the emulator could display the file name of the external .css document, as I have a mediaqueries.css document that points (that's the object anyway) to various .css external style sheets. Based on what I'm seeing under the "Elements" tab in the "dock"? (Google doesn't seem to have a name for the window), it looks like some of the tests, e.g, "Apple iPhone 3GS" or "Apple iPhone 5", etc., are picking up styles from different style sheets. I didn't know that was possible.
I believe this is the area they're talking about. You should see this in emulator mode.
Once you click the emulator icon, this appears at the top of the browser viewport (not at the bottom where the dev tools are.