Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Debugging and Error Boundary in React.js
Understanding error messages
If there is an error in code execution react displays a readable error message on screen with line number. We should understand the error message to correct it.
We have a below file App.js having one input element. On change of input value we see the console text −
import React, {Component} from 'react';
class App extends Component {
onChangeHandler=(event)=>{
console.log(event.target.value);
}
render(){
return (
<div >
<input name="myInput" onChange={(event)=>this.onChangeHandler(event)}/>
</div>
);
}
}
export default App;Now, if we mistakenly add event.input.value instead of event.target.value or any other error, React will display an error message −
From the error line number shown on web page we can correct it.
Debugging code
We can debug the actual react code using inspect of browser.
- Press F12 or right click on browser and do inspect
- Navigate to source tab which is adjacent to console tab
- Inside source tab you can find the src folder
- Inside src folder we can find the required react js file
- Add a break point where you want to debug and process from UI
- Once we get the debugger, we can point on the currently executing code to see its values
- This can be really useful to solve logical errors if any
Use of React Developer tool
The React developer tool is an extension which once added gives the insights on React component
It’s helpful to see the properties and state values of React components at runtime.
Click F12 or right click on browser and do inspect element. We will see a react tab. Click on it.
Whenever we click on the html elements in elements tab in left side we will see properties and values associated with it.
643 Views
