Category: react
dev tools in react
Published on 10 Apr 2026
Explanation
Use the browser Developer Tools Network tab
to inspect API requests made from a
React application.
It helps check request URLs,
status codes, headers, and response data.
Code:
Steps: 1. Open browser (Chrome / Edge). 2. Right click → Inspect. 3. Go to Network tab. 4. Reload page. 5. Select Fetch/XHR. 6. Click request to view headers, payload, preview, and response.
Explanation
Use console.log() inside API calls to debug
request execution and verify whether the API
is triggered correctly in React components.
Code:
useEffect(() => {
console.log('Fetching users...');
fetch('https://api.example.com/users')
.then(res => res.json())
.then(data => console.log(data));
}, []);
Explanation
Handle errors using try-catch with
async/await to
detect network failures and display
meaningful debugging
messages.
Code:
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('
https://api.example.com/users');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Network error:',
error);
}
};
fetchData();
}, []);
Explanation
Check HTTP response status codes before
processing
API data to debug failed requests like
404 or 500 errors.
Code:
fetch('https://api.example.com/users')
.then(response => {
if (!response.ok) {
throw new Error('Request failed with
status ' + response.status);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
Explanation
Use Axios interceptors to debug request and
response flow globally in React applications.
Code:
import axios from 'axios';
axios.interceptors.request.use(request => {
console.log('Starting Request:', request);
return request;
});
axios.interceptors.response.use(response =>
{
console.log('Response:', response);
return response;
});
Explanation
Use React Developer Tools extension along
with
Network tab to inspect component re-renders
and
confirm when API calls are triggered.
Code:
Steps: 1. Install React Developer Tools extension. 2. Open DevTools → Components tab. 3. Select component. 4. Verify props/state updates. 5. Match updates with Network requests.