디버깅과 성능 최적화

I'm getting an error in my JavaScript:

Error message: [exact error from console]
Error location: [file name, line number if available]
The code:
[paste the relevant function or section — not the entire file]

What I expected: [what should happen]
What actually happens: [what's happening instead]
What I've tried: [any fixes you've already attempted]

Browser: [Chrome/Firefox/Safari/Edge]
Recent changes: [what did you change before the error appeared?]

Diagnose the issue and provide a fix.

My CSS layout isn't working as expected:

Expected: [describe or sketch the layout you want]
Actual: [describe what's happening instead]

HTML structure:
[paste the relevant HTML]

CSS:
[paste the relevant CSS]

Viewport width where it breaks: [specific breakpoint or range]
Browser: [which browser]

Common issues to check:
- Flexbox alignment and wrapping behavior
- Grid track sizing and overflow
- Box model (is padding/border causing unexpected width?)
- Position context (is the parent positioned?)
- Z-index stacking context issues

This code works in [browser A] but breaks in [browser B]:

The code:
[paste relevant HTML/CSS/JS]

Works correctly in: [browser + version]
Breaks in: [browser + version]
What breaks: [describe the specific behavior difference]

Check for:
1. CSS properties that need vendor prefixes
2. JavaScript APIs not supported in the target browser
3. CSS layout differences between rendering engines
4. Default browser styles that differ

Optimize the images on my website for performance:

Current setup:
- [number] images on the page
- Largest image: [size in KB/MB]
- Image formats: [jpg/png/svg]

Generate:
1. Responsive image HTML using srcset and sizes attributes
2. Lazy loading implementation (loading="lazy" for below-fold images)
3. Appropriate image format recommendations (WebP with fallbacks)
4. Width and height attributes to prevent layout shift (CLS)
5. Art direction with picture element for different screen sizes

Example image to optimize: [describe one of your images]

Review this JavaScript for performance issues:

[paste your JavaScript]

Check for:
1. DOM queries inside loops (should cache references)
2. Missing debounce/throttle on scroll or resize handlers
3. Large arrays processed synchronously (should they be chunked?)
4. Event listeners not cleaned up (memory leaks)
5. Synchronous operations that could be async
6. Unnecessary re-renders or DOM updates

For each issue, show the current code and the optimized version.

Audit my website HTML/CSS/JS for Core Web Vitals performance:

[paste your HTML, or describe the page structure]

Check and optimize:

LCP (Largest Contentful Paint — target: < 2.5s):
- Is the hero image or largest element preloaded?
- Are render-blocking resources minimized?
- Is critical CSS inlined or prioritized?

CLS (Cumulative Layout Shift — target: < 0.1):
- Do all images have width and height attributes?
- Are fonts loaded with font-display: swap?
- Do dynamic elements (ads, embeds) have reserved space?

INP (Interaction to Next Paint — target: < 200ms):
- Are event handlers efficient?
- Is heavy JavaScript deferred?
- Are long tasks broken into smaller chunks?

Provide specific code fixes for each issue found.

Audit this page for accessibility issues:

[paste your HTML]

Check against WCAG 2.1 AA:
1. Color contrast (text against backgrounds — need 4.5:1 ratio)
2. Keyboard navigation (can every interactive element be reached and used?)
3. Screen reader compatibility (landmarks, labels, live regions)
4. Focus management (visible focus indicators, logical tab order)
5. Alternative text (meaningful for informative images, empty for decorative)
6. Form accessibility (labels, error messages, required indicators)
7. Motion sensitivity (respects prefers-reduced-motion)

Prioritize issues by severity: Critical → Major → Minor.