Crack the Code: Level Up from Print Logs to Pro Debugging with DevTools

When I started my journey into backend development, especially with Java, my idea of "debugging" was printing variables using System.out.println(). It worked—kind of. But as the code grew complex, API interactions deepened, and edge cases multiplied, I realized this approach was like trying to fix a car engine by just listening to its sound. It wasn’t enough.

Over the last few weeks, while working with Ajay, a Principal Software Engineer on our team, on a Spring Boot-based project. I learned how to move from basic debugging to a much more powerful and insightful debugging workflow using modern tools. This article is a beginner-friendly guide to help you evolve your debugging skills—especially if you’re working in Java-based backends and web-based frontends.

---

1. 🌱 The Beginning: Print Logs with System.out.println

Let’s face it—we all started here.

public class LoginService {
    public boolean validateUser(String username, String password) {
        System.out.println("Username received: " + username);
        System.out.println("Password received: " + password);
        return "admin".equals(username) && "password123".equals(password);
    }
}

The above method works. But what if the credentials are coming from an HTTP request? What if the logic is spread across 3 services and multiple classes? How do you track bugs in a microservice? Print logs will soon become noise.

---

2. 🔍 Level Up: Enter the Browser DevTools (Frontend Debugging)

Most backend developers underestimate the browser. But if you're working on an API or web-based application, learning how to debug in the browser will change everything.

🔧 The "Network" Tab

• Open Chrome or any modern browser.

• Press F12 or right-click → Inspect → go to Network tab.

• Make an API call (e.g., clicking "Submit" on a form).

• You’ll see the network request appear. Click it.

You’ll get:

• Request URL

• Request method (GET, POST, etc.)

• Request body

• Response status

• Response body

• Headers (including auth tokens)

This helps when your backend is working fine, but the frontend is misconfigured or calling the wrong URL.

👉 Use case: You can catch CORS issues, incorrect API paths, or missing auth tokens without touching your backend.

⛔ Example Bug

Let’s say your frontend is making a call like this:

fetch("http://localhost:8080/api/users", {
  method: "POST",
  body: JSON.stringify({ username: "john", password: "123" }),
});

But in the backend, your endpoint is /api/v1/users. You’d immediately spot the 404 Not Found in the Network tab.

---

3. 🧠 The "Sources" Tab — Breakpoints and Live Debugging

While logs tell you what happened, breakpoints let you see it happening live.

Steps to Debug with Breakpoints:

1. Go to the Sources tab in DevTools.

2. Navigate to your frontend .js or .ts file.

3. Click on the line number to add a breakpoint.

4. Refresh the page or trigger the event.

5. The execution pauses at that point.

From there, you can:

• Inspect variables.

• Step into functions.

• Watch expressions.

• Edit values during runtime!

---

4. 💻 Backend Debugging — Beyond Print Logs

While frontend has the browser, your Java backend has a powerful tool called the IDE Debugger.

In IntelliJ / Eclipse:

1. Add breakpoints by clicking next to the line numbers.

2. Start your Spring Boot app in debug mode.

    ./mvnw spring-boot:run -Dspring-boot.run.fork=false
   

3. When the breakpoint is hit, you can:

   • Inspect all method parameters

   • View object structures

   • Step into and over methods

Example

@GetMapping("/api/user/{id}")
public User getUser(@PathVariable Long id) {
    User user = userService.findById(id);
    System.out.println("Fetched user: " + user);
    return user;
}

With breakpoints, you can directly inspect the user object, its fields, and even test different id values without restarting the app or adding more print lines.

---

5. 🎯 Bonus Tip: Combine Frontend and Backend Debugging

Say a user reports an issue that their profile update isn't working.

Your process can be:

1. Open DevTools → Network → See the API request payload.

2. Check if the API endpoint is correct and the request body is well-formed.

3. If yes, go to your backend and debug that API using breakpoints.

4. Track the flow of execution, check database queries, and return values.

This end-to-end debugging approach is how tech leads and senior developers solve problems quickly.

---

6. 🌟 phpMyAdmin Bonus: Schema Understanding

Recently, I also explored phpMyAdmin in depth. One cool feature I found: You can click on any table and instantly view the structure, column types, indexes, and relationships. For example:

• Column configuration_id in a table is of type BIGINT and is a foreign key.

• Timestamps like start_time and end_time are nullable datetime fields.

This helps when you're designing queries, validating schema constraints, or planning migrations.

---

🔚 Conclusion

Debugging isn’t just about fixing bugs. It’s about understanding your system deeply. Moving from System.out.println() to network inspections, breakpoints, and database explorations is a sign of progress every developer should strive for.

If you’re just starting out, take it one step at a time. Add one new debugging tool to your arsenal each week, and you’ll become an efficient problem-solver in no time.

---

🚀 Have you made the jump from print logs to DevTools yet? Share your journey below in the comments!