{"id":27357708,"url":"https://github.com/helabenkhalfallah/tools-devtools-app-analysis","last_synced_at":"2025-07-05T09:35:05.311Z","repository":{"id":255555082,"uuid":"850731272","full_name":"helabenkhalfallah/tools-devtools-app-analysis","owner":"helabenkhalfallah","description":"Analysis and optimization of performance, memory and web coverage","archived":false,"fork":false,"pushed_at":"2024-11-22T16:51:43.000Z","size":123,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T23:53:53.944Z","etag":null,"topics":["devtools","perfomance-analysis","tools","web"],"latest_commit_sha":null,"homepage":"https://www.meetup.com/fr-FR/web-dev-enthusiasts/events/301584149/?eventorigin=group_featured_event","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/helabenkhalfallah.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-01T16:12:10.000Z","updated_at":"2024-11-22T16:51:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"ac527481-4a43-4b97-b974-61f4fa168702","html_url":"https://github.com/helabenkhalfallah/tools-devtools-app-analysis","commit_stats":null,"previous_names":["helabenkhalfallah/meetup-performances-tools","helabenkhalfallah/hands-on-tools-devtools"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helabenkhalfallah%2Ftools-devtools-app-analysis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helabenkhalfallah%2Ftools-devtools-app-analysis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helabenkhalfallah%2Ftools-devtools-app-analysis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helabenkhalfallah%2Ftools-devtools-app-analysis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/helabenkhalfallah","download_url":"https://codeload.github.com/helabenkhalfallah/tools-devtools-app-analysis/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647236,"owners_count":21139083,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["devtools","perfomance-analysis","tools","web"],"created_at":"2025-04-12T23:53:55.917Z","updated_at":"2025-04-12T23:53:56.530Z","avatar_url":"https://github.com/helabenkhalfallah.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Inefficient Application Analysis wit Tools and Devtools 🚀\n\nThis repository demonstrates common **memory leaks**, **inefficiencies**, and **performance issues** in React applications. It serves as a practical tool to showcase how to identify, debug, and fix these problems using **Chrome DevTools** tools, including **Lighthouse**, **Performance**, **Memory**, **Network**, **Record**, **Coverage**, and **Source** tabs.\n\n---\n\n## Features\n\n### 1. **Leaky Components**\n- **`LeakyTimer.tsx`**: Demonstrates a memory leak caused by an uncleared `setTimeout`.\n- **`LeakyInterval.tsx`**: Simulates a memory leak due to an unhandled `setInterval`.\n- **`LeakyListener.tsx`**: Illustrates a memory leak resulting from an unremoved `resize` event listener on the `window` object.\n\n### 2. **Inefficient Rendering**\n- Components like `RecipeCard.tsx` and `IngredientCard.tsx` include inefficiencies such as redundant re-renders and unnecessary computations.\n\n### 3. **Unused Code**\n- Includes examples of:\n    - **Unused CSS rules** in components like `RecipeList.tsx`.\n    - **Unused functions or state variables** across multiple components.\n\n### 4. **Component Architecture**\n- Components such as `RecipeHeader.tsx`, `InstructionStep.tsx`, and `RecipeBanner.tsx` highlight modularity and reusability, but also showcase potential inefficiencies.\n\n---\n\n## How to Use This Application\n\n### **1. Clone the Repository**\n```bash\ngit clone https://github.com/helabenkhalfallah/tools-devtools-app-analysis.git\ncd tools-devtools-app-analysis\n```\n\n### **2. Install Dependencies**\n```bash\npnpm install\n```\n\n### **3. Run the Application**\n```bash\npnpm dev\n```\n\n---\n\n## Objectives\n\nThis application allows you to:\n\n1. **Analyze Memory Leaks**:\n    - Use the **Memory** tab to identify retained objects, detached DOM nodes, and closures.\n\n2. **Evaluate Application Performance**:\n    - Use the **Performance**, **Lighthouse**, and **Record** tabs to analyze rendering times, bottlenecks, and resource usage.\n\n3. **Detect Unused Code**:\n    - Use the **Coverage** and **Source** tabs to locate unused CSS and JavaScript.\n\n4. **Inspect Network Activity**:\n    - Use the **Network** tab to debug API calls, analyze load times, and spot inefficient resource usage.\n\n5. **Analyze Bundle Size**:\n    - **Vite Bundler Analyzer (`pnpm analyze`)**: Visualize the size of the app’s modules to identify oversized dependencies or inefficient packaging.\n    - **[Bundlephobia](https://bundlephobia.com/)**: Check the size, treeshaking support, and dependency impact of npm packages used in the app.\n\n6. **Assess Webpage Loading**:\n    - **WebPageTest**: Run comprehensive tests on your webpage to measure real-world performance, including loading speed, render times, and third-party resource impact.\n\n---\n\n## Key Components\n\n### **Leaky Components**\n| Component       | Issue                                 | Description                                           |\n|------------------|--------------------------------------|-------------------------------------------------------|\n| `LeakyTimer.tsx` | `setTimeout` not cleared             | Timeout holds a reference to state after unmounting. |\n| `LeakyInterval.tsx` | `setInterval` not cleared          | Interval continues to update state after unmounting. |\n| `LeakyListener.tsx` | Event listener not removed         | `resize` listener retains a reference to the component state. |\n\n### **Recipe Components**\n| Component          | Purpose                           | Notes                          |\n|---------------------|-----------------------------------|--------------------------------|\n| `RecipeHeader.tsx`  | Displays recipe metadata          | Modular and reusable.          |\n| `IngredientCard.tsx`| Renders individual ingredients    | Contains rendering inefficiencies. |\n| `InstructionStep.tsx` | Shows step-by-step instructions | Could be optimized further.    |\n| `RecipeList.tsx`    | Lists all recipes                 | Demonstrates potential coverage issues. |\n\n---\n\n## How to Analyze Issues\n\n### **1. Detect Memory Leaks**\n1. Open **Chrome DevTools**.\n2. Navigate to the **Performance** tab:\n    - Click \"Record\" and interact with the app (e.g., toggling leaky components or navigating between views).\n    - Look for a continuously growing **JS Heap** size, which may indicate memory leaks.\n3. Use the **Memory** tab:\n    - Take a heap snapshot and analyze retained objects, closures, and detached DOM nodes.\n\n### **2. Identify Unused Code**\n1. Open **Chrome DevTools** and navigate to the **Coverage tab**:\n    - Click \"Start Instrument Coverage and Reload Page\" to begin recording.\n    - Interact with the app (e.g., navigating or triggering components).\n2. Observe the report:\n    - **CSS**: Look for rules that are not applied during interactions.\n    - **JavaScript**: Identify functions or scripts that are loaded but never executed.\n3. Export the coverage report to analyze large, unused files for optimization.\n\n### **3. Debug Rendering Inefficiencies**\n1. Open the **Performance Tab** in Chrome DevTools:\n    - Click \"Record\" and perform app interactions (e.g., scrolling, clicking, or navigating).\n2. Analyze the timeline:\n    - Look for **long tasks** or **repeated layout shifts**.\n    - Identify components with slow rendering or excessive re-renders.\n3. Use **Flame Charts**:\n    - Pinpoint functions or components consuming the most time.\n\n### **4. Inspect Network Activity**\n1. Open the **Network Tab** in Chrome DevTools:\n    - Reload the app and monitor network requests.\n2. Analyze API calls:\n    - Check for failed or unnecessary requests.\n    - Monitor response times and payload sizes.\n3. Optimize resource loading:\n    - Identify large or unoptimized assets (e.g., images, JavaScript bundles).\n    - Ensure HTTP caching is utilized for static files.\n\n### **5. Analyze Bundles and Dependencies**\n1. Use **Vite Bundler Analyzer (`pnpm analyze`)**:\n    - Visualize the size of individual modules in your bundle.\n    - Identify oversized dependencies or unused packages.\n2. Use **[Bundlephobia](https://bundlephobia.com/)**:\n    - Analyze npm packages to detect size, treeshaking support, and dependency impact.\n    - Replace heavy or unused packages with lighter alternatives if possible.\n\n### **6. Assess Overall Page Performance**\n1. Run **Lighthouse** in Chrome DevTools:\n    - Analyze metrics such as Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT).\n    - Review optimization recommendations, such as eliminating render-blocking resources or optimizing images.\n2. Use **WebPageTest**:\n    - Evaluate real-world page loading speeds and resource loading patterns.\n    - Compare results across multiple geographic locations for better insights.\n\n---\n\n## Fixing Issues\n\n| Issue                     | Solution                                    |\n|----------------------------|--------------------------------------------|\n| **Uncleared Timers**       | Use `clearTimeout` or `clearInterval` in `useEffect` cleanup functions. |\n| **Unremoved Listeners**    | Use `removeEventListener` in `useEffect` cleanup functions. |\n| **Unused Code**            | Remove unused CSS and dead JavaScript code. |\n| **Inefficient Rendering**  | Use `React.memo`, `useCallback`, and `useMemo` to optimize rendering. |\n\n---\n\n## Tools for Debugging\n\n1. **Chrome DevTools**:\n    - **Lighthouse Tab**: Evaluate app performance and discover optimization suggestions.\n    - **Performance Tab**: Analyze memory leaks and heap usage.\n    - **Coverage Tab**: Detect unused code.\n    - **Network Tab**: Inspect API and resource performance.\n    - **Source Tab**: Review the source code and debug issues.\n\n---\n\n## Example Fix: Clearing a Timer\nHere’s an example of how to fix a memory leak in `LeakyTimer.tsx`:\n```tsx\nuseEffect(() =\u003e {\n    const timeoutId: NodeJS.Timeout = setTimeout(() =\u003e {\n        setMessage(\"Timeout Finished!\");\n    }, 5000);\n\n    return () =\u003e {\n        clearTimeout(timeoutId); // Cleanup to prevent leaks\n    };\n}, []);\n```\n\n---\n\n## Conclusion\n\nThis application is a demonstration of common issues:\n- Memory leaks\n- Inefficient rendering\n- Unused code\n\nIt serves as a learning tool to better understand how to identify, debug, and fix these issues in real-world applications.\n\nFeel free to fork the repo and experiment further!\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelabenkhalfallah%2Ftools-devtools-app-analysis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelabenkhalfallah%2Ftools-devtools-app-analysis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelabenkhalfallah%2Ftools-devtools-app-analysis/lists"}