# firefox-devtools/debugger **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/firefox-devtools-debugger).** 4,606 stars · 747 forks · archived ## Links - GitHub: https://github.com/firefox-devtools/debugger - Homepage: https://firefox-dev.tools/ - awesome-repositories: https://awesome-repositories.com/repository/firefox-devtools-debugger.md ## Topics `chrome` `debugger` `devtools` `firefox` `flowtype` `javascript` `mozilla` `node` `react` `redux` ## Description This project is a browser developer tool designed for inspecting JavaScript execution, network traffic, and page layouts. It functions as a JavaScript debugger and a Chrome DevTools Protocol debugger to manage the state of a web engine and identify logic errors in web applications. The suite provides specialized utilities for web performance profiling, including the detection of memory leaks and the analysis of processing bottlenecks. It also includes a network traffic analyzer for troubleshooting API calls and a browser storage manager for modifying cookies, cache, and local database entries. Additional capabilities cover web page layout analysis, mobile device emulation to verify responsive displays, and the monitoring of application logs. The toolset supports source map resolution to link compiled code back to original files and allows for the connection of external editors. ## Tags ### Development Tools & Productivity - [Browser Developer Tools](https://awesome-repositories.com/f/development-tools-productivity/browser-developer-tools.md) — Provides a comprehensive suite of debugging utilities for inspecting JavaScript execution, network traffic, and page layouts within a browser. - [JavaScript and TypeScript Debugging](https://awesome-repositories.com/f/development-tools-productivity/debugging-profiling-testing/debugging-diagnostics/javascript-and-typescript-debugging.md) — Provides comprehensive tools for stepping through, inspecting, and profiling JavaScript execution to resolve logic errors. ([source](https://firefox-dev.tools/)) - [JavaScript Runtime Debuggers](https://awesome-repositories.com/f/development-tools-productivity/javascript-runtime-debuggers.md) — Provides a runtime debugger for stepping through code and inspecting variables to identify logic errors in JavaScript. - [Source Map Resolution](https://awesome-repositories.com/f/development-tools-productivity/source-code-mapping/source-map-resolution.md) — Maps minified or compiled JavaScript back to original source files for accurate line-by-line debugging. ### Data & Databases - [Browser Storage Managers](https://awesome-repositories.com/f/data-databases/browser-storage-managers.md) — Provides an interface for modifying and deleting cookies, cache, and local database entries like IndexedDB. ([source](https://firefox-dev.tools/)) - [Client-Side Storage](https://awesome-repositories.com/f/data-databases/client-side-storage.md) — Provides mechanisms for persisting and modifying application data within the browser environment. ### Networking & Communication - [JSON-Based Communication Protocols](https://awesome-repositories.com/f/networking-communication/json-based-communication-protocols.md) — Uses a standardized JSON-based protocol to exchange commands and state between the browser engine and the developer interface. - [Network Traffic Analyzers](https://awesome-repositories.com/f/networking-communication/network-traffic-analyzers.md) — Monitors outgoing requests and responses to troubleshoot API calls and optimize loading speeds. ([source](https://firefox-dev.tools/)) - [Browser Device Emulation](https://awesome-repositories.com/f/networking-communication/browser-device-emulation.md) — Simulates different device categories and user agents to verify that layouts adapt correctly to mobile displays. ([source](https://firefox-dev.tools/)) ### Operating Systems & Systems Programming - [Remote Debugging Protocols](https://awesome-repositories.com/f/operating-systems-systems-programming/remote-debugging-protocols.md) — Provides a protocol for connecting the frontend toolset to a background process that controls the JavaScript engine. ### Software Engineering & Architecture - [Inter-Process Message Passing](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/workflow-automation-integrations/external-application-integrations/child-process-execution/inter-process-message-passing.md) — Coordinates structured data exchange between the main browser process and the separate renderer process hosting the tools. - [Application Performance Optimization](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/application-performance-tuning/application-performance-optimization.md) — Identifies processing bottlenecks and streamlines asset delivery to increase the speed of the user experience. ([source](https://firefox-dev.tools/)) ### System Administration & Monitoring - [Web Performance Analyzers](https://awesome-repositories.com/f/system-administration-monitoring/monitoring-and-observability/web-performance-analyzers.md) — Provides tools for analyzing memory usage and identifying processing bottlenecks to improve page responsiveness. - [Real-Time Application Log Monitoring](https://awesome-repositories.com/f/system-administration-monitoring/real-time-application-log-monitoring.md) — Tracks errors, security warnings, and network issues through a real-time console output for troubleshooting. ([source](https://firefox-dev.tools/)) ### Testing & Quality Assurance - [Network Traffic Monitors](https://awesome-repositories.com/f/testing-quality-assurance/general-testing-utilities/test-utilities-assertions/network-api-mocking/network-traffic-monitors.md) — Includes a network traffic monitor to track API calls and asset requests for troubleshooting and optimization. - [Memory Leak Detection](https://awesome-repositories.com/f/testing-quality-assurance/debugging-diagnostics/memory-leak-detection.md) — Analyzes memory usage patterns to identify leaks and improve overall application responsiveness. ([source](https://firefox-dev.tools/)) ### Web Development - [Page Speed Optimizations](https://awesome-repositories.com/f/web-development/page-speed-optimizations.md) — Analyzes memory usage and processing bottlenecks to improve the speed and responsiveness of web pages. - [DevTools Protocol Clients](https://awesome-repositories.com/f/web-development/web-automation-scraping/browser-control-protocols/chrome-devtools-protocols/devtools-protocol-clients.md) — Implements a client that uses the Chrome DevTools Protocol to inspect JavaScript execution and manage the web engine state. - [Layout Analysis Tools](https://awesome-repositories.com/f/web-development/web-layout-structuring/layout-analysis-tools.md) — Allows real-time inspection of HTML and CSS properties to refine the visual structure of a website. - [Mobile Viewport Emulation](https://awesome-repositories.com/f/web-development/mobile-viewport-emulation.md) — Provides a mechanism to simulate various mobile device viewports to verify responsive web layouts. ### User Interface & Experience - [DOM and Style Inspectors](https://awesome-repositories.com/f/user-interface-experience/dom-and-style-inspectors.md) — Analyzes structural properties and styling in real time to adjust and refine the visual arrangement of a page. ([source](https://firefox-dev.tools/))