Masalah Umum & Panduan Pemecahan ErrorMasalah Umum & Panduan Pemecahan Error

Chapter OverviewChapter Overview

In the AI era, the way we troubleshoot errors has changed.In the AI era, the way we troubleshoot errors has changed.

You don't need to memorize all error types, you don't need to become a debugging expert, and you don't even need to understand what the error means.You don't need to memorize all error types, you don't need to become a debugging expert, and you don't even need to understand what the error means.

You only need to learn one thing: how to ask AI.You only need to learn one thing: how to ask AI.

This chapter will teach you a troubleshooting process from simple to advanced:This chapter will teach you a troubleshooting process from simple to advanced:

1. Step 1: Ask directly: Describe the phenomenon + screenshot, ask in one sentenceStep 1: Ask directly: Describe the phenomenon + screenshot, ask in one sentence
2. Step 2: Add information: If it can't be solved, open F12 to add key informationStep 2: Add information: If it can't be solved, open F12 to add key information

After mastering this process, you'll be able to solve 90% of errors yourself.After mastering this process, you'll be able to solve 90% of errors yourself.

📖 Konsep Penting📖 Core Concept

All methods in this chapter are based on actual experience with AI IDEs like Cursor/Trae/Claude, and can be directly applied to daily development.All methods in this chapter are based on actual experience with AI IDEs like Cursor/Trae/Claude, and can be directly applied to daily development.

{ title: 'Ask Directly', description: 'Describe phenomenon + screenshot' },{ title: 'Ask Directly', description: 'Describe phenomenon + screenshot' },

{ title: 'Add Information', description: 'Open F12 to locate problem' },{ title: 'Add Information', description: 'Open F12 to locate problem' },

{ title: 'Iterate', description: 'Until problem is solved' }{ title: 'Iterate', description: 'Until problem is solved' }

]" />]" />

1. Core Mindset: Screenshot and Ask AI1. Core Mindset: Screenshot and Ask AI

⚠️ Catatan Keamanan / Peringatan⚠️ Warning / Security Note

Many beginners' first reaction when encountering errors is: - Panic and start randomly modifying code - Spend half an hour searching "how to solve this specific error" - Try to understand what the error means yourself - Debug alone until late at night These are all wasting time. In the AI era, debugging has become a very simple matter: `` See error → Screenshot → Ask AI → Do what AI says `` You don't need to understand the error, you don't need to know how to debug, you don't even need to know where the problem is. You only need to learn how to ask.Many beginners' first reaction when encountering errors is: - Panic and start randomly modifying code - Spend half an hour searching "how to solve this specific error" - Try to understand what the error means yourself - Debug alone until late at night These are all wasting time. In the AI era, debugging has become a very simple matter: `` See error → Screenshot → Ask AI → Do what AI says `` You don't need to understand the error, you don't need to know how to debug, you don't even need to know where the problem is. You only need to learn how to ask.

1.1 The Simplest Way to Ask1.1 The Simplest Way to Ask

No complex templates needed, choose from two methods:No complex templates needed, choose from two methods:

Method 1: Describe the phenomenonMethod 1: Describe the phenomenon

Format: What you just did, what happened nowFormat: What you just did, what happened now

CODE 📋 Salin📋 Copy

I just modified the login page code, now the page is blank, what should I do?

Method 2: ScreenshotMethod 2: Screenshot

Directly screenshot the current page or error messageDirectly screenshot the current page or error message

CODE 📋 Salin📋 Copy

[Screenshot] How to solve this error?

Best method: Description + ScreenshotBest method: Description + Screenshot

CODE 📋 Salin📋 Copy

I just modified the login page code, now the page is blank. [Screenshot] What should I do?

Remember: Describe the context clearly, add a screenshot, and AI can help you solve the problem faster.Remember: Describe the context clearly, add a screenshot, and AI can help you solve the problem faster.

1.2 How to Explain the Problem Clearly1.2 How to Explain the Problem Clearly

Many beginners know they need to ask, but don't know how to say it. Actually, you only need to explain three things:Many beginners know they need to ask, but don't know how to say it. Actually, you only need to explain three things:

1. What you just did1. What you just did

CODE 📋 Salin📋 Copy

I just clicked the save button I just modified the login page code I just refreshed the page

2. What you see now2. What you see now

CODE 📋 Salin📋 Copy

Now the page is blank Now the button has no response when clicked Now it shows an error message

3. What effect you want to achieve3. What effect you want to achieve

CODE 📋 Salin📋 Copy

I want the data to save successfully I want the page to display normally I want a prompt to pop up after clicking the button

Complete example:Complete example:

CODE 📋 Salin📋 Copy

I just clicked the save button, now the page shows "Save failed" error. [Screenshot] I want the form data to save to the database successfully, what should I do?

Key principles:Key principles:

• Use plain language, no technical jargon neededUse plain language, no technical jargon needed
• Speak in chronological order: what you did first, then what happenedSpeak in chronological order: what you did first, then what happened
• State your expectations so AI knows what you wantState your expectations so AI knows what you want

2. Step 1: Describe the Phenomenon Directly and Ask2. Step 1: Describe the Phenomenon Directly and Ask

When encountering a problem, don't rush to open F12. First describe the phenomenon directly, screenshot the current page, and show it to AI.When encountering a problem, don't rush to open F12. First describe the phenomenon directly, screenshot the current page, and show it to AI.

Many times, AI can directly give a solution after seeing the screenshot.Many times, AI can directly give a solution after seeing the screenshot.

2.1 How to Describe Common Phenomena2.1 How to Describe Common Phenomena

