I have a portfolio site that I developed with Next.js. When I open the debug console from chrome on this site, the css breaks. When I close the console and refresh the page, it fixes again.

This is an interesting problem that happened to me for the first time, has anyone encountered it before and can fix it?

I have attached screenshots below, and the same problem persists when I open the console on a different screen. So I can say that it has nothing to do with the screen size. At the same time, when I deploy the project and open it from the phone, there is no such problem. I think it is only related to the console.

Desktop Screen

When Console Open

Here is my page code:

import React from 'react';
import { getBlogPosts } from '../utils/getBlogPosts';
import BlogSearch from '../components/blog/BlogSearch';

const BlogPage = () => {
  const posts = getBlogPosts();

  return (
    <div className='my-20'>
      <h1 className='text-4xl font-bold mb-4'>Blog</h1>
      <h2 className='text-xl text-muted-foreground mb-8 italic'>
        Bloguma hoşgeldiniz! Bu alanda yazılım geliştirme alanında edindiğim
        yeni bilgiler, yazılım geliştirme ile ilgili düşüncelerim ve yazılım
        geliştirme ile ilgili fikirlerimi paylaşacağım.
      </h2>

      <BlogSearch initialPosts={posts} />
    </div>
  );
};

export default BlogPage;

Layout Code:

import React from 'react';
import Link from 'next/link';
import {
  FaGithub,
  FaLinkedin,
  FaMedium,
  FaYoutube,
  FaXTwitter,
} from 'react-icons/fa6';

const BlogLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div className='flex flex-col min-h-screen'>
      <header className='sticky top-0 z-40 w-full backdrop-blur-xl'>
        <div className='absolute inset-0'>
          <div className='absolute inset-x-0 top-0 h-full bg-gradient-to-b from-primary/5 to-transparent' />
          <div className='absolute inset-x-0 bottom-0 h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent' />
        </div>

        <div className='relative container mx-auto px-4'>
          <nav className='flex items-center justify-between h-16'>
            <div className='flex items-center space-x-4'>
              <Link
                href='/'
                className='text-foreground hover:text-primary transition-colors'
              >
                <span className='text-2xl font-bold bg-primary text-primary-foreground px-3 py-1 rounded-lg shadow-lg shadow-primary/25'>
                  AY
                </span>
              </Link>
            </div>

            <div className='flex items-center space-x-6'>
             {/* Links */}
            </div>
          </nav>
        </div>
      </header>

      <main className='flex-grow container mx-auto px-4 py-8'>{children}</main>
    </div>
  );
};

export default BlogLayout;

I have a portfolio site that I developed with Next.js. When I open the debug console from chrome on this site, the css breaks. When I close the console and refresh the page, it fixes again.

This is an interesting problem that happened to me for the first time, has anyone encountered it before and can fix it?

I have attached screenshots below, and the same problem persists when I open the console on a different screen. So I can say that it has nothing to do with the screen size. At the same time, when I deploy the project and open it from the phone, there is no such problem. I think it is only related to the console.

Desktop Screen

When Console Open

Here is my page code:

import React from 'react';
import { getBlogPosts } from '../utils/getBlogPosts';
import BlogSearch from '../components/blog/BlogSearch';

const BlogPage = () => {
  const posts = getBlogPosts();

  return (
    <div className='my-20'>
      <h1 className='text-4xl font-bold mb-4'>Blog</h1>
      <h2 className='text-xl text-muted-foreground mb-8 italic'>
        Bloguma hoşgeldiniz! Bu alanda yazılım geliştirme alanında edindiğim
        yeni bilgiler, yazılım geliştirme ile ilgili düşüncelerim ve yazılım
        geliştirme ile ilgili fikirlerimi paylaşacağım.
      </h2>

      <BlogSearch initialPosts={posts} />
    </div>
  );
};

export default BlogPage;

Layout Code:

import React from 'react';
import Link from 'next/link';
import {
  FaGithub,
  FaLinkedin,
  FaMedium,
  FaYoutube,
  FaXTwitter,
} from 'react-icons/fa6';

const BlogLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div className='flex flex-col min-h-screen'>
      <header className='sticky top-0 z-40 w-full backdrop-blur-xl'>
        <div className='absolute inset-0'>
          <div className='absolute inset-x-0 top-0 h-full bg-gradient-to-b from-primary/5 to-transparent' />
          <div className='absolute inset-x-0 bottom-0 h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent' />
        </div>

        <div className='relative container mx-auto px-4'>
          <nav className='flex items-center justify-between h-16'>
            <div className='flex items-center space-x-4'>
              <Link
                href='/'
                className='text-foreground hover:text-primary transition-colors'
              >
                <span className='text-2xl font-bold bg-primary text-primary-foreground px-3 py-1 rounded-lg shadow-lg shadow-primary/25'>
                  AY
                </span>
              </Link>
            </div>

            <div className='flex items-center space-x-6'>
             {/* Links */}
            </div>
          </nav>
        </div>
      </header>

      <main className='flex-grow container mx-auto px-4 py-8'>{children}</main>
    </div>
  );
};

export default BlogLayout;

• css
• debugging
• next.js
• tailwind-css

• It's not due to console, it might be due to responsiveness, if you open console down instead of side, it should look fine. – Akshay Khale Commented Mar 14 at 13:00
• @AkshayKhale As I mentioned above, the same problem persists whether I open the console at the bottom or in a different window. – AdylshaY Commented Mar 17 at 12:39

1 Answer 1

Make sure you don't have Source overrides enabled. This is what fixed it for me.