meta data for this page
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
ixc2024:tech:tools:green-tools [2024/05/22 16:14] – [Android Studio Profile] sharjeel_193 | ixc2024:tech:tools:green-tools [2024/05/28 12:42] (current) – arsh | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== GREEN TOOLS ====== | + | ====== GREEN TOOLS for Flutter Mobile Development |
==== Android Studio Profile ==== | ==== Android Studio Profile ==== | ||
Line 13: | Line 13: | ||
* Track power consumption related to CPU, network, and other system components. | * Track power consumption related to CPU, network, and other system components. | ||
* Make necessary code and design changes to improve app performance and reduce energy consumption. | * Make necessary code and design changes to improve app performance and reduce energy consumption. | ||
+ | |||
+ | **It is highly recommended to perform test on physical mobile device.** | ||
**Measurements** | **Measurements** | ||
Line 54: | Line 56: | ||
**Carbon Measurement** | **Carbon Measurement** | ||
+ | |||
Greenspector measures the energy consumed by your mobile application during various user journeys, including both active usage and background processes by applying LCA methodologies to estimate the broader environmental impacts associated with the use of digital services. | Greenspector measures the energy consumed by your mobile application during various user journeys, including both active usage and background processes by applying LCA methodologies to estimate the broader environmental impacts associated with the use of digital services. | ||
Line 72: | Line 75: | ||
//__Memory Optimization__// | //__Memory Optimization__// | ||
+ | |||
//Memory Usage Tracking:// Greenspector monitors the app’s memory usage in real-time, helping to ensure that it stays within the specified threshold. | //Memory Usage Tracking:// Greenspector monitors the app’s memory usage in real-time, helping to ensure that it stays within the specified threshold. | ||
Line 77: | Line 81: | ||
//__Network Efficiency__// | //__Network Efficiency__// | ||
+ | |||
//Network Traffic Analysis:// Greenspector measures the volume of network requests and data transfer rates, providing insights into how to reduce unnecessary network traffic through caching and optimization. | //Network Traffic Analysis:// Greenspector measures the volume of network requests and data transfer rates, providing insights into how to reduce unnecessary network traffic through caching and optimization. | ||
//Data Transfer Efficiency:// | //Data Transfer Efficiency:// | ||
+ | ==== Flutter Dev Tools ==== | ||
+ | |||
+ | **Description: | ||
+ | Flutter DevTools is a suite of performance and debugging tools for Flutter and Dart applications. It provides a wide range of features to help developers diagnose and optimize their apps for better performance, | ||
+ | |||
+ | |||
+ | **Launching Dev Tools** | ||
+ | |||
+ | | ||
+ | |||
+ | **Prerequisites** | ||
+ | |||
+ | **Flutter SDK:** Ensure you have Flutter installed. You can check by running flutter --version in your terminal. | ||
+ | **IDE:** Use either Visual Studio Code or Android Studio with Flutter and Dart plugins installed. | ||
+ | **Device or Emulator:** Have a device connected or an emulator running. | ||
+ | |||
+ | Launching Flutter DevTools | ||
+ | **Using Visual Studio Code (VS Code)** | ||
+ | |||
+ | 1-**Install Flutter and Dart Plugins: | ||
+ | ** | ||
+ | * Unordered List ItemGo to the Extensions view (Ctrl+Shift+X). | ||
+ | * Unordered List ItemSearch for Flutter and Dart and install both plugins. | ||
+ | |||
+ | 2-**Open your Flutter project:** | ||
+ | |||
+ | * Unordered List ItemOpen your Flutter project in VS Code. | ||
+ | |||
+ | 3-**Start Debugging: | ||
+ | |||
+ | * Unordered List ItemPress F5 or go to the Debug view (Ctrl+Shift+D) and click on " | ||
+ | |||
+ | 4-**Open DevTools:** | ||
+ | |||
+ | * Unordered List ItemOnce the app is running, you will see a notification in the bottom right corner saying "Dart DevTools is available" | ||
+ | * Unordered List ItemClick on "Open DevTools" | ||
+ | |||
+ | Alternatively, | ||
+ | |||
+ | * Unordered List ItemPress Ctrl+Shift+P to open the command palette. | ||
+ | * Unordered List ItemType Open DevTools and select the corresponding option. | ||
+ | |||
+ | **Using Android Studio** | ||
+ | |||
+ | 1-**Install Flutter and Dart Plugins:** | ||
+ | |||
+ | * Unordered List ItemGo to File > Settings (or Preferences on macOS) > Plugins. | ||
+ | * Unordered List ItemSearch for Flutter and Dart plugins and install them. | ||
+ | |||
+ | 2-**Open your Flutter project:** | ||
+ | |||
+ | * Unordered List ItemOpen your Flutter project in Android Studio. | ||
+ | |||
+ | 3-**Start Debugging: | ||
+ | |||
+ | * Unordered List ItemClick on the green play button in the toolbar or select Run > Run ' | ||
+ | |||
+ | 4-**Open DevTools:** | ||
+ | |||
+ | * Unordered List ItemOnce the app is running, you will see an icon in the toolbar labeled Flutter Inspector. Click on it. | ||
+ | * Unordered List ItemIn the Flutter Inspector tab, click on the Open DevTools button. | ||
+ | |||
+ | **Using Terminal** | ||
+ | |||
+ | 1-**Run your Flutter app:** | ||
+ | |||
+ | * Unordered List ItemNavigate to your Flutter project directory in the terminal. | ||
+ | * Unordered List ItemRun flutter run to start your app. | ||
+ | |||
+ | 2-**Open DevTools:** | ||
+ | |||
+ | * Unordered List ItemIn a separate terminal window, run flutter pub global activate devtools to ensure DevTools is installed. | ||
+ | * Unordered List ItemThen run flutter pub global run devtools to start the DevTools server. | ||
+ | * Unordered List ItemOpen a web browser and navigate to the URL provided in the terminal (usually http:// | ||
+ | |||
+ | |||
+ | **Video to understand dev tool and how to interpret results** : | ||
+ | |||
+ | |||
+ | **Measurements** | ||
+ | |||
+ | //__Energy Efficiency: | ||
+ | |||
+ | // | ||
+ | |||
+ | //CPU Profiler:// Detects and optimizes high CPU usage spikes that can be reduced which lowers the overall power consumption, | ||
+ | |||
+ | // | ||
+ | |||
+ | //__CPU Optimization__// | ||
+ | |||
+ | //CPU Usage Analysis:// Use the CPU Profiler to analyze the CPU usage of different parts of your app. After identifying these parts which consume a high percentage of CPU resources, we can prevent excessive energy consumption. | ||
+ | |||
+ | //Isolate High CPU Tasks:// Detect CPU-intensive tasks that can be considered to run in isolation to prevent blocking the main thread and to distribute the load efficiently. | ||
+ | |||
+ | //__Memory Optimization: | ||
+ | |||
+ | //Memory Profiler:// Monitor memory allocations and usage patterns. Detects memory leaks and unnecessary memory allocations, | ||
+ | |||
+ | //__Network Efficiency: | ||
+ | |||
+ | //Network Profiling:// | ||
+ | |||
+ | //__UI Performance: | ||
+ | //Frame Rendering Analysis:// Use the performance tab to analyze frame rendering times. Using this information one can make sure that the UI thread usage does not exceed 16 ms per frame for more than 5% of frames to maintain a smooth user experience and reduce energy consumption. | ||