mfopk.blogg.se - Visual studio code debug react

npm is included with Node.js which you can install from here. To install and use the generator as well as run the React application server, you'll need the Node.js JavaScript runtime and npm (the Node.js package manager) installed. We'll be using the create-react-app generator for this tutorial. The Visual Studio Code editor supports React.js IntelliSense and code navigation out of the box. Install it by navigating to the extensions pane and searching for: debugger for chrome.React is a popular JavaScript library developed by Facebook for building web application user interfaces. To get VSCode and Chrome communicating with each other we need to install an extension called Debugger for Chrome. Instead of using Chrome’s developer tools you can use VSCode to debug browser code. This is the same debugger protocol that Chrome’s developer tools use. VSCode connects to Chrome through Chrome’s debugger protocol. Next up we need to install the VSCode extension so it knows how to talk to Chrome. This will create a new directory that contains the new React application.

Once installed create a new project by running create-react-app vscode-tutorial.

Install create-react-app globally by running npm i -g create-react-app.

Alternatively if you have an existing application you can use that. I use create-react-app a lot of the time because I hate writing boilerplate. You will learn how to hook up VSCode and Chrome so you can debug browser code directly from VSCode 😎 Setup the Test Projectīefore we begin with the tutorial we need to create a test application that we’ll use later in the article. In this guide I will show you how to supercharge your React workflow with Visual Studio Code’s debugging features.

Gone are the days where I spend my time bouncing back and forth between the terminal, browser and editor.

VSCode debugging tools and Facebook’s Jest