Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.jetbrains.com/help/rider/Running_and_Debugging_TypeScript.html below:

Running and debugging TypeScript | JetBrains Rider Documentation

With JetBrains Rider, you can run and debug both server-side TypeScript code running on Node.js and client-side TypeScript code running in the browser.

With JetBrains Rider, you can run and debug server-side TypeScript code without previously compiling it into JavaScript.

For running and debugging of server-side multiple TypeScript file applications JetBrains Rider uses a built-in loader. When running or debugging a single file, you can turn the loader off by selecting None from the TypeScript loader list in the run/debug configuration.

1. Make sure you have Node.js 18 or higher on your computer.

2. Make sure the Node.js plugin is enabled in the settings. Press Ctrl+Alt+S to open settings and then select . Click the Installed tab. In the search field, type Node.js. For more information about plugins, refer to Managing plugins.

You can run server-side TypeScript from the Explorer tool window Alt+1, from the editor, or from the Run widget.

• In the Explorer tool window Alt+1, right-click the TypeScript file to run or the starting file of your application and select from the context menu.

• In the editor, open the TypeScript file to run or the starting file of your application and select from the list.

• In the editor, open the TypeScript file to run or the starting file of your application. Then from the Run widget on the toolbar select Current file and click next to it.

  Alternatively, from the Run widget select a previously created run/debug configuration and click next to it.

To run a scratch file, besides the above-mentioned methods, you can also click in the gutter and select the required action from the list.

No matter which way to run server-side TypeScript code you might choose, JetBrains Rider creates a temporary run/debug configuration of the type Node.js which you can save, edit, and reuse for running and debugging.

Learn more from Run/debug configurations.

You can debug server-side TypeScript from the Explorer tool window Alt+1, from the editor, or from the Run widget.

1. Set the breakpoints where necessary.

2. In the Project tool window, right-click the TypeScript file to debug or the starting file of your application and select from the context menu.

1. Set the breakpoints where necessary.

2. In the editor, open the TypeScript file to debug or the starting file of your application and select from the context menu.

1. Set the breakpoints where necessary.

2. In the editor, open the TypeScript file to debug or the starting file of your application. Then from the Run widget on the toolbar select Current file and click next to it.

   Alternatively, from the Run widget select a previously created run/debug configuration and click next to it.

To debug a scratch file, besides the above-mentioned methods, you can also click in the gutter and select the required action from the list.

If you need to run or debug single TypeScript files with Node.js, you can use ts-node instead of compiling your code as described in Compiling TypeScript into JavaScript.

• In the embedded Terminal (Alt+F12) , type:

  npm install --save-dev ts-node

1. Go to . Alternatively, select Edit Configurations from the Run widget on the toolbar.

   In the Edit Configurations dialog that opens, click the Add button () on the toolbar and select Node.js from the list. The Run/Debug Configuration: Node.js dialog opens.

2. In the Node Parameters field, add --require ts-node/register.

3. Specify the Node.js interpreter to use.

   If you choose the Project alias, JetBrains Rider will automatically use the project default interpreter from the Node interpreter field on the Node.js page . In most cases, JetBrains Rider detects the project default interpreter and fills in the field itself.

   You can also choose another configured local or remote interpreter or click and configure a new one.

4. In the File field, specify the TypeScript file to run or debug. Depending on your workflow, you can do that explicitly or using a macro.

   • If you are going to always launch the same TypeScript file, click and select this file in the dialog that opens. By default, the run/debug configuration gets the name of the selected file.

   • If you need to launch different files, type $FilePathRelativeToProjectRoot$. With this macro, JetBrains Rider will always launch the file in the active editor tab.

5. If necessary, specify any additional parameters for ts-node (for example, --project tsconfig.json) in the Application parameters field.

6. Save the configuration.

Depending on the way you specified your TypeScript file in the run/debug configuration, do one of the following:

• If you typed the filename explicitly, select the required configuration from the Run widget on the toolbar and click next to the list or press Shift+F10.

• If you specified a macro, open the TypeScript file to run in the editor, select the newly created configuration from the Run widget on the toolbar, and click or press Shift+F10.

JetBrains Rider shows the output in the Run tool window.

1. In the TypeScript file to debug, set the breakpoints as necessary.

2. Depending on the way you specified your TypeScript file in the run/debug configuration, do one of the following:

   • If you typed the filename explicitly, select the required configuration from the Run widget on the toolbar and click or press Shift+F9.

   • If you specified a macro, open the TypeScript file to debug in the editor, select the newly created configuration from the Run widget and click or press Shift+F9.

Because browsers process only JavaScript, you have to compile your client-side TypeScript code before running or debugging it.

Compilation can also produce source maps that set correspondence between your TypeScript code and the JavaScript code that is actually executed.

You can compile TypeScript with the built-in compiler or with other tools used either separately or as part of the build process.

By default, the built-in compiler outputs generated JavaScript files and sourcemaps next to the TypeScript file.

You can invoke compilation manually with the Compile actions from the TypeScript widget on the Status toolbar or enable automatic compilation on save.

Compilation errors are reported in the TypeScript Tool Window. This list is not affected by changes you make to your code and is updated only when you invoke compilation again.

The tool window shows up only after you first compile your TypeScript code manually. After that, the tool window is accessible via in the main menu or via the tool window bar.

