From c19f9cd03b93bcbc2d07e344f2b7b39f9d25fd21 Mon Sep 17 00:00:00 2001 From: AshokkumarKaruppasamy Date: Thu, 20 Nov 2025 10:09:41 +0530 Subject: [PATCH 1/4] 211976: Ruby Language Debug Steps Added. --- code-studio/troubleshoot/ruby-debug-steps.md | 276 +++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 code-studio/troubleshoot/ruby-debug-steps.md diff --git a/code-studio/troubleshoot/ruby-debug-steps.md b/code-studio/troubleshoot/ruby-debug-steps.md new file mode 100644 index 0000000..3b13835 --- /dev/null +++ b/code-studio/troubleshoot/ruby-debug-steps.md @@ -0,0 +1,276 @@ +# Ruby Development and Debugging Setup Guide for Code stduio + +This comprehensive guide will help you set up Ruby development and debugging in Code Stduio on Windows. + +## Prerequisites + +### 1. Install Ruby +- Download Ruby from [rubyinstaller.org](https://rubyinstaller.org/) +- Choose Ruby+Devkit version (recommended: Ruby 3.1 or higher) +- During installation, make sure to check "Add Ruby executables to your PATH" +- Install MSYS2 development toolchain when prompted + +### 2. Verify Ruby Installation +Open PowerShell and run: +```powershell +ruby --version +gem --version +``` + +## VS Code Extensions Setup + +### Required Extensions + +1. **Shopify Ruby LSP** (Recommended) + - Extension ID: `Shopify.ruby-lsp` + - Provides modern Ruby language support with debugging + +2. **Ruby Debug** (Alternative) + - Extension ID: `castwide.ruby-debug` + - Traditional Ruby debugger + +### Installation Steps + +1. Open VS Code +2. Go to Extensions (Ctrl+Shift+X) +3. Search for "Ruby LSP" and install the Shopify Ruby LSP extension +4. Restart VS Code + +## Required Ruby Gems + +Install the necessary debugging gems: + +```powershell +# For Ruby LSP debugging +gem install debug + +# For traditional ruby-debug (if using castwide.ruby-debug) +gem install ruby-debug-ide debase +``` + +## VS Code Configuration + +### 1. Create Launch Configuration + +Create `.vscode/launch.json` in your project folder: + +```json +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Debug Current Ruby File", + "type": "ruby", + "request": "launch", + "program": "${file}", + "cwd": "${workspaceFolder}", + "args": [] + }, + { + "name": "Debug hello_world.rb", + "type": "ruby", + "request": "launch", + "program": "${workspaceFolder}/hello_world.rb", + "cwd": "${workspaceFolder}", + "args": [] + } + ] +} +``` + +### 2. Workspace Settings (Optional) + +Create `.vscode/settings.json`: + +```json +{ + "ruby.format": "rubocop", + "ruby.lint": { + "rubocop": true + }, + "ruby.useLanguageServer": true +} +``` + +## Debugging Your Ruby Code + +### Method 1: Using Breakpoints (Recommended) + +1. Open your Ruby file in VS Code +2. Click on the line number where you want to set a breakpoint (red dot appears) +3. Press `F5` or go to Run and Debug panel +4. Select your debug configuration +5. Your code will pause at the breakpoint + +### Method 2: Using debugger Statement + +Add `debugger` statements in your code: + +```ruby +require 'debug' + +def calculate(x, y) + debugger # Execution will pause here + result = x + y + result +end + +puts calculate(5, 3) +``` + +### Method 3: Command Line Debugging + +For troubleshooting, you can debug from terminal: + +```powershell +# Using built-in debug library +ruby -r debug your_file.rb + +# Using traditional debugger (if installed) +rdebug your_file.rb +``` + +## Common Issues and Solutions + +### Issue 1: "debug gem version less than 1.8.0" + +**Solution:** +```powershell +gem update debug +gem install debug --version "~> 1.8" +``` + +### Issue 2: "rdbg command not found" + +**Solution:** +```powershell +# Uninstall problematic rdbg extension +# Install Shopify Ruby LSP instead +gem install debug +``` + +### Issue 3: "Native extension build failed" + +**Solution:** +1. Install Ruby+Devkit version +2. Install MSYS2 development tools +3. Or use pre-compiled gems: +```powershell +gem install debug --platform ruby +``` + +### Issue 4: Breakpoints not working + +**Solutions:** +- Ensure you're using the correct debug configuration type +- Check that the Ruby file is saved +- Verify the Ruby extension is active (check status bar) +- Try adding `require 'debug'` at the top of your file + +## Testing Your Setup + +### 1. Create a Test File + +Create `debug_test.rb`: + +```ruby +require 'debug' + +puts "Starting debug test..." + +# Variables to inspect +x = 10 +y = 20 + +# This line should trigger breakpoint when debugging +result = x + y # Set breakpoint here + +puts "Result: #{result}" + +# Test with methods +def greet(name) + message = "Hello, #{name}!" # Set another breakpoint here + puts message +end + +greet("Ruby Developer") + +puts "Debug test completed!" +``` + +### 2. Debug the Test File + +1. Open `debug_test.rb` in VS Code +2. Set breakpoints on lines with `result = x + y` and `message = "Hello, #{name}!"` +3. Press `F5` to start debugging +4. Use the debug panel to: + - Step over (`F10`) + - Step into (`F11`) + - Continue (`F5`) + - Inspect variables in the Variables panel + +## Debug Panel Features + +When debugging, you'll see: + +- **Variables**: Current variable values +- **Watch**: Custom expressions to monitor +- **Call Stack**: Function call hierarchy +- **Breakpoints**: Manage all breakpoints + +### Debug Controls + +- **Continue (F5)**: Resume execution +- **Step Over (F10)**: Execute current line +- **Step Into (F11)**: Enter function calls +- **Step Out (Shift+F11)**: Exit current function +- **Restart (Ctrl+Shift+F5)**: Restart debugging +- **Stop (Shift+F5)**: Stop debugging + +## Best Practices + +1. **Use meaningful variable names** for easier debugging +2. **Set breakpoints at key decision points** in your code +3. **Use the watch panel** to monitor specific expressions +4. **Step through code methodically** rather than just continuing +5. **Remove debugger statements** before committing code + +## Troubleshooting Checklist + +- [ ] Ruby is installed and in PATH +- [ ] Required gems are installed (`debug`, `ruby-debug-ide`, `debase`) +- [ ] VS Code Ruby extension is installed and enabled +- [ ] Launch configuration is properly set up +- [ ] File is saved before debugging +- [ ] Breakpoints are set on executable lines (not comments/blank lines) + +## Additional Resources + +- [Ruby LSP Documentation](https://shopify.github.io/ruby-lsp/) +- [VS Code Ruby Debugging Guide](https://code.visualstudio.com/docs/languages/ruby) +- [Ruby Debug Gem Documentation](https://github.com/ruby/debug) + +## Example Project Structure + +``` +your-ruby-project/ +├── .vscode/ +│ ├── launch.json +├── lib/ +│ └── your_classes.rb +├── test/ +├── hello_world.rb +└── debug_test.rb +``` + +--- + +## Quick Start Checklist + +1. ✅ Install Ruby+Devkit +2. ✅ Install Code stdui Shopify Ruby LSP extension +3. ✅ Run `gem install debug` +4. ✅ Create `.vscode/launch.json` with proper configuration +5. ✅ Set breakpoints in your Ruby file +6. ✅ Press F5 to start debugging +7. ✅ Use debug controls to step through code \ No newline at end of file From 5106a4a80f9c264651bb8a03a8483b4f7be6ccc5 Mon Sep 17 00:00:00 2001 From: AshokkumarKaruppasamy Date: Fri, 21 Nov 2025 17:10:36 +0530 Subject: [PATCH 2/4] 211976: comprehensive debugging and development setup guides for multiple programming languages to enhance Code Studio's developer experience. --- .../Languages/javascript-debug-steps.md | 111 +++++++ code-studio/Languages/ruby-debug-steps.md | 178 ++++++++++ code-studio/Languages/swift-debug-steps.md | 192 +++++++++++ .../Languages/typescript-debug-steps.md | 305 ++++++++++++++++++ code-studio/troubleshoot/ruby-debug-steps.md | 276 ---------------- 5 files changed, 786 insertions(+), 276 deletions(-) create mode 100644 code-studio/Languages/javascript-debug-steps.md create mode 100644 code-studio/Languages/ruby-debug-steps.md create mode 100644 code-studio/Languages/swift-debug-steps.md create mode 100644 code-studio/Languages/typescript-debug-steps.md delete mode 100644 code-studio/troubleshoot/ruby-debug-steps.md diff --git a/code-studio/Languages/javascript-debug-steps.md b/code-studio/Languages/javascript-debug-steps.md new file mode 100644 index 0000000..fdd27c2 --- /dev/null +++ b/code-studio/Languages/javascript-debug-steps.md @@ -0,0 +1,111 @@ +--- +title: "Syncfusion Code Studio Languages" +description: "Professional guide for JavaScript development and debugging setup in Code Studio" +classification: "User Guide - Troubleshoot" +platform: syncfusion-code-studio +keywords: JavaScript, debugging, development, troubleshoot, code-studio, syncfusion +--- + +# JavaScript Development and Debugging Setup Guide for Code Studio + +This comprehensive guide will help you set up JavaScript development and debugging in Code Studio. + +## Code Studio Extensions Setup + +### Required Extensions + +To enable JavaScript development and debugging in Code Studio, you need to install the following extensions: + +#### 1. Live Server Extension +- **Purpose**: Launches a local development server with live reload feature for static and dynamic pages +- **Installation**: Search for "[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)" in the Extensions view (Ctrl+Shift+X) + +### Installation Steps + +1. Open Code Studio +2. Navigate to Extensions view (Ctrl+Shift+X) +3. Search for and install the 'Live Server' extension +4. Restart Code Studio to activate the extension + +## Working with JavaScript Projects + +### Opening JavaScript Projects + +#### 1. Open a JavaScript Project +Use one of the following methods to open your JavaScript project: +- **File Menu**: Go to `File > Open Folder` and select your project directory +- **Command Palette**: Press `Ctrl+Shift+P`, type "Open Folder", and select your project directory + +### Running JavaScript Projects + +#### Using Live Server (for Browser-based JavaScript) +1. **Install Live Server Extension** (if not already installed) +2. **Right-click on your `index.html` file** +3. **Select "Open with Live Server"** +4. Your browser will open automatically with your application + +#### Using Code Studio Run Features +1. **Run JavaScript File**: + - Open your JavaScript file (`.js`) + - Press `Ctrl+F5` to run without debugging + - Or use the Run button in the top-right corner + +### Debugging JavaScript Projects + +#### Setting Up Debug Configuration + +##### For Browser-based JavaScript Applications +1. **Create Launch Configuration**: + - Open Run and Debug view (`Ctrl+Shift+D`) + - Click the "create a launch.json file" link + - Select "Web App (Chrome)" or "Web App (Edge)" + - Automatically configure the current file path + - Select the configuration and run + +#### Quick Debug +1. **Debug JavaScript File**: + - Open your JavaScript file (`.js`) + - Press `F5` to run with debugging + - For browser-based files, ensure your local server is running + +#### Debugging Features + +Once debugging is active, you can use the following features: +- **Set Breakpoints**: Click in the gutter next to line numbers or press `F9` +- **Step Through Code**: + - `F10` - Step Over + - `F11` - Step Into + - `Shift+F11` - Step Out + - `F5` - Continue +- **Inspect Variables**: Hover over variables or use the Variables panel +- **Watch Expressions**: Add expressions to the Watch panel +- **Debug Console**: Evaluate JavaScript expressions during debugging +- **Call Stack**: View the current execution stack + +## Troubleshooting + +### Common Issues and Solutions + +#### 1. Debug Session Won't Start +**Problem**: Clicking F5 or "Run and Debug" doesn't start debugging session + +**Solutions**: +- **For Browser-based Apps**: + - Ensure your local server is running + - Check if the URL in `launch.json` matches your server URL + - Verify your HTML file path is correct +- **General**: + - Restart Code Studio + - Check the Debug Console for error messages + +#### 2. Breakpoints Not Working +**Problem**: Breakpoints are set but debugger doesn't stop at them + +**Solutions**: +- **Browser-based JavaScript**: + - Enable source maps in browser developer tools + - Ensure you're debugging (F5) not just running (Ctrl+F5) + - Check that breakpoints are set on executable lines (not comments or empty lines) + - Clear browser cache and restart debugging session +- **General**: + - Reload the window: Press `Ctrl+Shift+P` and type "Developer: Reload Window" \ No newline at end of file diff --git a/code-studio/Languages/ruby-debug-steps.md b/code-studio/Languages/ruby-debug-steps.md new file mode 100644 index 0000000..cb1f86a --- /dev/null +++ b/code-studio/Languages/ruby-debug-steps.md @@ -0,0 +1,178 @@ +--- +title: "Syncfusion Code Studio Languages" +description: "Professional guide for Ruby development and debugging setup in Code Studio" +classification: "User Guide - Troubleshoot" +platform: syncfusion-code-studio +keywords: Ruby, debugging, development, troubleshoot, code-studio, syncfusion +--- + +# Ruby Development and Debugging Setup Guide for Code Studio + +This comprehensive guide will help you set up Ruby development and debugging in Code Studio. + +## Prerequisites + +Before setting up Ruby development in Code Studio, ensure you have the following prerequisites: + +### 1. Install Ruby +1. Download Ruby from [rubyinstaller.org](https://rubyinstaller.org/downloads/) +2. Choose **Ruby+Devkit version** (recommended: Ruby 3.1 or higher) +3. During installation: + - Check "Add Ruby executables to your PATH" + - Accept the default installation directory + +### 2. Verify Ruby Installation +Open PowerShell as Administrator and run the following commands: +```powershell +ruby --version +gem --version +``` + +If any command fails or shows an error, restart your terminal or computer and try again. + +### 3. Update RubyGems (Optional but Recommended) +Open PowerShell as Administrator and execute the following commands: +```powershell +# Update RubyGems system +gem update --system + +# Install Rails framework (optional, if needed for your projects) +gem install rails +``` + +## Code Studio Extensions Setup + +### Required Extensions + +To enable Ruby development and debugging in Code Studio, you need to install the following extensions: + +#### 1. Ruby LSP +- **Purpose**: Provides language server protocol support for Ruby, including syntax highlighting, code completion, and IntelliSense +- **Installation**: Search for "[Ruby LSP Extension Documentation](https://marketplace.visualstudio.com/items?itemName=Shopify.ruby-lsp)" in the Extensions view (Ctrl+Shift+X) + +#### 2. VSCode rdbg Ruby Debugger +- **Purpose**: Enables debugging capabilities for Ruby applications with breakpoints, variable inspection, and step-through debugging +- **Installation**: Search for "[VSCode rdbg Ruby Debugger Documentation](https://marketplace.visualstudio.com/items?itemName=KoichiSasada.vscode-rdbg)" in the Extensions view (Ctrl+Shift+X) + +### Installation Steps + +1. Open Code Studio +2. Navigate to Extensions view (Ctrl+Shift+X) +3. Search for and install both "Ruby LSP" and "VSCode rdbg Ruby Debugger" extensions +4. Restart Code Studio to activate the extensions + +## Required Ruby Gems + +Install the necessary debugging gem: + +```powershell +# For Ruby debugging support +gem install debug +``` + +## Working with Ruby Projects + +### Opening Ruby Development Projects + +Once you have completed the setup, you can start working with Ruby projects in Code Studio: + +#### 1. Open a Ruby Project +Use one of the following methods to open your Ruby project: +- **File Menu**: Go to `File > Open Folder` and select your Ruby project directory +- **Command Palette**: Press `Ctrl+Shift+P`, type "Open Folder", and select your project directory +- **Drag and Drop**: Drag your project folder directly into Code Studio + +### Running Ruby Projects + +#### Using Code Studio Run Features +1. **Run Ruby File Directly**: + - Open your Ruby file (`.rb`) + - Press `Ctrl+F5` to run without debugging + - Or right-click in the editor and select "Run Ruby" + +#### Using Terminal Execution +1. **Open Integrated Terminal**: + - Press `Ctrl+`` (backtick) to open the terminal + - Navigate to your file directory if needed + +2. **Run the Ruby File**: + ```powershell + # Run a single Ruby file + ruby filename.rb + ``` + +### Debugging Ruby Projects + +#### Quick Debug +1. **Debug Ruby File Directly**: + - Open your Ruby file (`.rb`) + - Press `F5` to run with debugging + - Or right-click in the editor and select "Debug Ruby" + +#### Using Debug Panel +1. **Set Up Debug Configuration**: + - Open Run and Debug view (`Ctrl+Shift+D`) + - Click "Run and Debug" button + - Click the "create a launch.json file" link + - Select "Ruby rdbg" from the dropdown menu + - Choose "Debug current file with rdbg" option + +2. **Launch Debug Session**: + - Code Studio will execute your Ruby file with debugging capabilities + - The debug toolbar will appear at the top of the editor + +#### Debugging Features + +Once debugging is active, you can use the following features: +- **Set Breakpoints**: Click in the gutter next to line numbers or press `F9` +- **Step Through Code**: + - `F10` - Step Over + - `F11` - Step Into + - `Shift+F11` - Step Out + - `F5` - Continue +- **Inspect Variables**: Hover over variables or use the Variables panel +- **Watch Expressions**: Add expressions to the Watch panel +- **Debug Console**: Evaluate Ruby expressions during debugging + +## Troubleshooting + +### Common Issues and Solutions + +#### 1. Ruby Not Recognized in Terminal +**Problem**: When running `ruby --version`, you get "'ruby' is not recognized as an internal or external command" + +**Solutions**: +- Restart Code Studio and your computer after Ruby installation +- Verify Ruby is installed and added to PATH: + ```powershell + # Check if Ruby is in PATH + echo $env:PATH + + # Manually add Ruby to PATH if needed (adjust path as needed) + $env:PATH += ";C:\Ruby32-x64\bin" + ``` +- Reinstall Ruby with "Add Ruby executables to your PATH" option checked + +#### 2. Debug Session Won't Start +**Problem**: Clicking F5 or "Run and Debug" doesn't start debugging session + +**Solutions**: +- Install the `debug` gem: `gem install debug` +- Verify Code Studio rdbg Ruby Debugger extension is installed and enabled +- Check if `launch.json` configuration is correct +- Try creating a new `launch.json` file: + - Open Run and Debug view (`Ctrl+Shift+D`) + - Click "create a launch.json file" + - Select "Ruby rdbg" +- Restart Code Studio after installing extensions + +#### 3. Breakpoints Not Working +**Problem**: Breakpoints are set but debugger doesn't stop at them + +**Solutions**: +- Ensure you're running with debugging (`F5`) not just running (`Ctrl+F5`) +- Verify the `debug` gem is installed: `gem list debug` +- Check that breakpoints are set on executable lines (not comments or empty lines) +- Make sure your Ruby file is saved before debugging +- Reload the window: Press `Ctrl+Shift+P` and type "Developer: Reload Window" +- For advanced debugging techniques, refer to this [Ruby trace inspector guide](https://dev.to/ono-max/intro-to-trace-inspector-that-displays-ruby-trace-logs-with-pretty-ui-3pi7) \ No newline at end of file diff --git a/code-studio/Languages/swift-debug-steps.md b/code-studio/Languages/swift-debug-steps.md new file mode 100644 index 0000000..cf80bd8 --- /dev/null +++ b/code-studio/Languages/swift-debug-steps.md @@ -0,0 +1,192 @@ +--- +title: "Syncfusion Code Studio Languages" +description: "Professional guide for Swift development and debugging setup in Code Studio" +classification: "User Guide - Troubleshoot" +platform: syncfusion-code-studio +keywords: Swift, debugging, development, troubleshoot, code-studio, syncfusion +--- + +# Swift Development and Debugging Setup Guide for Code Studio (macOS) + +This comprehensive guide will help you set up Swift development and debugging in Code Studio on macOS. + +## Prerequisites + +Before setting up Swift development in Code Studio, ensure you have the following prerequisites: + +### 1. Install Xcode Command Line Tools +Open Terminal and run the following command: +```bash +xcode-select --install +``` + +If Xcode Command Line Tools are already installed, you'll see a message indicating they're already installed. + +### 2. Install Xcode (Recommended) +1. Download Xcode from the [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835) +2. Launch Xcode and accept the license agreement +3. Let Xcode install any additional components it requires + +### 3. Verify Swift Installation +Open Terminal and run the following commands: +```bash +swift --version +``` + +If the command fails, ensure Xcode Command Line Tools are properly installed. + +### 4. Install Swift Package Manager (Built-in) +Swift Package Manager comes bundled with Swift. Verify it's working: +```bash +swift package --version +``` + +## Code Studio Extensions Setup + +### Required Extensions + +To enable Swift development and debugging in Code Studio, you need to install the following extensions: + +#### 1. Swift Extension +- **Purpose**: Provides language server protocol support for Swift, including syntax highlighting, code completion, and IntelliSense +- **Installation**: Search for "[Swift Extension Documentation](https://marketplace.visualstudio.com/items?itemName=sswg.swift-lang)" in the Extensions view (Cmd+Shift+X) + +#### 2. CodeLLDB Debugger +- **Purpose**: Enables debugging capabilities for Swift applications with breakpoints, variable inspection, and step-through debugging +- **Installation**: Search for "[CodeLLDB Documentation](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb)" in the Extensions view (Cmd+Shift+X) + +### Installation Steps + +1. Open Code Studio +2. Navigate to Extensions view (Cmd+Shift+X) +3. Search for and install both "Swift" and "CodeLLDB" extensions +4. Restart Code Studio to activate the extensions + +## Working with Swift Projects + +### Opening Swift Development Projects + +Once you have completed the setup, you can start working with Swift projects in Code Studio: + +#### 1. Open a Swift Project +Use one of the following methods to open your Swift project: +- **File Menu**: Go to `File > Open Folder` and select your Swift project directory +- **Command Palette**: Press `Cmd+Shift+P`, type "Open Folder", and select your project directory + +### Running Swift Projects + +#### Using Terminal Execution +1. **Open Integrated Terminal**: + - Press `Ctrl+`` (backtick) to open the terminal + - Navigate to your file directory if needed + +2. **Run Swift Code**: + ```bash + # Build and run a Swift package + swift run + + # Build a Swift package + swift build + ``` + +#### Using Code Studio Run Features +1. **Run Swift File Directly**: + - Open your Swift file (`.swift`) + - Press `Cmd+F5` to run without debugging + - Or use the Run button in the top-right corner + +### Debugging Swift Projects + +#### Setting Up Debug Configuration + +1. **Create Launch Configuration**: + - Open Run and Debug view (`Cmd+Shift+D`) + - Click the "create a launch.json file" link + - Select "LLDB" from the dropdown menu + - Click the "Run and Debug" button + +#### Quick Debug +1. **Debug Swift File**: + - Open your Swift file (`.swift`) + - Press `F5` to run with debugging + - For single files, you might need to compile first: + ```bash + swiftc -g filename.swift -o main + ``` + +#### Debugging Features + +Once debugging is active, you can use the following features: +- **Set Breakpoints**: Click in the gutter next to line numbers or press `F9` +- **Step Through Code**: + - `F10` - Step Over + - `F11` - Step Into + - `Shift+F11` - Step Out + - `F5` - Continue +- **Inspect Variables**: Hover over variables or use the Variables panel +- **Watch Expressions**: Add expressions to the Watch panel +- **Debug Console**: Evaluate Swift expressions during debugging using LLDB commands + +## Troubleshooting + +### Common Issues and Solutions + +#### 1. Swift Not Recognized in Terminal +**Problem**: When running `swift --version`, you get "command not found: swift" + +**Solutions**: +- Install Xcode Command Line Tools: `xcode-select --install` +- Verify Xcode Command Line Tools path: + ```bash + xcode-select -p + ``` +- Reset Xcode Command Line Tools path if needed: + ```bash + sudo xcode-select --reset + ``` +- Add Swift to PATH manually (if needed): + ```bash + echo 'export PATH="/usr/bin:$PATH"' >> ~/.zshrc + source ~/.zshrc + ``` + +#### 2. Debug Session Won't Start +**Problem**: Clicking F5 or "Run and Debug" doesn't start debugging session + +**Solutions**: +- Ensure CodeLLDB extension is installed and enabled +- Build your Swift project first: `swift build` +- Check if your program path in `launch.json` is correct +- For single Swift files, compile with debug symbols: + ```bash + swiftc -g filename.swift -o main + ``` +- Update the `program` path in `launch.json` to point to your compiled binary +- Restart Code Studio after installing extensions + +#### 3. Breakpoints Not Working +**Problem**: Breakpoints are set but debugger doesn't stop at them + +**Solutions**: +- Ensure you're compiling with debug symbols (`-g` flag) +- Make sure you're running with debugging (`F5`) not just running (`Cmd+F5`) +- Check that breakpoints are set on executable lines (not comments or empty lines) +- Verify your Swift file is saved before debugging +- For Swift packages, ensure debug build: `swift build -c debug` +- Reload the window: Press `Cmd+Shift+P` and type "Developer: Reload Window" + +#### 4. Swift Package Build Errors +**Problem**: Swift package won't build or run + +**Solutions**: +- Check `Package.swift` file syntax +- Ensure all dependencies are properly declared +- Clean and rebuild: + ```bash + swift package clean + swift build + ``` +- Update Swift Package Manager: + ```bash + swift package update + ``` \ No newline at end of file diff --git a/code-studio/Languages/typescript-debug-steps.md b/code-studio/Languages/typescript-debug-steps.md new file mode 100644 index 0000000..30b67cb --- /dev/null +++ b/code-studio/Languages/typescript-debug-steps.md @@ -0,0 +1,305 @@ +--- +title: "Syncfusion Code Studio Languages" +description: "Professional guide for TypeScript development and debugging setup in Code Studio" +classification: "User Guide - Troubleshoot" +platform: syncfusion-code-studio +keywords: TypeScript, debugging, development, troubleshoot, code-studio, syncfusion +--- + +# TypeScript Development and Debugging Setup Guide for Code Studio + +This comprehensive guide will help you set up TypeScript development and debugging in Code Studio. + +## Prerequisites + +Before setting up TypeScript development in Code Studio, ensure you have the following prerequisites: + +### 1. Install Node.js and npm +1. Download Node.js from [nodejs.org](https://nodejs.org/downloads/) +2. Choose **LTS version** (recommended: Node.js 18 or higher) +3. During installation: + - Accept the default installation directory + - Check "Automatically install the necessary tools" if prompted + +### 2. Verify Node.js and npm Installation +Open PowerShell as Administrator and run the following commands: +```powershell +node --version +npm --version +``` + +If any command fails or shows an error, restart your terminal or computer and try again. + +### 3. Install TypeScript Globally (Optional but Recommended) +Open PowerShell as Administrator and execute the following command: +```powershell +# Install TypeScript compiler globally +npm install -g typescript + +# Install ts-node for direct TypeScript execution (optional) +npm install -g ts-node +``` + +## Code Studio Extensions Setup + +### Required Extensions + +To enable TypeScript development and debugging in Code Studio, install the following extensions: + +#### 1. TypeScript Importer +- **Purpose**: Provides automatic TypeScript import suggestions and auto-import functionality +- **Installation**: Search for "[TypeScript Importer](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter)" in the Extensions view (Ctrl+Shift+X) + +#### 2. JavaScript Debugger (Built-in) +- **Purpose**: Enables debugging capabilities for TypeScript/JavaScript applications with breakpoints, variable inspection, and step-through debugging +- **Note**: This is typically built into Code Studio, but ensure it's enabled + +### Installation Steps + +1. Open Code Studio +2. Navigate to Extensions view (Ctrl+Shift+X) +3. Search for and install the "TypeScript Importer" extension +4. Restart Code Studio to activate the extensions + +## Required Node.js Packages + +For TypeScript development, install the following packages in your project: + +```powershell +# Navigate to your project directory +cd your-project-directory + +# Initialize npm project if not already done +npm init -y + +# Install TypeScript as development dependency +npm install --save-dev typescript @types/node + +# Install ts-node for direct execution (optional) +npm install --save-dev ts-node + +# Create TypeScript configuration file +npx tsc --init +``` + +## Working with TypeScript Projects + +### Opening TypeScript Development Projects + +Once you have completed the setup, you can start working with TypeScript projects in Code Studio: + +#### 1. Open a TypeScript Project +Use one of the following methods to open your TypeScript project: +- **File Menu**: Go to `File > Open Folder` and select your TypeScript project directory +- **Command Palette**: Press `Ctrl+Shift+P`, type "Open Folder", and select your project directory +- **Drag and Drop**: Drag your project folder directly into Code Studio + +### Running TypeScript Projects + +#### Using Code Studio Run Features +1. **Compile and Run TypeScript File**: + - Open your TypeScript file (`.ts`) + - Press `Ctrl+F5` to run without debugging + - Alternatively, right-click in the editor and select "Run Code" + +#### Using Terminal Execution +1. **Open Integrated Terminal**: + - Press `Ctrl+`` (backtick) to open the terminal + - Navigate to your project directory if needed + +2. **Compile and Run the TypeScript File**: + ```powershell + # Method 1: Compile then run + tsc filename.ts + node filename.js + + # Method 2: Direct execution with ts-node (if installed) + ts-node filename.ts + + # Method 3: Using npm scripts (if configured in package.json) + npm run build + npm start + ``` + +### Debugging TypeScript Projects + +#### Quick Debug +1. **Debug TypeScript File Directly**: + - Open your TypeScript file (`.ts`) + - Press `F5` to run with debugging + - Alternatively, right-click in the editor and select "Debug TypeScript File" + +#### Using Debug Panel +1. **Set Up Debug Configuration**: + - Open Run and Debug view (`Ctrl+Shift+D`) + - Click the "Run and Debug" button + - Click the "create a launch.json file" link + - Select "Node.js" from the dropdown menu + - Choose the "Launch Program" option + +2. **Configure for TypeScript**: + - Update the `launch.json` configuration for Chrome debugging with source map support: + ```json + { + "version": "0.2.0", + "configurations": [ + { + "name": "Debug TypeScript App", + "type": "chrome", + "request": "launch", + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}", + "sourceMaps": true, + "sourceMapPathOverrides": { + "webpack:///./src/*": "${webRoot}/src/*", + "webpack://ej2-quickstart/./src/*": "${webRoot}/src/*", + "webpack:///src/*": "${webRoot}/src/*", + "webpack:///*": "*" + }, + "skipFiles": [ + "${workspaceFolder}/node_modules/**/*.js", + "/**/*.js" + ] + } + ] + } + ``` + +3. **Launch Debug Session**: + - Code Studio will execute your TypeScript file with debugging capabilities + - The debug toolbar will appear at the top of the editor + +#### Debugging Features + +Once debugging is active, you can use the following features: +- **Set Breakpoints**: Click in the gutter next to line numbers or press `F9` +- **Step Through Code**: + - `F10` - Step Over + - `F11` - Step Into + - `Shift+F11` - Step Out + - `F5` - Continue +- **Inspect Variables**: Hover over variables or use the Variables panel +- **Watch Expressions**: Add expressions to the Watch panel +- **Debug Console**: Evaluate TypeScript/JavaScript expressions during debugging +- **Call Stack**: View the current execution stack + +## Troubleshooting + +### Common Issues and Solutions + +#### 1. TypeScript Not Recognized in Terminal +**Problem**: When running `tsc --version`, you get "'tsc' is not recognized as an internal or external command" + +**Solutions**: +- Restart Code Studio and your computer after Node.js installation +- Install TypeScript globally: `npm install -g typescript` +- Use npx to run the TypeScript compiler: `npx tsc --version` +- Verify Node.js and npm are installed and in PATH: + ```powershell + # Check if Node.js is in PATH + echo $env:PATH + + # Check npm global packages location + npm config get prefix + ``` +- Add npm global packages to PATH if needed + +#### 2. Debug Session Won't Start +**Problem**: Clicking F5 or "Run and Debug" doesn't start debugging session + +**Solutions**: +- Install the required packages: `npm install --save-dev ts-node @types/node` +- Verify that Code Studio's JavaScript debugger is enabled +- Check that the `launch.json` configuration is correct +- Ensure that `tsconfig.json` exists in your project root +- Try creating a new `launch.json` file: + - Open Run and Debug view (`Ctrl+Shift+D`) + - Click "create a launch.json file" + - Select "Node.js" +- Restart Code Studio after installing packages + +#### 3. Breakpoints Not Working +**Problem**: Breakpoints are set but debugger doesn't stop at them + +**Solutions**: +- Ensure you're running with debugging (`F5`) and not just running (`Ctrl+F5`) +- Verify that source maps are enabled in `tsconfig.json`: + ```json + { + "compilerOptions": { + "sourceMap": true, + "inlineSourceMap": false + } + } + ``` +- Verify breakpoints are set on executable lines (not comments, empty lines, or type definitions) +- Make sure your TypeScript file is saved before debugging +- Clear compiled JavaScript files and rebuild: `npx tsc --build --clean` +- Reload the window: Press `Ctrl+Shift+P` and type "Developer: Reload Window" + +#### 4. Module Import Errors +**Problem**: TypeScript shows import errors or cannot find modules + +**Solutions**: +- Install the required type definitions: `npm install --save-dev @types/node @types/module-name` +- Verify the `tsconfig.json` module resolution settings: + ```json + { + "compilerOptions": { + "moduleResolution": "node", + "esModuleInterop": true, + "allowSyntheticDefaultImports": true + } + } + ``` +- Verify package is installed: `npm list package-name` +- Use TypeScript Importer extension for auto-import suggestions + +#### 5. Webpack Configuration for TypeScript Development +**Problem**: Need to set up Webpack for TypeScript projects with proper debugging support + +**Solutions**: +- Install the required Webpack packages: + ```powershell + npm install --save-dev webpack webpack-cli webpack-dev-server ts-loader + ``` +- Create or update a `webpack.config.js` file in your project root with debugging-optimized settings: + ```javascript + module.exports = { + mode: 'development', + devtool: 'source-map', + entry: './src/app.ts', + output: { + filename: 'bundle.js', + path: __dirname + '/dist', + publicPath: '/dist/' + }, + resolve: { + extensions: ['.ts', '.js'] + }, + module: { + rules: [ + { + test: /\.ts$/, + use: 'ts-loader', + exclude: /node_modules/ + } + ] + }, + devServer: { + static: './', + port: 3000, + hot: true + } + }; + ``` +- Add npm scripts to your `package.json`: + ```json + { + "scripts": { + "build": "webpack", + "dev": "webpack serve --open", + "watch": "webpack --watch" + } + } + ``` \ No newline at end of file diff --git a/code-studio/troubleshoot/ruby-debug-steps.md b/code-studio/troubleshoot/ruby-debug-steps.md deleted file mode 100644 index 3b13835..0000000 --- a/code-studio/troubleshoot/ruby-debug-steps.md +++ /dev/null @@ -1,276 +0,0 @@ -# Ruby Development and Debugging Setup Guide for Code stduio - -This comprehensive guide will help you set up Ruby development and debugging in Code Stduio on Windows. - -## Prerequisites - -### 1. Install Ruby -- Download Ruby from [rubyinstaller.org](https://rubyinstaller.org/) -- Choose Ruby+Devkit version (recommended: Ruby 3.1 or higher) -- During installation, make sure to check "Add Ruby executables to your PATH" -- Install MSYS2 development toolchain when prompted - -### 2. Verify Ruby Installation -Open PowerShell and run: -```powershell -ruby --version -gem --version -``` - -## VS Code Extensions Setup - -### Required Extensions - -1. **Shopify Ruby LSP** (Recommended) - - Extension ID: `Shopify.ruby-lsp` - - Provides modern Ruby language support with debugging - -2. **Ruby Debug** (Alternative) - - Extension ID: `castwide.ruby-debug` - - Traditional Ruby debugger - -### Installation Steps - -1. Open VS Code -2. Go to Extensions (Ctrl+Shift+X) -3. Search for "Ruby LSP" and install the Shopify Ruby LSP extension -4. Restart VS Code - -## Required Ruby Gems - -Install the necessary debugging gems: - -```powershell -# For Ruby LSP debugging -gem install debug - -# For traditional ruby-debug (if using castwide.ruby-debug) -gem install ruby-debug-ide debase -``` - -## VS Code Configuration - -### 1. Create Launch Configuration - -Create `.vscode/launch.json` in your project folder: - -```json -{ - "version": "0.2.0", - "configurations": [ - { - "name": "Debug Current Ruby File", - "type": "ruby", - "request": "launch", - "program": "${file}", - "cwd": "${workspaceFolder}", - "args": [] - }, - { - "name": "Debug hello_world.rb", - "type": "ruby", - "request": "launch", - "program": "${workspaceFolder}/hello_world.rb", - "cwd": "${workspaceFolder}", - "args": [] - } - ] -} -``` - -### 2. Workspace Settings (Optional) - -Create `.vscode/settings.json`: - -```json -{ - "ruby.format": "rubocop", - "ruby.lint": { - "rubocop": true - }, - "ruby.useLanguageServer": true -} -``` - -## Debugging Your Ruby Code - -### Method 1: Using Breakpoints (Recommended) - -1. Open your Ruby file in VS Code -2. Click on the line number where you want to set a breakpoint (red dot appears) -3. Press `F5` or go to Run and Debug panel -4. Select your debug configuration -5. Your code will pause at the breakpoint - -### Method 2: Using debugger Statement - -Add `debugger` statements in your code: - -```ruby -require 'debug' - -def calculate(x, y) - debugger # Execution will pause here - result = x + y - result -end - -puts calculate(5, 3) -``` - -### Method 3: Command Line Debugging - -For troubleshooting, you can debug from terminal: - -```powershell -# Using built-in debug library -ruby -r debug your_file.rb - -# Using traditional debugger (if installed) -rdebug your_file.rb -``` - -## Common Issues and Solutions - -### Issue 1: "debug gem version less than 1.8.0" - -**Solution:** -```powershell -gem update debug -gem install debug --version "~> 1.8" -``` - -### Issue 2: "rdbg command not found" - -**Solution:** -```powershell -# Uninstall problematic rdbg extension -# Install Shopify Ruby LSP instead -gem install debug -``` - -### Issue 3: "Native extension build failed" - -**Solution:** -1. Install Ruby+Devkit version -2. Install MSYS2 development tools -3. Or use pre-compiled gems: -```powershell -gem install debug --platform ruby -``` - -### Issue 4: Breakpoints not working - -**Solutions:** -- Ensure you're using the correct debug configuration type -- Check that the Ruby file is saved -- Verify the Ruby extension is active (check status bar) -- Try adding `require 'debug'` at the top of your file - -## Testing Your Setup - -### 1. Create a Test File - -Create `debug_test.rb`: - -```ruby -require 'debug' - -puts "Starting debug test..." - -# Variables to inspect -x = 10 -y = 20 - -# This line should trigger breakpoint when debugging -result = x + y # Set breakpoint here - -puts "Result: #{result}" - -# Test with methods -def greet(name) - message = "Hello, #{name}!" # Set another breakpoint here - puts message -end - -greet("Ruby Developer") - -puts "Debug test completed!" -``` - -### 2. Debug the Test File - -1. Open `debug_test.rb` in VS Code -2. Set breakpoints on lines with `result = x + y` and `message = "Hello, #{name}!"` -3. Press `F5` to start debugging -4. Use the debug panel to: - - Step over (`F10`) - - Step into (`F11`) - - Continue (`F5`) - - Inspect variables in the Variables panel - -## Debug Panel Features - -When debugging, you'll see: - -- **Variables**: Current variable values -- **Watch**: Custom expressions to monitor -- **Call Stack**: Function call hierarchy -- **Breakpoints**: Manage all breakpoints - -### Debug Controls - -- **Continue (F5)**: Resume execution -- **Step Over (F10)**: Execute current line -- **Step Into (F11)**: Enter function calls -- **Step Out (Shift+F11)**: Exit current function -- **Restart (Ctrl+Shift+F5)**: Restart debugging -- **Stop (Shift+F5)**: Stop debugging - -## Best Practices - -1. **Use meaningful variable names** for easier debugging -2. **Set breakpoints at key decision points** in your code -3. **Use the watch panel** to monitor specific expressions -4. **Step through code methodically** rather than just continuing -5. **Remove debugger statements** before committing code - -## Troubleshooting Checklist - -- [ ] Ruby is installed and in PATH -- [ ] Required gems are installed (`debug`, `ruby-debug-ide`, `debase`) -- [ ] VS Code Ruby extension is installed and enabled -- [ ] Launch configuration is properly set up -- [ ] File is saved before debugging -- [ ] Breakpoints are set on executable lines (not comments/blank lines) - -## Additional Resources - -- [Ruby LSP Documentation](https://shopify.github.io/ruby-lsp/) -- [VS Code Ruby Debugging Guide](https://code.visualstudio.com/docs/languages/ruby) -- [Ruby Debug Gem Documentation](https://github.com/ruby/debug) - -## Example Project Structure - -``` -your-ruby-project/ -├── .vscode/ -│ ├── launch.json -├── lib/ -│ └── your_classes.rb -├── test/ -├── hello_world.rb -└── debug_test.rb -``` - ---- - -## Quick Start Checklist - -1. ✅ Install Ruby+Devkit -2. ✅ Install Code stdui Shopify Ruby LSP extension -3. ✅ Run `gem install debug` -4. ✅ Create `.vscode/launch.json` with proper configuration -5. ✅ Set breakpoints in your Ruby file -6. ✅ Press F5 to start debugging -7. ✅ Use debug controls to step through code \ No newline at end of file From 640fc46eee78d97f2b62d35228cb15523b678b4e Mon Sep 17 00:00:00 2001 From: AshokkumarKaruppasamy Date: Fri, 21 Nov 2025 17:15:38 +0530 Subject: [PATCH 3/4] 211976: comprehensive debugging and development setup guides for multiple programming languages to enhance Code Studio's developer experience. --- code-studio-toc.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/code-studio-toc.html b/code-studio-toc.html index e2f00ef..985a994 100644 --- a/code-studio-toc.html +++ b/code-studio-toc.html @@ -164,6 +164,22 @@
  • UI Builder
    • +
  • Languages + +
  • Configure the Syncfusion Code Studio
      From 51a6f249b8a3ff5472d4be59f0788d8e01234be2 Mon Sep 17 00:00:00 2001 From: AshokkumarKaruppasamy Date: Fri, 21 Nov 2025 17:17:35 +0530 Subject: [PATCH 4/4] 211976: comprehensive debugging and development setup guides for multiple programming languages to enhance Code Studio's developer experience. --- .../Languages/typescript-debug-steps.md | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/code-studio/Languages/typescript-debug-steps.md b/code-studio/Languages/typescript-debug-steps.md index 30b67cb..08e179e 100644 --- a/code-studio/Languages/typescript-debug-steps.md +++ b/code-studio/Languages/typescript-debug-steps.md @@ -40,27 +40,6 @@ npm install -g typescript npm install -g ts-node ``` -## Code Studio Extensions Setup - -### Required Extensions - -To enable TypeScript development and debugging in Code Studio, install the following extensions: - -#### 1. TypeScript Importer -- **Purpose**: Provides automatic TypeScript import suggestions and auto-import functionality -- **Installation**: Search for "[TypeScript Importer](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter)" in the Extensions view (Ctrl+Shift+X) - -#### 2. JavaScript Debugger (Built-in) -- **Purpose**: Enables debugging capabilities for TypeScript/JavaScript applications with breakpoints, variable inspection, and step-through debugging -- **Note**: This is typically built into Code Studio, but ensure it's enabled - -### Installation Steps - -1. Open Code Studio -2. Navigate to Extensions view (Ctrl+Shift+X) -3. Search for and install the "TypeScript Importer" extension -4. Restart Code Studio to activate the extensions - ## Required Node.js Packages For TypeScript development, install the following packages in your project: