Menu
I wonder if anyone could suggest a step by step beginner tutorial about how to debug React.js app? I am pretty new to React, right now the most annoying thing is there are a lot error shown up in the console but I have no idea how to trace them back.
288
When debugging a React app, I often find breakpoints to be very helpful. There are two main ways in which we can use them: By writing the debugger statement in our source code. By clicking on a specific line of the code in the Chrome web browser (or Firefox, Edge, etc.)
Open the console by either right-clicking and inspecting an element or by opening the toolbar by clicking View > Developer > JavaScript console. The Components tab will show the current React component tree, along with any props, state, or context.
It's difficult to describe a general strategy to debug "a lot error shown up" so I will walk you through the process for debugging component level errors:
Install the React dev tools extension for your browser of choice:
Find the component
I recommend either of these paths:
2.a. Open React tab from your browser dev tools and type in the bottom search bar to lookup components by name.
2.b. Open Elements tab, select some element, and switch back to React. The component hierarchy will be expanded up until the React component matching the DOM node you selected in Elements.
Inspect the state and props of the component that is behaving incorrectly.
If for some reason you don't like installing browser extensions, you can throw one or more debugger; statements to set breakpoints that will "pause" the execution of your app and let you inspect the call stack, scope, and errors at these points.
91
React has its own debug tool installed in chrome dev tools. It is the most appropriate tool at the moment for debugging react apps. It allows you to add break-points, edit your props in the dev tools and see instant results. A good tutorial is this https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html, which is the official tutorial for debugging React. You can also download the extension "React Developer Tools" which will install the react dependencies on your developer tools in chrome.
You can also use the standard chrome debugger without the React dependency, which also works well. A good tutorial for debugging in Chrome is this: https://developers.google.com/web/tools/javascript/index?hl=en
The main issue is to learn how to add a break-point into your code via the dev tools and learn how to identify the problems via the responses you get from them. The last tutorial shows you really well how to do that.
I hope that helps a bit and happy coding!
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