1. Press Ctrl+Alt+S to open settings and then select .

2. Make sure the TypeScript Language Service checkbox is selected.

By default, the built-in compiler does not create source maps that will let you step through your TypeScript code during a debugging session. The compiler also by default processes either the TypeScript file in the active editor tab or all TypeScript files from the current project.

With a tsconfig.json file, you can modify this default behavior to generate source maps and compile only files from a custom scope.

1. Right-click a project in the Solution Explorer or a folder where your TypeScript code is and choose .

2. To generate source maps during compilation, make sure the sourceMap property is set to true.

3. Optionally:

   To override the default compilation scope, which is the entire project, add the files property and type the names of the files to process in the following format:

   "files" : ["<file1.ts>","<file2.ts>"],

You may need to apply different TypeScript configurations to different files in your project.

It is not a problem if you arrange your sources so that all the files in each folder should be processed according to the same configuration. In such case you only have to create a separate tsconfig.json for each folder.

However, if you want to apply different rules to the files that are stored in the same folder, you need to create several configuration files and configure scopes for them.

1. Create as many tsconfig*.json configuration files as you need.

2. Open the Settings/Preferences dialog (Ctrl+Alt+S) , go to , and make sure the names of all these files match the patterns from the Typescript config file name pattern list.

   If necessary, add patterns as described in Add file type associations.

3. In each *tsconfig*.json, specify the files to be processed according to its settings:

   • List the file names explicitly in the files field:

     "files" : ["<file1.ts>","<file2.ts>"],

     Learn more from TSConfig Reference: Files.

   • In the include field, specify the file names or patterns:

     "include" : ["<pattern1>, <pattern2>"]

     Learn more from TSConfig Reference: Include.

   • To skip some files whose names match the patterns listed in the include field, list their names or patterns in the exclude field:

     "exclude" : ["<pattern3>, <pattern4>"]

     Learn more from TSConfig Reference: Exclude.

JetBrains Rider doesn't use just the nearest tsconfig.*.json (from the list of files recognized as Typescript config file type). JetBrains Rider uses the nearest tsconfig.*.json in which a particular file is somehow specified – either explicitly in the files field or through patterns in the include and exclude fields.

You can invoke compilation manually or have JetBrains Rider compile your code automatically every time the code is changed.

Alternatively, you can configure a build process, for example, with webpack, babel, or another tool. Learn more from webpack with TypeScript and Babel with TypeScript.

1. Click the Language Services widget on the Status bar.

   If no other language services are running against the current file, the title of the widget changes to TypeScriptt.

   The TypeScript widget is shown on the Status bar all the time after you have opened a TypeScript file in the editor.

2. Click .

   In the Compile TypeScript popup, select one of the following options:

   • To compile the TypeScript code of the entire application, select Compile All.

     Alternatively, select Compile TypeScript from the context menu of any open TypeScript file.

     You can also press Ctrl+Shift+A and choose Compile TypeScript from the list.

   • To compile one file, select the path to it in the Compile TypeScript popup.

   • To compile files from a custom scope, make sure they are listed in the files property of your tsconfig.json as described above.

     In the Compile TypeScript popup, select the path to tsconfig.json.

• Open the Languages & Frameworks | TypeScript settings page  Ctrl+Alt+S and select the Recompile on changes checkbox.

Because browsers process only JavaScript, you have to compile your client-side TypeScript code before running it.

1. Compile the TypeScript code into JavaScript.

2. In the editor, open the HTML file with a reference to the generated JavaScript file. This HTML file does not necessarily have to be the one that implements the starting page of the application.

3. Do one of the following:

Because browsers process only JavaScript, you have to compile your client-side TypeScript code before debugging it.

During compilation, there can also be generated source maps that set correspondence between your TypeScript code and the JavaScript code that is actually executed. As a result, you can set breakpoints in your TypeScript code, launch the application, and then step through your original TypeScript code, thanks to generated sourcemaps.

If your application is running on the built-in JetBrains Rider server, refer to Running a client-side TypeScript application above, you can also debug it in the same way as JavaScript running on the built-in server.

Most often, you may want to debug a client-side application running on an external development web server, for example, powered by Node.js.

1. Configure the built-in debugger as described in Configuring JavaScript debugger.

2. To enable source maps generation, open your tsconfig.json and set the sourceMap property to true, as described in Create a tsconfig.json file.

3. Configure and set breakpoints in the TypeScript code.

4. Run the application in the development mode. Often you need to run npm start for that.

   Most often, at this stage TypeScript is compiled into JavaScript and source maps are generated. For more information, refer to Compile TypeScript into JavaScript.

   When the development server is ready, copy the URL address at which the application is running in the browser - you will need to specify this URL address in the run/debug configuration.

5. Go to . Alternatively, select Edit Configurations from the Run widget on the toolbar.

   In the Edit Configurations dialog that opens, click the Add button () on the toolbar and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL can be copied from the address bar of your browser as described in Step 3 above.

6. From the Run widget list on the toolbar, select the newly created configuration and click next to it. The URL address specified in the run configuration opens in the browser and the Debug tool window appears.

   You may need to refresh the page in the browser to get the controls in the Debug tool window available.

7. In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

09 April 2025

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4