Media
4 items
Description
A powerful sidebar DevTools alternative — Elements, Console, Network, Sources & Application panels right in your browser sidebar ALT-DEV TOOLS is a developer tool that brings essential Chrome DevTools features into a convenient sidebar. It allows you to inspect elements, view console logs, monitor network requests, browse source files, and manage website storage without opening the DevTools window. Everything stays visible while you browse, making debugging faster and easier. This extension is useful for frontend developers, web developers, QA testers, and anyone who wants quick access to debugging tools while working on websites. Main Features Elements Inspector Browse the page DOM structure and inspect elements directly from the webpage. You can view and edit text, HTML attributes, and CSS styles in real time. The panel also shows the box model (margin, border, padding) and allows you to force element states such as hover, focus, and active. Event listeners attached to elements can also be viewed. Console View and capture console logs from the page including log, warn, error, info, and debug messages. You can run JavaScript directly in the page context and inspect the results. Objects can be expanded, and previous commands can be accessed through command history. Network Monitor Track network requests made by the page including fetch and XMLHttpRequest calls. Each request shows details such as headers, payload, response data, and timing information. Requests can be searched, filtered, and sorted. You can also export requests as HAR files or copy them as cURL commands. Sources Viewer Browse JavaScript, CSS, and HTML files loaded by the webpage in an organized file tree. Files include syntax highlighting and line numbers. You can also format minified code and search text across all loaded files. Application Storage View and manage cookies, localStorage, and sessionStorage for the current site. You can inspect values, filter entries, delete individual items, or clear storage when testing applications. Keyboard Shortcuts Press Enter to run console commands. Use the arrow keys to navigate command history. Press Escape to cancel editing. Use Ctrl + Shift + F to search across source files. Permissions The extension requires access to the active tab to inspect webpages. Script injection allows it to interact with page content. Storage permissions are used to save settings, and cookie access allows viewing and managing cookies for the current site. Limitations Some advanced debugging features like JavaScript breakpoints, CPU profiling, and memory inspection require Chrome DevTools and are not available in extensions. Network monitoring may not capture every browser-internal request, and pages with strict security policies may limit certain features. ALT-DEV TOOLS helps developers inspect and debug websites more conveniently by keeping essential tools available in a sidebar while browsing