Debug Panel
Three everyday debugging jobs in one panel on the page: clear browsing data, inject your own CSS, JavaScript or HTML, and check the page's images.
- D Press D in the popup
- Runs in your browser
- Opens in a panel on the page
Clear data, inject CSS and JavaScript, and check images
Debug Panel opens right on the page you are working on and handles three jobs that normally take a trip through Chrome’s settings, DevTools or a separate extension: clear browsing data, inject CSS and JavaScript, and check the page’s images. It is free, and it can be dragged, resized, minimised or popped out into its own window.
Clear browsing data
Pick exactly what to clear: cache, cookies, browsing history, local storage, session storage, IndexedDB, service workers and saved form data. Choose a time range, from the last hour to all time, and press Clear. The page reloads, and the panel comes back by itself, so you can test the fresh state straight away.
Local and session storage are cleared for the site you are on. Cache, cookies, history, IndexedDB, service workers and form data are cleared the way Chrome’s own Clear browsing data does it: for every site, within the time range you choose. Pick Last hour when you only want to wipe what you just did.
Inject CSS and JavaScript into any site
Write HTML, CSS or JavaScript and run it on the current page. Use it to test a CSS fix before you deploy it, add a debugging helper, hide a broken widget, or try out a third-party snippet without touching the site’s code.
- One-time: runs once on the page you are looking at.
- Persistent: saved and run again on every page load for that domain, until you remove it.
Saved scripts are listed with their domain and a preview of the code, so you can run one again on the spot or delete it when you no longer need it. JavaScript runs in the page itself, with access to the page’s own variables, just like code typed into the console.
Image optimisation check
Analyse every image on the page and see, for each one, its real size, its displayed size and its file size, with clear warnings:
- Oversized: a 2400 px image squeezed into a 600 px box.
- Large file: anything over 200 KB.
- Not WebP or AVIF: an older format that could be much smaller.
- No lazy loading: images that load before anyone scrolls to them.
- Missing alt text: a problem for accessibility and image SEO.
Images are often the biggest reason a page is slow. This check shows you which ones to fix first.
Who uses it
- Developers testing fixes and fresh sessions without opening settings.
- WordPress and Shopify site owners trying custom CSS before adding it to the theme.
- SEO and performance specialists spotting heavy images on key pages.
Tip: Choose Last hour when clearing data to reset only what you just did, not your whole browsing history.
How to clear cache and inject code on a website
-
Open the panel
Click Debug Panel in DevToolkit (or press D). It opens on the page you are viewing.
-
Pick a tab
Clear browsing data, inject custom code, or run the image optimisation check.
-
Test and close
Check the result on the page, then close the panel. Persistent scripts keep running on that site.
What you can do with the Debug Panel
-
Clear exactly what you need
Cache, cookies, history, storage, IndexedDB, service workers and form data.
-
Time ranges
Last hour, last day, last week or all time.
-
Inject HTML, CSS and JS
Run code on any page, once or on every visit.
-
Saved scripts per domain
Manage persistent code site by site.
-
Image check
Oversized, heavy, old-format, eager and alt-less images flagged.
-
Panel on the page
Drag, resize, minimise or pop it out into a window.
Debug Panel questions
Is the Debug Panel free?
Yes. All three tools are part of DevToolkit's free plan.
Does clearing data only affect the current site?
Local and session storage are cleared for the current site only. Cache, cookies, history, IndexedDB, service workers and form data are cleared across the browser for the time range you pick, the same as Chrome's own Clear browsing data.
Does injected code change the real website?
No. It only runs in your browser. Other visitors never see it. Persistent scripts run each time you load that domain, until you delete them.
Is it safe to run JavaScript from the internet?
Only run code you understand or trust. Injected JavaScript has the same access as the page itself, including to anything you are logged in to on that site.
Why did the page reload after clearing data?
A reload makes the page start fresh without the data you removed. The panel opens again on its own afterwards.
Try Debug Panel today
Install DevToolkit free, then unlock every Pro tool with one payment. No subscription.