3 ways to debug CSS issues
Hello World 🌎 !!!
Sometimes it can be tricky to find and fix bug in CSS. In this article I am listing few ways by using them we can easily find most of the issues related to CSS.
1. Locating invisible element
There may be cases when we have to find an element in the UI but either it is hidden beneath elements or overflowing out of the screen. In such cases we can use below CSS to make every HTML element visible.
We have to add this style to our global CSS file so that it can be applied everywhere.
2. Finding the element which is breaking the UI
(a) Opening style inspector panel immediately for specific HTML dom element.
In order to inspect any element, generally we right click on it and select the inspect option from the context menu, this might not help always, due to many scenarios one of them may be we click and selected the parent instead of the actual element.
We can shorten our way to our target element and be accurate always, by using inbuilt chrome tool.
All we have to do is open the chrome dev tools and select the arrow tool.
Here is how it looks in Chrome Browser:
Demonstration:
(b) Finding the element which is causing issue
Sometimes we have misalignment or overflow or scrolling related issue, in such cases in most of the cases the culprit element lies within the bottom of the DOM tree.
For such issues, the good way is to expand the parent till last child, and start checking for the issue from the child element and backtrack to parent.
3. Working with pseudo states elements
In some cases we have to fix issues in CSS pseudo states like hover, focus etc. and we struggle to keep them open always so that we can check the CSS. Because as soon as we click outside, the pseudo style got removed.
For such cases we can leverage the inbuilt chrome tool, all we have to do is open the dev tools and select the desired pseudo class.
By doing this we are apply the pseudo style to element. And now the style will always be applied to our element and we can easiliy debug the issue.
Bonus:
While debugging CSS, try added background color to elements. It is has several beneifts:
1. this way our element stand out from all others.
2. we can keep track how many elements we have checked.
3. positioning of elements becomes more clearer.
