A bug can feel enormous when your whole application is in front of you. The first useful move is often to make the question smaller. What is the shortest sequence that produces the problem?
Describe the gap.
Separate what you expected from what actually happened. “The button is broken” leaves too many possibilities. “After I add a second item, the list displays only the newest one” gives you a specific behavior to investigate.
| Less useful | More useful |
|---|---|
| It doesn’t work. | The form resets when I press Enter. |
| The API is wrong. | The request returns a response, but the list is empty. |
| It randomly crashes. | It fails when I open an item with no image. |
Make a smaller example.
Remove the parts that are not needed to reproduce the behavior. If you are checking how a list changes, you may not need the navigation, the stylesheet, or a real server response. Use a tiny example with an input you can explain.
const items = ["first"];
const nextItems = [...items, "second"];
console.log(items); // ["first"]
console.log(nextItems); // ["first", "second"]This example is small enough to inspect directly. The purpose is not to scatter console statements everywhere; it is to observe one value at the point where your expectation and the program disagree.
Change one thing.
State a hypothesis, make a small change, and repeat the same steps. If you change the data, the event handler, and the rendering together, it becomes harder to know which change mattered.
A useful debugging note says what you tried and what changed, including when nothing changed.
Ask a useful question.
When you ask for help, include the expected behavior, the actual behavior, the smallest relevant code, the steps to reproduce the issue, and what you have already checked. Remove passwords, tokens, private records, and unrelated logs.
A good question helps someone else follow your reasoning. Very often, writing it also reveals the next thing you should investigate.