I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum of which element was adding a horizontal/vertical scroll to my page/elements. Debugging CSS scroll is a pain that I have felt too many times now and I always fall back to this one line that helps me.
* {
outline: 1px solid red;
}
CSSThere are different ways to add this line: adding it to the source code directly and removing it. But I usually add it to Chrome dev tools directly so that I don’t have to remove it later.
The line adds a red outline to all elements on the page (* is the global selector). And using that, I am usually able to figure out which element is spilling out of the viewport and fix it.
Another thing to note is that outline
is better than border
in this case. Border widths can affect the layout of the elements. Depending on the box-sizing
property, the width of the element would be different. content-box
adds the width of the border to the calculated element width and border-box
includes it in the calculation. That can make debugging CSS scroll a bit harder since it might affect those elements widths and heights.
Manually copy-pasting the output of a terminal command with a mouse/trackpad feels tedious. It is…
While working on a project, I wanted to do an integrity check of a file…
Popovers have been a problem that was typically solved by using a third-party solution. But…
Node.js 20.6 added built-in support for the .env file. This is an excellent addition to the platform…
Object destructuring is a powerful ES 6 feature that can help developers write cleaner code.…
Have you felt particularly annoyed by the time it takes to clone a large repository,…