English
See more
The best extension to set a timed debugger to inspect hard-to-grab elements on web pages
Latest Version
Version
1.0.1
Update
September 23, 2024
Size
177KiB
Developer
Category
Users
170 
Rating
5 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
Storage
Scripting
See more
Scripting
Debugger Timeout Extension
To ensure the extension functions correctly, make sure that Chrome DevTools is open before proceeding.
Inspecting elements during dynamic interactions—such as mouse movements, drag-and-drop actions, and other DOM events—can be challenging. These events often cause elements to disappear or change states, making it difficult to grab and analyze them when needed.
Debugger Timeout addresses this issue by allowing you to trigger a debugger exactly when it’s necessary. By setting a countdown timer, you can “freeze” your application for a specified duration, enabling you to inspect elements in their current state without interference from DOM events.
Steps to Use Debugger Timeout
\t1.\tOpen Chrome DevTools:
\t•\tEnsure that Chrome DevTools is open before using the extension. You can do this by right-clicking on the page and selecting “Inspect,” or by using the shortcut:
\t•\tWindows/Linux: Ctrl + Shift + I or F12
\t•\tMac: Cmd + Option + I or F12
\t2.\tAccess the Debugger Timeout Extension:
\t•\tClick on the Debugger Timeout icon in the Chrome toolbar to open the extension interface.
\t3.\tSet the Countdown Timer:
\t•\tUse the ”+” and ”-” buttons to adjust the number of seconds for the countdown. This setting determines how long the countdown will run before the application freezes, allowing you to inspect the elements in their current state.
\t4.\tRun the Debugger:
\t•\tClick the “Run Debugger” button to start the countdown. Your application will freeze after the specified time, enabling you to inspect the desired elements in their current state.
\t5.\tInspect Elements:
\t•\tWhile the application is frozen, you can use DevTools to inspect and analyze the elements without them changing or disappearing.
We appreciate your interest in Debugger Timeout! Your feedback is invaluable to us. If you have any comments, suggestions for improvements, or feature requests, please report them on our GitHub repository or send us a direct message.
GitHub: https://github.com/nunibaranes/debugger-timeout-chrome-extension
Read more
Inspecting elements during dynamic interactions—such as mouse movements, drag-and-drop actions, and other DOM events—can be challenging. These events often cause elements to disappear or change states, making it difficult to grab and analyze them when needed.
Debugger Timeout addresses this issue by allowing you to trigger a debugger exactly when it’s necessary. By setting a countdown timer, you can “freeze” your application for a specified duration, enabling you to inspect elements in their current state without interference from DOM events.
Steps to Use Debugger Timeout
\t1.\tOpen Chrome DevTools:
\t•\tEnsure that Chrome DevTools is open before using the extension. You can do this by right-clicking on the page and selecting “Inspect,” or by using the shortcut:
\t•\tWindows/Linux: Ctrl + Shift + I or F12
\t•\tMac: Cmd + Option + I or F12
\t2.\tAccess the Debugger Timeout Extension:
\t•\tClick on the Debugger Timeout icon in the Chrome toolbar to open the extension interface.
\t3.\tSet the Countdown Timer:
\t•\tUse the ”+” and ”-” buttons to adjust the number of seconds for the countdown. This setting determines how long the countdown will run before the application freezes, allowing you to inspect the elements in their current state.
\t4.\tRun the Debugger:
\t•\tClick the “Run Debugger” button to start the countdown. Your application will freeze after the specified time, enabling you to inspect the desired elements in their current state.
\t5.\tInspect Elements:
\t•\tWhile the application is frozen, you can use DevTools to inspect and analyze the elements without them changing or disappearing.
We appreciate your interest in Debugger Timeout! Your feedback is invaluable to us. If you have any comments, suggestions for improvements, or feature requests, please report them on our GitHub repository or send us a direct message.
GitHub: https://github.com/nunibaranes/debugger-timeout-chrome-extension
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "version": "1.0.1", "name": "Debugger Timeout", "description": "The best extension to set a timed debugger to inspect hard-to-grab elements on web pages", "action": { "default_popup": "popup.html", "default_title": "Debugger Timeout", "default_icon": "icon-34.png" }, "icons": { "128": "icon-128.png" }, "permissions": [ "storage", "scripting" ], "host_permissions": [ "" ], "background": { "service_worker": "background.js" }}
Read more