💡 Tips Praktis💡 Pro Tip

Page is blank `` The page opens blank, what should I do? [Screenshot] ` Button click has no response ` Clicking this button has no response, help me check. [Screenshot] ` Data won't save ` Clicked save, data didn't save, what should I do? [Screenshot] ` Style displays incorrectly ` This button position is off, how to adjust? [Screenshot] ` API error ` Calling the API resulted in an error, help me check. [Screenshot] ``Page is blank `` The page opens blank, what should I do? [Screenshot] ` Button click has no response ` Clicking this button has no response, help me check. [Screenshot] ` Data won't save ` Clicked save, data didn't save, what should I do? [Screenshot] ` Style displays incorrectly ` This button position is off, how to adjust? [Screenshot] ` API error ` Calling the API resulted in an error, help me check. [Screenshot] ``

2.2 If AI Solves It Directly2.2 If AI Solves It Directly

Congratulations, problem solved! Just modify according to what AI says.Congratulations, problem solved! Just modify according to what AI says.

2.3 If AI Says "Need More Information"2.3 If AI Says "Need More Information"

Then you need to open F12 and add key information. Read on.Then you need to open F12 and add key information. Read on.

3. Step 2: Add Key Information3. Step 2: Add Key Information

When AI says it needs more information, open F12 and screenshot the corresponding content based on the problem type.When AI says it needs more information, open F12 and screenshot the corresponding content based on the problem type.

3.1 When to Add Information3.1 When to Add Information

AI might reply like this:AI might reply like this:

• "Please open Console to see if there are any errors""Please open Console to see if there are any errors"
• "Screenshot the Network panel for me to see""Screenshot the Network panel for me to see"
• "Need to see the specific error message""Need to see the specific error message"

At this point, add screenshots according to the guidance below.At this point, add screenshots according to the guidance below.

3.2 Add Console Information (Page Blank/Error)3.2 Add Console Information (Page Blank/Error)

💡 Tips Praktis💡 Pro Tip

Step 1: Press F12 to open Developer Tools On Mac it's Cmd+Option+I, or right-click the page and select "Inspect". Step 2: Switch to Console tab Step 3: Screenshot the red error message Step 4: Send to AI `` Console error is as follows: [Screenshot] ``Step 1: Press F12 to open Developer Tools On Mac it's Cmd+Option+I, or right-click the page and select "Inspect". Step 2: Switch to Console tab Step 3: Screenshot the red error message Step 4: Send to AI `` Console error is as follows: [Screenshot] ``

3.3 Add Network Information (Data Issues/API Errors)3.3 Add Network Information (Data Issues/API Errors)

💡 Tips Praktis💡 Pro Tip

Step 1: Press F12 to open Developer Tools Step 2: Switch to Network tab Step 3: Perform the operation again (click save/refresh page) Step 4: Find the corresponding request and screenshot - Look at URL and status code - Look at Payload (parameters passed) - Look at Response (returned result) Step 5: Send to AI `` Network information is as follows: Request: [Screenshot 1] Parameters: [Screenshot 2] Response: [Screenshot 3] ``Step 1: Press F12 to open Developer Tools Step 2: Switch to Network tab Step 3: Perform the operation again (click save/refresh page) Step 4: Find the corresponding request and screenshot - Look at URL and status code - Look at Payload (parameters passed) - Look at Response (returned result) Step 5: Send to AI `` Network information is as follows: Request: [Screenshot 1] Parameters: [Screenshot 2] Response: [Screenshot 3] ``

3.4 Add Elements Information (Style Issues)3.4 Add Elements Information (Style Issues)

💡 Tips Praktis💡 Pro Tip

Step 1: Right-click element → "Inspect" Developer Tools will automatically locate that element. Step 2: Screenshot the Styles panel Step 3: Send to AI `` Element styles are as follows: [Screenshot] ``Step 1: Right-click element → "Inspect" Developer Tools will automatically locate that element. Step 2: Screenshot the Styles panel Step 3: Send to AI `` Element styles are as follows: [Screenshot] ``

4. Step 3: Iterate Until Solved4. Step 3: Iterate Until Solved

4.1 Inefficient Approaches4.1 Inefficient Approaches

These approaches will waste your time:These approaches will waste your time:

• Panic when seeing an error and start randomly modifying codePanic when seeing an error and start randomly modifying code
• Spend half an hour searching for error solutionsSpend half an hour searching for error solutions
• Try to understand the meaning of every error yourselfTry to understand the meaning of every error yourself
• Debug alone until late at nightDebug alone until late at night

4.2 Efficient Approaches4.2 Efficient Approaches

Follow this process:Follow this process:

• First describe the phenomenon directly and screenshot to askFirst describe the phenomenon directly and screenshot to ask
• When AI says it needs more information, open F12 to addWhen AI says it needs more information, open F12 to add
• Modify code according to suggestionsModify code according to suggestions
• After modifying, test; if problem persists, continue screenshotting and askingAfter modifying, test; if problem persists, continue screenshotting and asking

5. Summary: Complete Process5. Summary: Complete Process

CODE 📋 Salin📋 Copy

Encounter problem ↓ Describe phenomenon directly + screenshot ↓ Send to AI: "What should I do?" ↓ AI solves directly? ↓ Yes Do what AI says ↓ Test if solved ↓ ↓ No / AI needs more information Open F12, add key information ↓ Send to AI again ↓ Repeat until solved

← SebelumnyaPreviousSkenario AI di Alur Kerja NyataSkenario AI di Alur Kerja Nyata SelanjutnyaNext →Lanjut ke Level 2Lanjut ke Level 2