Devtools Code Snippets and its benefit

Devtools Code Snippets and its benefit

  1. Snippet:

    • Snippets are small scripting feature that allows you to execute within the sources panel of Chrome Developer tools.
    • It executes from the context of the currently opened page.
    • Can access and run them from any page.
    • Firefox has scratchpad editor and Chrome has snippets feature for this.
  2. How to run snippet: (There are three ways to run your snippet)
    • Right-click on the snippet filename from the left side snippet list and select Run.
    • Click the Run button. 
    • Press Command + Enter (For Mac) or Ctrl + Enter (For Windows, Linux).
  3. Why use snippets:
    • If you find yourself using some codes repeatedly on multiple pages then consider saving those scripts as snippets.
    • An alternative to bookmarklet:
      Problem with bookmarklets is that you need to use a generator to convert a js file into a bookmarklet, pain to make changes to a long single line of JavaScript inside of your bookmark manager, create and share those, show it on bookmarks bar on UI, run it and sometimes even open the dev tools to see if it really worked.But Snippets, on the other hand, are a much better way to handle this problem.
    • An alternative to console command:
      When using console command, sometimes we loose our unexecuted codes while using arrow up/down key for code correction because if the arrow is on the top of the code then pressing it again mistakenly displays the previously executed code and we end up losing our current unexecuted long multiline codes.But with Snippets, we can avoid above issue and also save the code as a file inside dev tool which we can use later when required. We can also save it externally to a known place on the disk as a backup to use it later.
    • Run part of the code:
      You can select portion of your code inside Snippets and run that particular portion of the code instead of executing all codes written in there.
    •  Breakpoint for debugging:
      It allows setting breakpoints in the codes for debugging on execution similarly the way you debug all other loaded js codes in your project.

So this is some basic cum advance detail about Snippet feature of developer toolbar and its benefit. I hope after reading this, it will help you write better and faster code during development.

Happy coding!!!

Support us!

If you like this site please help and make click on any of these buttons!



Mangal Pawar is the Head of Customer Engagement & Delivery for US at Kalpavruksh. He has extensively worked with clients in establishing and growing their outsourced setups, and ensuring that the setups become effective & productive for their businesses. Having worked with companies like eConnect India and Infosys — the much celebrated Indian MNC that worked its way to the NASDAQ — Mangal’s rich experience in customer engagement and delivery isn’t an accident. It’s been worked to the bone and chiselled to finesse…! He is currently responsible for engaging with and facilitating growth of our US customers, by leveraging our unique & innovative engagement model.

 +1 (201) 699 6908



Trond Skundberg is a digital advisor specializing in India outsourcing and conceptualization for digital entrepreneurs. Trond is visionary and execution specialist, rolled into one. He is the board member of the Norway India Chamber of Commerce and Industry and the CEO of Skundberg Limited. He’s been on the board for many other companies such as Devant Digital Media, Zett Interactive, and blogs at MyFantastic India . Trond is a big-picture visionary, a serial entrepreneur, and a passionate enthusiast on technology.

 +47 97 025 025



Neils Ahlmann-Ohlsen has been on continuous love affair with India ever since he started a production company in Pune circa 1978. He worked as a consultant for the former Daimler Chrysler Aerospace AG, Noxitest AG, and B & W Energy A/S since the year 2005. Neils also worked in the capacity of a European Director of PCS Technology Ltd, the company co-founders of Kalpavruksh Technologies were associated with. Neils, however, has more to him than just work. He is best known in Denmark for his political work with 17 years as a conservative MP. Neils is also the chairman of the Indian forum in Denmark and also for the board of Lotek A/S.



Martin Dommerby is the Managing Director of Kalpavruksh Technologies, and a sales person at heart. Having worked (and continues to) as a board member on many innovative and technology companies, he is the harbinger of hope where business meets technology. Martin is a believer in the human cloud. While he is the epitome of success himself, his vision for a free, open, and borderless world where work is just a click away drives him to be a staunch advocate of outsourcing. As an able manager, he brings the best people have to offer to the advantage of his company’s global clientele.

 +45 2624 6462



Michael Friang Jensen is our Digital Project Manager at Kalpavruksh in Denmark. Specializing in technology and business, digital concepts, Michael is adept at handling strategic business applications of commerce, marketing, and project management. Michael bring concepts to digital format, manage projects efficiently, deal with a global workforce of distributed talent, and has his pulse on the ever-changing opportunities in digital media.

 +45 2728 8404