How to view the HTML web storage in Chrome and Firefox - html

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....

Related

Is it possible to create URL that links to a location in the Chrome DevTools?

While in dev-mode in my application, I would like to be able to have links on the page that automatically take me to a specific file in the Chrome Dev Tools.
Is there any way to generate a URL that when clicked in Chrome, opens the Dev Tools at the Sources tab and at the desired file ?
You are able to "inspect the inspector": How do you inspect the web inspector in Chrome?
Simply undock it, then inspect DevTools itself with ctrl+shift+i. Then head on over to the sources tab in original (first DevTools), inspect it, and get its URI from Elements.
Or use chrome://inspect/#other
Example URI (first part only):
devtools://devtools/bundled/toolbox.html?remoteBase=https://chrome-devtools-frontend.appspot.com/ser…
Your requirement is somewhat specific, so I don't think it is possible (at least not natively).
You probably can achieve what you want extending DevTools with an Extension (see the documentation). This way, you can make your page interact with the extension to make it open a specific panel in Chrome Dev Tools.

PDF-files on server will not open when link is clicked in browser

I've got a pdf on the network server that I'd like to view it in my browser. I do NOT want to download the pdf to view it.
I have the following link:
Click me!
It works and opens perfectly in Chrome, yay! (although it seems like it's only working when I'm logged on using my google-account)
When I click the link in Firefox, nothing happens, less yay...
If I, in Firefox, right-click the link, choose "Copy Link Location" and paste the link into the address field, it opens the pdf just fine.
I've tried using zero and up to 6 of those pesky / after file: just for making sure... I was desperate...
The plug-in for Acrobat Reader is up to date.
The reason for this not working is because of the security feature not allowing cross-usage of the protocols http:// and file://.
To solve this in Chrome, download a plugin called LocalLinks (link).
For Firefox, there is currently no solution afaik.
For Safari (versions 6+), you could possibly activate the Develop-menu for safari (open preferences, choose advanced and then check the box for "Show develop menu in menu bar") and then enable the option "Disable Local File Restriction". However, this is an untested solution.

firefox equivalent of chrome inspector Resources tab

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

Viewing local storage contents on IE

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

In Chrome, how can I see what AJAX requests are being made?

In Chrome, how can I see what AJAX requests are being made?
In Firefox I use Firebug and I can see any background AJAX request that are made.
Open the developer tools with Ctrl-Shift-i, or via the menu at Wrench/Tools/Developer tools:
Click on the Network Tab:
Click on the "XHR" link at the bottom of the list to filter the results to only AJAX requests:
Click on a request at the left to select it and use the "Headers", "Content", "Cookies" and "Timing" tabs for that request to see more details:
You can use the button in the bottom left of the tools to open the tools in their own window if you like.
Here's what works for me on Linux and Windows 10:
F12 to open developer tools
click on the network tab on the top
list,
select XHR (it's circled in image below)
you can also use liveHTTPHeader, a chrome/firefox extension. it works pretty well.
In new Chrome browsers you can press F12 key or CTRL+SHIFT+I key combinations to view the Developer Tools. From there AJAX/XHR calls can be viewed through Network tab.