Inspect a React element on a page using the regular inspector, then switch to the React tab. The side pane is a great place to store variables and see updates to the code. Expand or collapse items by clicking the arrows. Use the arrow keys or hjkl keys to navigate the code, right-click components to examine them in the elements pane, show source, and so on. The React tool works pretty much like every other DevTool. The main panel will now show you the React tree view: Open your DevTools by hitting command-option-i (control-shift-i for Windows), clicking the button in the toolbar, or right-clicking on the page and selecting “inspect.” You’ll see the React panel alongside the basic DevTools panels. When you visit a React-powered site, the add-on icon will appear to the right of the Firefox address bar: Once it’s installed, you’ll be able to examine React code on any site that uses it. Get the latest version of the React DevTool add-on here. When combined with Mozilla’s Debugger.html tool, all these stand-alone tools will turn your browser into a full-featured debugger. These add-ons, and others like the Vue add-on will make debugging popular JavaScript frameworks easier. React Developer Tools by Facebook and Redux DevTools by Zalmoxisus however, let you inspect, modify, and debug your code right in the browser. Despite its popularity, it’s still not easy to debug React in the browser. In fact, the Mozilla community uses React to build a lot of the Firefox DevTools UI and, famously, the Facebook UI is built with React. It’s easy to write, easy to use and is great for teams.
React, along with Redux, is one of the fastest and most flexible UI frameworks on the web.
0 kommentar(er)
