A button on a page does not work when clicked. How would you use browser DevTools to find the problem?

What the interviewer wants to hear

• Check the Console for JavaScript errors and warnings
• Use the Elements panel to confirm the element exists and is not covered by another element
• Check event listeners on the element and set breakpoints in the Sources panel
• Use the Network panel to see whether the expected request is sent and what it returns
• Reproduce step by step and narrow down the cause before changing code

Model answer

First I reproduce the bug myself and open DevTools. I look at the Console, because an earlier JavaScript error often stops a handler from being attached. Next I inspect the button in the Elements panel: is it the element I expect, is it disabled, or is an invisible overlay sitting on top of it? The Event Listeners tab shows whether a click handler is actually attached. If it is, I set a breakpoint in the Sources panel, or use a click event listener breakpoint, and step through the code to see where it stops or takes the wrong branch. If the button should call an API, I open the Network panel to check whether the request goes out, its status code and the response body. That tells me whether the problem is in the frontend or the backend. Once I find the cause, I fix it, add a test if possible, and confirm the fix in the browsers where it was reported.

More easy Frontend Developer questions

• Explain the CSS box model. What is the difference between content-box and border-box?
• What is the difference between var, let and const in JavaScript?
• What is semantic HTML and why does it matter?
• In React, what is the difference between props and state?
• How do you make a web page responsive for mobile, tablet and desktop?
• What is the difference between Flexbox and CSS Grid, and when would you use each?
• What is a closure in JavaScript? Give a practical example of where you use one.
• How do you make a form accessible?
• What is a Promise, and how does async/await relate to it?