Debugging Chrome's Download Filename Discrepancy

const users = [
  { id: 1, name: 'Alex', role: 'Admin' },
  { id: 2, name: 'Maria', role: 'User' },
  { id: 3, name: 'Sam', role: 'User' }
];

console.table(users);
  

Assertions with console.assert()

Want to log something only when things go wrong? console.assert() is your friend. It takes a condition as its first argument. If that condition is false, it logs the subsequent arguments and throws an assertion error. If it’s true, it does nothing.

const value = 10;
console.assert(value < 5, 'Value should be less than 5!');
// This will log an error because the condition is false.
  

The Heart of Debugging: The Sources Panel

This is where the real magic happens. The Sources panel is a full-featured code editor and JavaScript debugger. It’s here that we can finally leave console.log behind.

Using breakpoints is the single most important skill you can learn to level up your debugging. It’s like having a time machine for your code.

Setting Your First Breakpoint

A breakpoint is a deliberate pause in your code’s execution. Find the JavaScript file you want to debug in the file navigator on the left. To set a breakpoint, simply click on the line number where you want the code to pause. A blue marker will appear.

Now, when your code runs and hits that line, execution will freeze. The browser will seem to hang, but DevTools has taken over. You’re now in a debug session.

Stepping Through Your Code

Once paused, a set of controls appears at the top of the panel. Here’s what they do:

• Resume (F8): Continue execution until the next breakpoint (or until the end).
• Step Over (F10): Execute the current line and move to the next one. If the line is a function call, it will execute the entire function without going inside it.
• Step Into (F11): If the current line is a function call, this will jump inside that function to debug it line by line.
• Step Out (Shift + F11): If you’re inside a function, this will execute the rest of it and jump back out to the line where it was called.

As you step through, look at the Scope pane on the right. It shows you the current value of all local and global variables. This is the power of debugging: you see the actual state of your application at any given moment.

Conditional Breakpoints

Sometimes you only want to pause inside a loop when a specific condition is met (e.g., when `i` is 50). Setting a regular breakpoint would mean clicking “Resume” 49 times. Instead, right-click the line number, select “Add conditional breakpoint…”, and enter an expression like i === 50. The code will only pause when that condition is true.

Analyzing Network Traffic

Is your data not loading? Is an API call failing? The Network panel is your go-to. It logs every single request your browser makes, from images and CSS files to API calls (Fetch/XHR).

Filtering and Inspecting Requests

The list of requests can be overwhelming. Use the filter bar at the top to narrow it down. Clicking on Fetch/XHR is the most common use case, showing you only your API requests.

Click on any request in the list to inspect it in detail:

• Headers: See the request URL, method (GET/POST), status code, and all HTTP headers.
• Payload: For POST/PUT requests, see exactly what data was sent to the server.
• Preview/Response: See the raw data that came back from the server. The Preview tab often gives you a nicely formatted view.

If you see a request with a red status code (like 404 Not Found or 500 Internal Server Error), you’ve found your culprit.

Throttling Your Connection

Your app might work perfectly on your fast office Wi-Fi, but what about a user on a flaky 3G connection? The Network panel lets you simulate this. Use the “Throttling” dropdown (it usually defaults to “No throttling”) to test your app on “Slow 3G” or “Fast 3G.” This is essential for building resilient, performant web applications.

---

Conclusion

Debugging is a skill, and like any skill, it improves with practice. While console.log has its place for quick checks, it’s a blunt instrument. By embracing breakpoints in the Sources panel, inspecting data with console.table, and analyzing requests in the Network tab, you graduate from guessing to knowing.

So next time you hit a bug, resist the urge to litter your code with logs. Open DevTools, set a breakpoint, and start stepping through. Your future self will thank you.