How can I view the contents of HTML5 local storage in IE? Chrome and FireFox provide a way through their developer tools to view the contents of local storage but I couldn't find that information using IE9 developer tool.
In IE11, you can see local storage in console on dev tools:
Show dev tools (press F12)
Click "Console" or press Ctrl+2
Type localStorage and press Enter
Also, if you need to clear the localStorage, type localStorage.clear() on console.
Since localStorage is a global object, you can add a watch in the dev tools. Just enter the dev tools, goto "watch", click on "Click to add..." and type in "localStorage".
Edge (as opposed to IE11) has a better UI for Local storage / Session storage and cookies:
Open Dev tools (F12)
Go to Debugger tab
Click the folder icon to show a list of resources - opens in a separate tab
Related
On my school chromebook developer tools just got disabled or something.
When i right click to inspect an element, the "inspect" button is grayed out and if i click the options button in the top right, go down to more tools the developer tools button is grayed out there too.
Does anyone have any idea what is happening and why it is happening?
(Developer mode is enabled on my chromebook)
On a Chromebook, Chrome Developer Tools is enabled/disabled through Chrome Policies, which is maintained by the Chrome Management Console as part of a Google Work account. In this case, the policy is DeveloperToolsDisabled.
In Windows, it is possible to enable/disable it in the registry, and there is possibly a Preferences file in OSX.
I'm afraid you would need to speak to your school's IT department about this, as they are the only ones with access to these policies.
I am using chrome version 36+
according to this page, I should be able to allow custom themes using the following instructions:
Installation Instructions
Add this theme
Goto chrome://flags and Enable Developer Tools experiments.
Open developer tools settings, select Experiments tab, and check 'Allow custom UI themes'.
Reload devtools.
I do not see such a tab in the dev tools settings. I see only 'general', 'workspace', and 'shortcuts'
These are some simple steps to follow, hope it will be helpful.
Open a new chrome tab, type chrome://flags
Find, "Enable Developer Tools experiments." using ctrl/cmd+f or simply searching for it by scrolling down the page.
Click the "enable" link
Click on "Relaunch Now" at the bottom of the page.
After restarting Chrome, open DevTools, DevTools settings, and select the experiments tab.
Now select the experiment you want (e.g. "Allow custom UI themes").
You need to reload devtools after: Alt-R will reload devtools itself, or you can just close and reopen it.
To get to the Dev Tools Experiments area you have to click on the gear icon in the inspector.
If still not working you should go to:
chrome://extensions/
And click the 'Enable' checkbox for the DevTools extension you wish to enable.
Had the same issue,
I found I was going to browser settings which is NOT where you should be going to ,
You need to go to developer setting .
i.e right click>inspect element> dev tools
You need to restart the browser after changing the flag at chrome://flags
I found it. There is a checkbox under experiments tab:
Allow custom UI themes
Restart chrome just not means to close the chrome and then open it. you should click the 'Relaunch Now' button of the flags tab. and then it's work for me.
loislo's answer is absolutely right (You need to restart the browser after changing the flag at chrome://flags). But notice that your chrome can work in the background. Go to the tray, look for the chrome icon and exit.
Navigate to chrome://flags/
Find and enable Developer Tools experiments Mac, Windows, Linux, Chrome OS
Relaunch Chrome, open develop tool, setting, you will see experiments tab.
My Chrome version: Version 61.0.3163.100
2022 update: There doesn't seem to be any option in chrome://flags but there is an option:
devtools > settings > experiments > Allow extensions to load custom stylesheets
Is there a firefox equivalent of chrome's inspector "Resources" tab? I am trying to delete something from localStorage for a web site in firefox but it won't go, and the standard settings->clear cahce don't affect it at all.
Check for this:
Enter about:cache in browser address and see "Offline cache device" section.
Firefox storage inspector lets you see local storage.
This seems to be the closest equivalent to the chrome resource tab.
I had to explicitly enable the tab in the Firefox Develop Tools Options to get it to show.
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
When you click a target='_blank' link, it naturally opens a new tab in Google Chrome. For particular sites, I need to use the Chrome Developer Tools to examine the http requests for any new tabs that are opened.
Whenever you have Chrome Dev Tools open on your current page and then click a link that opens a new tab, Chrome Dev Tools are not opened on the new page by default. Opening Chrome Dev Tools at this point is too late because the tools do not capture the http requests for the page.
Also, in many cases, these new tabs go through a series of redirects before reaching the final page, so I cannot simply reload the page after opening Chrome Dev Tools.
The only workaround I can think of is, in the case that the site I'm working on is on a local development server, I can temporarily change the link from target='_blank' to target='_self', but this is unrealistic for a site with thousands of links or for a site that I have no control over the code.
Is it possible to set Chrome Dev Tools to automatically open with every new tab (opened either manually or via target='_blank'?
I'm not sure as of which Chrome version this changed, but if you click on the Settings wheel on dev tools:
You'll see a Global section with a checkmark for "Auto-Open DevTools for popups", which works for opening target="_blank" links with a devtools window:
It's possible to auto open devtools for all the new tabs instead of just target = _blank. When launching google chrome, pass the flag --auto-open-devtools-for-tabs. It enables launching of devtools for all the windows created automatically.
For linux
google-chrome --auto-open-devtools-for-tabs
For Mac
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
You can only open DevTools window via UI action or keyboard shortcut. There is no way to do this automatically.
How can I view HTML web storage in Chrome and Firefox?
try the inspector in Chrome.
Right Click Page > Inspect Element > Resources -> Local Storage
For Firefox use Firebug add-on. Open Firebug. Click on Console. On the command line type in:
localStorage
For development you can also edit local storage in Firebug using dot notation. For example:
localStorage.myVar = "hello"
localStorage.clear()
localStorage.removeItem("myVar")
In Firefox 19+ you can inspect localStorage directly from the console without Firebug:
inspect(localStorage)
This will pull up a panel displaying the key/value pairs
Firebug localStorage documentation
Install Firebug add-on
In Firefox the data is saved to the webappstore.sqlite in the FF profile folder. You can view it with the SQLite Manager, an addon for FF.
In Chrome pull down More Tools->Developer Tools. In the panel that appears click the Application tab. You will see LocalStorage in the subsequent menu. You can delete, Edit etc....