diff --git a/code-studio-toc.html b/code-studio-toc.html index eb30b32..5524665 100644 --- a/code-studio-toc.html +++ b/code-studio-toc.html @@ -201,6 +201,13 @@
  • How to Resolve Failed to Parse Assistant error
    • +
  • Application Debugging Steps + +
    • diff --git a/code-studio/troubleshoot/debugging-steps/cross-platforms.md b/code-studio/troubleshoot/debugging-steps/cross-platforms.md new file mode 100644 index 0000000..2155715 --- /dev/null +++ b/code-studio/troubleshoot/debugging-steps/cross-platforms.md @@ -0,0 +1,99 @@ +--- +title: Run and Debug Flutter Application in Syncfusion Code Studio +description: Step-by-step guide to run and debug application in Flutter Platforms using Syncfusion Code Studio's debugging features and tools. +platform: syncfusion-code-studio +control: IDE +documentation: Troubleshoot +keywords: flutter, desktop, android, ios, mac, web, debug, debugging, breakpoints, step-through, variables, watch, call-stack, output, troubleshoot, code-studio +--- + +# This guide provides step-by-step instructions for debugging a Flutter application using Code Studio + +## Prerequisites + +**Install Flutter SDK:** + +- Windows: + + - Download the Flutter SDK from https://docs.flutter.dev/install/manual + + - Select Windows and Download the zip file. + + - Extract the zip file to a location like `C:flutter\src\` + + - Add Flutter to your PATH: + + - Search for "Environment Variables" in Windows search + + - Click "Environment Variables" + + - Under "User variables", find PATH and click "Edit" + + - Click "New" and add the full path to `flutter\bin` + + - Click "OK" to save + +- macOS: + + - Follow the instruction from https://docs.flutter.dev/get-started/install/macos + +- Linux: + - Follow the instruction from https://docs.flutter.dev/get-started/install/linux + + + +## Steps to Run and Debug a Flutter Application in Code Studio + +### Step 1: Create a Flutter Project +- Create a New Flutter Project: +Open a terminal (e.g., Command Prompt, PowerShell, or Code Studio’s integrated terminal). +`flutter create MyFlutterApp` + +- Navigate to the project folder: `cd MyFlutterApp` + +### Step 2: Running the Application +#### For Windows: + +- To deploy the Flutter application on Windows by running this command: `flutter run -d windows` + +#### For Android: + +- Check available emulators by running this command: `flutter emulators` + +- To open the emulator, run this command: `flutter emulators --launch pixel_7_-_api_35` + +- To deploy the Flutter application on Android by running this command: `flutter run` + +#### For Web: + +- To deploy the Flutter application on the Web by running this command: `flutter run` + +#### For macOS: + +- To deploy the Flutter application on macOS by running this command: `flutter run -d macos` + +#### For iOS: + +- Open the simulator on macOS. + +- To deploy the Flutter application on iOS by running this command: `flutter run` + +Run the commands in the Code Studio terminal. + + + +## Quick Commands Reference +```bash +# Essential Commands +flutter doctor # Check your setup +flutter devices # See available devices +flutter create my_app # Create new project +flutter run # Run your app +flutter build apk --release # Build Android APK +flutter build web --release # Build for web + + +# Troubleshooting +flutter clean # Clean build files +flutter pub get # Get dependencies +``` \ No newline at end of file diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/build-project.png b/code-studio/troubleshoot/debugging-steps/debugging-images/build-project.png new file mode 100644 index 0000000..de8a953 Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/build-project.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/create-folder.png b/code-studio/troubleshoot/debugging-steps/debugging-images/create-folder.png new file mode 100644 index 0000000..5c22f2e Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/create-folder.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/create-json.png b/code-studio/troubleshoot/debugging-steps/debugging-images/create-json.png new file mode 100644 index 0000000..c37b012 Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/create-json.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/create-project.png b/code-studio/troubleshoot/debugging-steps/debugging-images/create-project.png new file mode 100644 index 0000000..fd77d1f Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/create-project.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/create-solution.png b/code-studio/troubleshoot/debugging-steps/debugging-images/create-solution.png new file mode 100644 index 0000000..444f7d6 Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/create-solution.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/debug-app.gif b/code-studio/troubleshoot/debugging-steps/debugging-images/debug-app.gif new file mode 100644 index 0000000..b80d0c5 Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/debug-app.gif differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/extensions.png b/code-studio/troubleshoot/debugging-steps/debugging-images/extensions.png new file mode 100644 index 0000000..538eb5e Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/extensions.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/new-project.png b/code-studio/troubleshoot/debugging-steps/debugging-images/new-project.png new file mode 100644 index 0000000..577c19a Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/new-project.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/run-app.png b/code-studio/troubleshoot/debugging-steps/debugging-images/run-app.png new file mode 100644 index 0000000..77b8a93 Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/run-app.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/select-debugger.png b/code-studio/troubleshoot/debugging-steps/debugging-images/select-debugger.png new file mode 100644 index 0000000..e26fbde Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/select-debugger.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/select-language.png b/code-studio/troubleshoot/debugging-steps/debugging-images/select-language.png new file mode 100644 index 0000000..1dbed16 Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/select-language.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/winforms-setup.png b/code-studio/troubleshoot/debugging-steps/debugging-images/winforms-setup.png new file mode 100644 index 0000000..4bbbf07 Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/winforms-setup.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/winforms-template.png b/code-studio/troubleshoot/debugging-steps/debugging-images/winforms-template.png new file mode 100644 index 0000000..9860c83 Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/winforms-template.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/winui-setup.png b/code-studio/troubleshoot/debugging-steps/debugging-images/winui-setup.png new file mode 100644 index 0000000..65908ef Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/winui-setup.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/winui-template.png b/code-studio/troubleshoot/debugging-steps/debugging-images/winui-template.png new file mode 100644 index 0000000..c2fe90f Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/winui-template.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/wpf-setup.png b/code-studio/troubleshoot/debugging-steps/debugging-images/wpf-setup.png new file mode 100644 index 0000000..dce07ea Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/wpf-setup.png differ diff --git a/code-studio/troubleshoot/debugging-steps/debugging-images/wpf-template.png b/code-studio/troubleshoot/debugging-steps/debugging-images/wpf-template.png new file mode 100644 index 0000000..0ed108a Binary files /dev/null and b/code-studio/troubleshoot/debugging-steps/debugging-images/wpf-template.png differ diff --git a/code-studio/troubleshoot/debugging-steps/desktop-platforms.md b/code-studio/troubleshoot/debugging-steps/desktop-platforms.md new file mode 100644 index 0000000..8ff5a84 --- /dev/null +++ b/code-studio/troubleshoot/debugging-steps/desktop-platforms.md @@ -0,0 +1,131 @@ +--- +title: Setup and Debug Desktop Applications in Syncfusion Code Studio +description: Step-by-step guide to setup and debug Desktop applications in WinForms, WPF and WinUI Platforms using Syncfusion Code Studio's debugging features and tools. +platform: syncfusion-code-studio +control: IDE +documentation: Troubleshoot +keywords: winforms, wpf, winui, wf, desktop-applications, debug, debugging, breakpoints, step-through, variables, watch, call-stack, output, troubleshoot, code-studio +--- + +# This guide provides step-by-step instructions for setting-up and debugging a Desktop application using Code Studio + +## Prerequisites + +- Install the .NET SDK (version 8.0 or 9.0, depending on your project requirements) from [dotnet-sdk](https://dotnet.microsoft.com/en-us/download) +- Install the Windows App SDK (version 1.8.x) from [windows-app-sdk](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/downloads) (Required only for WinUI applications) + +## Built-in Extensions of Code Studio + - **DotRush** is a lightweight C# development environment for Visual Studio Code, enabling efficient .NET project management. It provides Roslyn-based IntelliSense for code completion and navigation, a solution explorer for handling multiple projects/solutions, integrated debugging (including .NET Core, Unity, and Godot), test exploration for running NUnit/xUnit tests, performance profiling tools, code decompilation, and multi-target diagnostics. Ideal for seamless .NET and game development on Windows, macOS, and Linux. For more details, visit: https://github.com/JaneySprings/DotRush + +- **vscode-solution-explorer** is a Visual Studio Code extension that adds a Solution Explorer panel for managing .sln file, mimicking Visual Studio's structure. It is designed for .NET Core projects. For more details, visit: https://github.com/fernandoescolar/vscode-solution-explorer + +extensions + + +## Steps to Setup a Desktop Application in Code Studio + +### Step 1: Create a Solution +Navigate to the solution and create a new solution. + +createsolution + +### Add a Project to the Solution: + +Step 1: Include the new project in the solution. +newproject + +Step 2: + +**WinForms** - Create a WinForms project by selecting the WinForms template + +winformstemplate + +**WPF** - Create a WPF project by selecting the WPF template + +wpftemplate + +**WinUI** - Create a WinUI project by selecting the WPF template + +winuitemplate + +Step 2A: Specify the Programming language (For WinForms and WPF) + +selectlanguage + +Step 3: Specify the Project Name + +createproject + +Step 3: Specify the Folder Name + +createfolder + + +New Project will be created in the solution + +**Winforms** + +winformssetup + +**WPF** + +wpfsetup + +**WinUI** + +winuisetup + + +### Set Up Tasks for Building: + +Create a launch.json file to configure the build process + +createjson + +Select .NET Core Debugger + +selectdebugger + +### Build the Project + +buildproject + +### Run the Application + +Go to "Run and Debug"and select ".NET Core Debugger (launch)" + +runapp + +## Debugging in Action + +**Note:** The following debugging demonstration uses a WPF application, but the debugging process, interface, and features are identical across WinForms, WPF, and WinUI platforms in Syncfusion Code Studio. + +### Debug Process Walkthrough + +Debug Process Demonstration + +The above animation demonstrates the complete debugging workflow from setting breakpoints to hitting them during execution. + +The application will launch, and the debugger will attach. If a breakpoint is hit, execution pauses, and you can inspect variables in the Debug panel (Autos, Locals, or Watch windows). + + +## Debugging Features Reference + +| Feature | Shortcut | Description | +|---------|----------|-------------| +| **Step Into** | `F11` | Step into a method call to debug inside the method | +| **Step Over** | `F10` | Execute the current line without stepping into method calls | +| **Step Out** | `Shift+F11` | Exit the current method and return to the caller | +| **Continue** | `F5` | Resume execution until the next breakpoint | +| **Restart** | `Ctrl+Shift+F5` | Restart the debugging session | +| **Stop** | `Shift+F5` | Stop the debugging session | + +### Platform Consistency + +**Important:** These debugging features, keyboard shortcuts, and debugging interface work identically across: + +- WinForms applications +- WPF applications +- WinUI applications + +The underlying .NET debugging experience in Syncfusion Code Studio remains consistent regardless of the desktop UI framework you're using. \ No newline at end of file