DevTools Tips: Snippets and live expressions

Sofia Emelianova
Sofia Emelianova
GitHub

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:

  • 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: