Debugging, Testing & Tooling
10 questions found
How do you pause code execution at a specific line using the browser DevTools?
Beginner
Insert a debugger statement in your code, or click in the gutter of the Sources panel to set a breakpoint. When execution reaches that line, DevTools pauses so you can inspect variables and step through code.
function calculateTotal(items) {
debugger; // execution pauses here when DevTools is open
return items.reduce((sum, i) => sum + i.price, 0);
}
Real-world example
Pausing mid-function to inspect why a total is calculating incorrectly.
Common follow-ups: What's the difference between 'Step Over', 'Step Into', and 'Step Out'?
Error Handling
What is console.table() useful for?
Beginner
console.table() renders an array of objects as a formatted table in the console, making it much easier to scan rows and columns than reading nested console.log() output.
console.table([
{ name: 'Sam', age: 30 },
{ name: 'Alex', age: 25 }
]);
Real-world example
Quickly inspecting an array of API results without writing custom formatting code.
Common follow-ups: What other lesser-known console methods exist, like console.group()?
Arrays & Array Methods
What is a unit test and what makes a good one?
Beginner
A unit test verifies that a single, isolated piece of code (usually a function) behaves correctly for given inputs. A good unit test is fast, deterministic, tests one behavior at a time, and doesn't depend on external systems like a real database or network.
test('add() sums two numbers', () => {
expect(add(2, 3)).toBe(5);
});
Real-world example
Testing a formatCurrency() utility function in isolation before it's used across the app.
Common follow-ups: What's the difference between a unit test and an integration test?
Functional Programming
How does Jest's mocking help isolate the code under test?
Intermediate
jest.fn() and jest.mock() replace real dependencies (API calls, modules, timers) with controllable fake implementations, so tests can verify how your code calls those dependencies without triggering real network requests or side effects.
const fetchUser = jest.fn().mockResolvedValue({ name: 'Sam' });
await fetchUser();
expect(fetchUser).toHaveBeenCalledTimes(1);
Real-world example
Testing a component that fetches user data without hitting a real API in CI.
Common follow-ups: What's the difference between a mock, a stub, and a spy?
Async Iterators & Streams
What is code coverage and why isn't 100% coverage the same as bug-free code?
Intermediate
Code coverage measures which lines/branches of code ran during tests, expressed as a percentage. High coverage only proves code was *executed*, not that its behavior was *correctly asserted* — a test can run every line and still assert nothing meaningful.
// A test that runs the code but checks nothing:
test('runs without checking', () => {
calculateTotal(items); // 100% line coverage, zero verification
});
Real-world example
A team hitting 100% coverage but still shipping bugs because tests lacked real assertions.
Common follow-ups: What's the difference between line coverage and branch coverage?
Error Handling
How does source mapping help when debugging minified or transpiled code?
Intermediate
A source map is a file that maps positions in generated (minified/transpiled) code back to the original source, so browser DevTools can show you readable original code and correct line numbers even though the browser is actually running the bundled output.
//# sourceMappingURL=app.min.js.map
// tells DevTools where to find the mapping file
Real-world example
Debugging a production error stack trace that points to original TypeScript source, not the minified bundle.
Common follow-ups: Why should source maps typically not be publicly exposed on production servers?
ES Modules
How do you write an effective test for asynchronous code?
Advanced
Return or await the Promise inside the test function so the test runner waits for it to resolve before checking assertions; forgetting to await causes the test to pass falsely before the async work even finishes.
test('fetches user data', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('Sam');
});
Real-world example
Testing that an async API wrapper correctly parses and returns the expected shape of data.
Common follow-ups: What happens if you forget the 'async' keyword on a test function that awaits something?
Promises & async/await
What is snapshot testing and what's a common pitfall with it?
Advanced
Snapshot testing saves a serialized representation of a component/output and fails future test runs if the output changes unexpectedly. The pitfall is developers blindly running 'update snapshots' without reviewing the diff, which silently approves real regressions.
expect(renderComponent(<Button label='Save' />)).toMatchSnapshot();
Real-world example
Catching accidental UI markup changes in a design-system component library.
Common follow-ups: How do you review a snapshot diff meaningfully instead of just accepting it?
Design Patterns in JavaScript
How does the Performance panel in DevTools help diagnose a janky UI?
Advanced
Recording a performance profile captures a timeline of scripting, rendering, painting, and layout work, letting you spot long-running JavaScript tasks, layout thrashing, or excessive re-renders that block the main thread and cause dropped frames.
// Programmatically mark points to correlate with the profile:
performance.mark('start-render');
renderList(items);
performance.mark('end-render');
performance.measure('render', 'start-render', 'end-render');
Real-world example
Diagnosing why scrolling a long list feels janky, by finding a synchronous layout-forcing function in the flame chart.
Common follow-ups: What's the difference between 'Scripting' and 'Rendering' time in the profiler?
Performance Optimization: Debouncing
Throttling & Memoization
What's the difference between end-to-end (E2E) tests and unit tests, and when do you use each?
Advanced
E2E tests (e.g. Playwright, Cypress) drive a real browser through actual user flows across the whole app, catching integration issues unit tests can't — but they're slower and more brittle. Unit tests are fast and precise but can't catch issues that only appear when pieces are wired together.
// Playwright E2E example
await page.goto('/login');
await page.fill('#email', 'test@example.com');
await page.click('#submit');
await expect(page).toHaveURL('/dashboard');
Real-world example
Using unit tests for a validation function, but an E2E test for the full checkout flow across multiple pages.
Common follow-ups: What's the 'testing pyramid' and why do most teams have far more unit tests than E2E tests?
Error Handling