If you do not have visual studio code already installed, it can be downloaded from here : Download Visual Studio Code We will mainly see how this application can be debugged from right inside the Visual Studio Code. As the main motive of this blog is to show how React App can be debugged from Visual Studio Code, we will not discuss how the application is built. This is a popular example for anyone learning React. In this blog, we will take example of Filtered Product List application found on under Thinking in React section. Visual Studio Code with its in-built debugging support for node.js runtime is perfect for this scenario. ![]() But having developed many java-based enterprise applications in previous years, I am someone who prefers to debug code inside my editor only. There is nothing wrong with this approach of debugging. For React-based apps, React Developer Tools is such an extension. Adding breakpoints to your code will make debugging much easier.Debugging React Apps In Visual Studio Codeīy Pranav Manair Browser debugger or extension to the browser debugger is the usual way of debugging Javascript-based web applications and Javascript-based frameworks like React, Angular, etc. The final tip that I will leave you with is the humble breakpoint. You can find more information about what can do in the debugger console, here. You can obviously use the debug console to do the same things as you could within the usual browser console tab. Instead of having to type out document.querySelector() you can use $ as a quick reference. The benefit of using the console to access elements is that you get access to a handy shortcut. Once the debugger has launched and attached, you can also use it to query the element on the page. Using console.log() isn't the only useful feature of the debug console. Get data from an API on page load, render it out here □□□ This technique can be useful when you don't want to leave VS-Code and you want to check data. ![]() In your debug console you should now see the output of your console.log statement. On the screen that pops up, click the 'Run and Debug' button. In the side ribbon, click on the 'Run and Debug' option, or, use the shortcut key Control + Shift + J. Next, log out some data using normal console.log() as can be seen below: ![]() Add a script tag and add some JavaScript to it. Luckily, debugging an HTML page that contains JavaSCript is super simple using VS Code.įirst, the best debugging tip is learning how to write to the debug console. ![]() Learning how to debug your code is an essential step to becoming a coding legend □□□♂️□□□□. In this tutorial, you will learn how to use the Visual Studio Code debugger.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |