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
Languages Support
English
See more
Permissions
Storage
Scripting
See more

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

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

How to download and manually install Debugger Timeout extension for Chrome

Looking for a way to install Debugger Timeout extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Debugger Timeout extensions manually, this article outlines two simple methods to effortlessly install Debugger Timeout extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Debugger Timeout extension and manually install through Drag &Drop

If you ever need to manually install a Debugger Timeout extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Debugger Timeout Extension by clicking the "Download CRX" button on the website.

Look for the Debugger Timeout extension you wish to install. Go to the website and download the Debugger Timeout extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Debugger Timeout extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Debugger Timeout extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Debugger Timeout extension for Chrome and install in Developer Mode

This is another method to install Debugger Timeout extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Debugger Timeout extension file

Select and download the Debugger Timeout extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Debugger Timeout extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Debugger Timeout extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Debugger Timeout extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Debugger Timeout extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

RingCentral Huddle Extension · Productivity 170 0 ★ 2.17MiB

icon

break? Extension · Developer Tools 170 2 ★ 15.42KiB

icon

Anti FeR toolkit Extension · Fun 170 3 ★ 85.54KiB

icon

FRC Search Extension · Productivity 170 20 ★ 64.14KiB

icon

Highlight and Connect Extension · Social & Communication 170 1 ★ 12.86KiB

icon

Stop It Grandpa Extension · News & Weather 170 2 ★ 10.67KiB

icon

WhoFundsWho Extension · Productivity 170 1 ★ 3.79MiB

icon

Follows You GitHub Extension · Social & Communication 170 0 ★ 11.25KiB

icon

Color picker free Extension · Developer Tools 170 11 ★ 602KiB

icon

DIG This Deal Extension · Shopping 170 4 ★ 292KiB

icon

Clipp'd .efficiently Extension · Productivity 170 1 ★ 1.48MiB

icon

Servomancer Tennis Browser Extension Extension · Fun 170 1 ★ 213KiB

icon

Loop8 Privacy Manager Extension · Productivity 170 5 ★ 5.85MiB

icon

Apiary - Web Highlighter & Annotator Extension · Social & Communication 170 0 ★ 1.51MiB

icon

Suspend tabs Extension · Productivity 170 0 ★ 27.74KiB

icon

Simple Bookmarks Manager Extension · Productivity 170 1 ★ 60.96KiB

icon

Add to LinkJoin Extension · Productivity 170 0 ★ 81.62KiB

icon

Taby Extension · Productivity 170 2 ★ 336KiB

icon

Breached Extension · Productivity 170 0 ★ 53.72KiB

icon

WebEdit Pro Extension · Productivity 170 2 ★ 311KiB

icon

Time Tracker, Todo, Sprint Manager - Basecamp Extension · Productivity 170 9 ★ 1.69MiB

icon

Boss Hub | Link Extension · Productivity 170 1 ★ 490KiB

icon

Site Blocker Extension · Productivity 170 2 ★ 46.95KiB

icon

Easy Reply Extension · Productivity 170 3 ★ 199KiB

User reviews

icon

Ronny Orbach (ID: 000000c75c0d5042) Voted 5 ★ - Updated 10/14/2021 Quickly add a timed breakpoint without fiddling with console hacks manually. Really useful when debugging menus and other tricky UI elements.

icon

Yuval Levanoni (ID: 0000004fe0faff93) Voted 5 ★ - Updated 10/11/2021 OMG Thank you this is exactly what I needed! it works great!

icon

Tomer Matmon (ID: 000000131a54fef0) Voted 5 ★ - Updated 10/10/2021 Awesome extension for developers! makes it easy to debug "hard to reach" elements 😆

icon

Nofar Baranes (ID: 000000b85530eddd) Voted 5 ★ - Updated 10/10/2021 Very useful extension!