He lists some limitations as well including that you “cannot pass any arguments to a code snippet”, so the code may need to be modified to be useful. Libraries available to the current page are also available in snippets. You can use debugging tools like breakpoints on snippets just like you can with other Javascript code. To summarize a few, snippets can also be used to debug code from a larger application or program. Gleb Bahmutov has a great blog post listing some features of Code Snippets which ive included here ( ). It returns all of the colors used on the page in a nice organized list in the console. Try some that may be useful for you and add them to your own library of snippets! One example of this is the allcolors.js. Brian Grimstead is a developer that maintains a list of some helpful snippets which can be found here ( ). ( ) So you can run a specific snippet that will give you information back about the current web page you are visiting or working on. Rather than typing right into the console you can use snippets to store code snippets and run them multiple times.Īnother advantage to using snippets, as Christian Nwamba says in his blog post 6 Snippets to Keep in Your Chrome DevTools, “when you run a snippet, it executes from the context of the currently open page”. Great, we have this tool to use! So when might we actually utilize snippets? One use for snippets is when you want to save one or more bits of code that you might run in the console repeatedly during development. Type your code and hit the play at the bottom to run your code.Ĭonsole.logs are helpful to see your code results in the console. Open a new Snippet or utilize an existing one. You can expand the navigation menu to the left by clicking here:Īt the top of the Sources navigator, click the sideways arrows for more options and select Snippets. You can do this by right clicking and selecting Inspect in the drop down menu, or use shortcut Command + Option + J on Mac or Ctrl + Shift + J on Windows. Open a Google Chrome tab and open the Chrome DevTools.
#Snippets tool how to
Let’s look at how to access our snippets tool. You can write your own snippets or find useful code snippets published online. It allows a developer to code, save, debug, and store pieces of code for repeated use.
Snippets is part of the Google Chrome DevTools included on the Sources tab.
0 kommentar(er)
