I want to debug an issue with CSS and want to start experimenting with all styles turned off. Is there a way in Google Chrome devtools, Firebug or any other dev tool to turn off all styles at once, so that I can start turning them on one by one to see how it affects the elements?
Use an add on called "Web Developer". It's available for different browsers and available here:
http://chrispederick.com/work/web-developer/
You can disable styles from there. It even has many more features.
Related
There is a known bug in Chromium where it can't detect the preferred theme of the system OS, so it always sets it as default (light theme).
An often given "solution" is enable the Chrome flag #enable-force-dark, but it doesn't really solve the problem, the CSS "prefer-color-scheme" media query is always set to light, no matter what you do.
One temporary solution that I think is to force the "prefer-color-scheme" query globally on Chrome. I know that you can force it in the Dev tools at F12 Three dots > More tools > Rendering > Emulate CSS media feature prefers-color-scheme, but it will only be active in the current page context for Developing purposes, so, How can I set the prefer-color-scheme to dark globally?, maybe with a Chrome extension?
I am working on a static page that uses React, Gatsby, and styled-components.
When styling a page, my development workflow usually heavily involves Chrome DevTools, tweaking styles there until I have something that I like, and then implementing them in the code.
When using styled-components, however, all of the styles/rules that appear in DevTools for each rendered element are grey, italicized, and disabled. I can override them by adding styles in element.style {}, but that can be a pain, and it doesn't solve the root question which is: why are styles applied by styled-components disabled in DevTools?
Here's a screenshot of what I'm referring to.
It's because styled-components injects styles through the CSSOM API, which the Dev Tools in Chrome (and every other browser AFAIK) can't handle. See this ticket: https://bugs.chromium.org/p/chromium/issues/detail?id=387952
Note that this is only true when styled-components is in production mode, i.e. process.env.NODE_ENV is set to "production". As long as you aren't in production mode, styled-components should generate normal <style> tags, which you can interact with through the Dev Tools.
In v4.1.0 it's possible to provide SC_DISABLE_SPEEDY flag to disable styles injection with CSSOM insertRule.
More details
https://www.styled-components.com/releases#v4.1.0
https://github.com/styled-components/styled-components/pull/2185
I did a full quit of Chrome (Cmd + q), ran npm update, npm install, and did a full relaunch of the browser and localhost server. This fixed it for me.
At a guess, I'd say you might be affected by this bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=796629
If you close the dev tools and reopen them again, this might fix the issue temporarily.
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right.
This will give you insights as to the styles being overridden or ignored (line threw).
CTRL + SHIFT + I
To Find Errors & Warnings use CSSLint
Debugging CSS and HTML code bugs can really ruin your application design. There are multiple ways to debug CSS and HTML code. There are few things or ways you should consider the debugging and taking care while developing HTML or writing CSS.
Check your syntax errors with http://csslint.net/. It provides the
nice tool and highlights a line where an error occurs.
Closely review your cross-browser compatibility issues. A site looks nice and beautiful in a firefox but sometimes it will not
look nice with another browser at that time you should take care of
cross-browser compatibility issues of CSS. You should nice and proper
CSS framework that will prevent to generate cross-browser issues and
verify HTML tags and CSS properties which may support by browser
correctly.
Browser web developer tool allows outlining an HTML and element with
different criteria this will allow to writing appropriate CSS for HTML
element.
Turn on or off stylesheet with Chrome dev tools. If you’re wondering
how your CSS is affecting a particular page element, the Chrome
DevTools make it easy to toggle each property. In the Google Chrome
web browser, simply right click and choose Inspect Element from the
context menu.On the right side of the Elements panel, you should see a
tab called Styles with some CSS inside of it. This shows you which CSS
declarations are being applied to the selected element, and if you
hover over each CSS property, you can uncheck them individually. When
a property is crossed out, it typically means that it is being
overridden elsewhere. You may need to uncheck a property in several
places to actually remove it from an element.
Use computed tab in chrome dev tools. it tells you exactly how the
browser is computing your styles. When working on large projects this
is essential for resolving cascading issues, problems with selector
specificity, and more.
You may enable chrome dev tools with ctrl+shirt+I or press F12 key
which supports in almost every browser.
Use this to debug your css
* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
I created a test extension, to change a few things and maybe add some features to Firefox built-in devtools.
I set up a basic extension, with content css and the usual files, and chrome.manifest:
content devtooltweaks content/
style chrome://browser/content/devtools/framework/toolbox.xul chrome://devtooltweaks/content/devToolStyle.css
Although I can go to "chrome://devtooltweaks/content/devToolStyle.css" and see that file exists in the browser, DOM inspector doesn't show the style applying, I can't see the stylesheet listed either. It's been a long time since I did extension development, is there a step I'm missing here? Or is it not permitted to change the built in dev tools, similar to how it's not permitted in Chrome?
It looks like the style is imported, but not shown as a stylesheet in the DOM Inspector, I also may not have been using firefox -purgecaches. It's working now.
One reason why I don't use Internet Explorer for web development is the way it supports CSS attribute manipulation: it lists the most general stylesheet attributes first. When there's a lot of the stylesheet rules you have to scroll down - which is most of the time.
Is there a way to change that order ? So it list the most specific style rules first just like Firefox in firebug and Chrome do ?
Try with IE tester. www.my-debugbar.com/wiki/IETester/HomePage.
You also need to install debug toolbar for IE tester http://www.debugbar.com/download.php.
This tool will give you what you need.