🖥 TECH >> Chrome Dev-tools Snippets & IndexedDB - It’s a piece of cake!
I don’t know if anyone has noticed the wonderful feature of snippets available in Chrome Dev-tools. Or, is it just me? Oh!…My!…God! (Just how Janice from ‘Friends’ would say).
I may be late to the party, but I am getting a little obsessed with the richness of snippets, especially while testing my web app with dummy data. So, here are a few things I want to share with you all, that’d come useful when one is trying to manipulate IndexedDB in real-time.
Snippets are little pieces of JS code that one can write and save in Chrome browser. It can do several things. I am going to give a brief explanation on how it can be availed to communicate with IndexedDB. I expect the readers to have a minimum understanding of IndexedDB.
Snippets can be found in the Sources tab in Chrome Dev-tools. It is located inside the left sidebar there.
I have created a couple of snippets already. And for the purpose of this tutorial let’s create a new one.
That’s our new Snippet highlighted in blue. Now, what we are gonna do is to add some code for initialising a DB and a store inside.
I have created a DB with name gautam and store routine . Snippets can be executed on the fly by right clicking on it and hitting the run option as shown in the image. After running, check the console to see the result. Then, go to the Application tab of Dev-tools to check if DB is created. If not hit refresh option by right-clicking on IndexedDB option in the side-abr.
See, the console also prints a part of the JS code too. From the sidebar you can see the new DB and the store. And chrome will save your snippet as long as you want it to be. I have created some more snippets to populate data into the store and then retrieve it.
