DevTools Tips: Snippets and live expressions

Use Snippets in DevTools to run code you frequently use and live expression to watch JavaScript values in real time.

Watch the video to learn how to:

• Create a snippet or open the Snippets pane:

  • With the Command Menu
  • In Sources > Snippets.

• Run your new snippet:

  • With the Command / Control + Enter shortcut in Sources
  • From the Command Menu using !.

• Pass values to your snippet:

  1. Pause it with a breakpoint.
  2. Set values in the Sources > Scope pane.
  3. Resume execution.

• Execute snippets from the Console: load them as global functions and run once.

• Use Console Utilities API in your snippets.

• Use Console > Live Expressions:

  • To execute a piece of code you want to run repeatedly, for example, during a debugging session.
  • Watch how the values change during execution in real time.

To learn more, see:

• Run commands in the Command Menu
• Run snippets of JavaScript
• Console Utilities API reference
• Watch JavaScript values in real time with Live Expressions