Skip to content
0:00 / 0:00

#chromedevtools#javascriptsnippets

Snippets and live expressions #DevToolsTips

Chrome for Developers

822K subscribers • 20 videos on Hallway

YouTube
  • Recommended by 1 person: 1 on Stack Overflow and its sister sites.
  • Presented by Jecelyn Yeen, Developer Advocate at Google
  • Made by the vendor. The company whose product it covers made or sponsored it.

Beginner. No background in the topic needed.

23K views3 years ago1 recommendation

Web developmentTools and practiceHow browsers workDebugging

Jecelyn Yeen explains how to use snippets and live expressions in Chrome DevTools to speed up debugging and run code repeatedly.

Are you running the same code repeatedly during debugging? Learn how to use snippets and live expressions to speed them up! Chapters: Intro Create a snippet. 3 ways to run a snippet in the Snippets pane Run a snippet anywhere in DevTools Web Performance snippets 2 ways to pass in parameters to a snippet Using console utilities in snippets Live expressions Resources: Check out → goo.gle/devtools-snippets Learn more → goo.gle/devtools-live-expressions Console utilities API → goo.gle/devtools-console-utils Web performance snippets → goo.gle/45QyHgP Questions? Tweet to us: Jecelyn Yeen → goo.gle/jecfish Chrome DevTools → goo.gle/chromedevtools Catch more DevTools Tips → goo.gle/DevToolsTips Subscribe to Google Chrome Developers → goo.gle/ChromeDevs #DevToolsTips

Why it's here

1 person recommends this

What people say. Recommended as a guide on how to create, run, and debug JavaScript snippets within Chrome Developer Tools.

Stefanon Stack Overflow • Recommends

On “Run javascript file from the workspace in chrome developer tools”

A useful alternative to running a file from the workspace might be to run a snippet : Sources => >> => Snippets + New snippet Snippets can also be started with (also supports debugging): Ctrl+Enter Run button in the footer: Command palette: Ctr+O => !{name of snippet}: Unfortunately, those snippets are not simply stored as files in a preference folder. Therefore, creating a backup of many snippets might be tricky. Single snippets can be exported with "Save as..." option. Related: https://developer.chrome.com/docs/devtools/javascript/snippets/ link to this video Which file does Snippets of Chrome Dev Tool saved at? Cannot open File as Chrome Snippet