How to debug JavaScript errors in Replit

Click the Run button at the top of your Replit workspace to start your web app. The Preview pane opens showing your running application. Look for the DevTools icon in the Preview pane toolbar — it looks like a small wrench or console icon. Click it to open the integrated browser developer tools. The Console tab shows all client-side JavaScript output including errors, warnings, and your console.log statements. This is where browser JavaScript errors appear, not in the Replit Console tab.

Replit has two places where logs appear and beginners commonly look in the wrong one. The Console tab in the main workspace shows server-side output: anything printed by your Node.js backend, Express server, or Python Flask app. The Preview DevTools Console shows client-side output: anything from JavaScript running in the browser, including React component errors, DOM manipulation bugs, and fetch API failures. If you are debugging a frontend issue and see nothing in the Replit Console, check Preview DevTools instead.

1// This appears in Replit Console (server-side)
2console.log('Server started on port 3000');
3
4// This appears in Preview DevTools (client-side)
5// Inside a React component or browser script:
6console.log('Button clicked');

When you encounter an error, add console.log statements before and after the suspected line to narrow down exactly where the code fails. Log variable values, function arguments, and return values. Use console.error for errors and console.warn for warnings to visually distinguish them in the output. For objects and arrays, use console.table for a formatted view. Remove or comment out debug logs before deploying.

1// Trace a function step by step
2function fetchUserData(userId) {
3  console.log('fetchUserData called with:', userId);
4
5  if (!userId) {
6    console.error('userId is undefined or null!');
7    return null;
8  }
9
10  const url = `/api/users/${userId}`;
11  console.log('Fetching from URL:', url);
12
13  return fetch(url)
14    .then(response => {
15      console.log('Response status:', response.status);
16      return response.json();
17    })
18    .then(data => {
19      console.table(data);
20      return data;
21    })
22    .catch(error => {
23      console.error('Fetch failed:', error.message);
24    });
25}

When JavaScript throws an error, the browser console shows a stack trace with the error type, message, and a list of function calls that led to the error. The top line is the actual error (e.g., TypeError: Cannot read properties of undefined). Below it, each line shows a file name and line number. Click on any file reference to jump to that line in the source. Common error types are TypeError (accessing properties on undefined/null), ReferenceError (using an undeclared variable), and SyntaxError (malformed code).

1// Common error: accessing a property on undefined
2const user = undefined;
3console.log(user.name); 
4// TypeError: Cannot read properties of undefined (reading 'name')
5
6// Fix: add a null check
7const user = undefined;
8console.log(user?.name ?? 'No user');  // undefined, no crash
9
10// Common error: undeclared variable
11console.log(userName);
12// ReferenceError: userName is not defined
13
14// Fix: declare the variable first
15const userName = 'Alice';
16console.log(userName);

React applications show unique errors in the browser console. White screen with no visible error usually means a rendering crash — check the Preview DevTools Console for the React error boundary message. Common React errors include hooks called conditionally (violating the Rules of Hooks), missing key props in list rendering, and state updates on unmounted components. React errors often show two stack traces: one for the actual JavaScript error and one showing the component tree.

1// Error: Missing key prop in lists
2// Warning: Each child in a list should have a unique "key" prop
3function UserList({ users }) {
4  return (
5    <ul>
6      {users.map(user => (
7        // Wrong: no key
8        <li>{user.name}</li>
9      ))}
10    </ul>
11  );
12}
13
14// Fixed: add key prop
15function UserList({ users }) {
16  return (
17    <ul>
18      {users.map(user => (
19        <li key={user.id}>{user.name}</li>
20      ))}
21    </ul>
22  );
23}

Many JavaScript errors come from failed API calls. In the Preview DevTools, switch to the Network tab to see every HTTP request your app makes. Click on a failed request (shown in red) to see the status code, request headers, and response body. Common issues include 404 (wrong URL path), 500 (server error), and CORS errors (Access-Control-Allow-Origin header missing). The Network tab shows you exactly what your frontend sent and what the server returned.

1// Debug a fetch call that silently fails
2async function loadData() {
3  try {
4    const response = await fetch('/api/data');
5    console.log('Status:', response.status);
6
7    if (!response.ok) {
8      const errorText = await response.text();
9      console.error('API error:', response.status, errorText);
10      return;
11    }
12
13    const data = await response.json();
14    console.log('Data loaded:', data);
15  } catch (error) {
16    console.error('Network error:', error.message);
17  }
18}