CODEWITHSUNDEEP
javascriptgoogle-chromeconsolegoogle-chrome-devtools
Ta946
Ta946

Reputation: 1412

Can youstep through a function created in chrome dev tools (console)?

You can step through and edit some code in a js file using chrome's dev tools.

You can also add and run a function in dev tools simply by entering it into the console.

If you enter invalid code like below, console will throw an error and create a VM### file with that code, and tell you which line the error occurs.

function a() {
  console.log(v);
}

Uncaught ReferenceError: v is not defined
at a (<anonymous>:2:15)
a @ VM243:2

if you click on VM243:2, it will take you to the VM file and you can step through the code there, but it doesn't allow you to edit it (whereas, with a js file, you can edit it)

Is it possible to manually create a VM file with your code that you can edit so that you can test and step through your code quickly in console?

or if I'm going about this the wrong way, is there an easy way to step through your code? (add a js file to chrome and execute functions somehow)

Upvotes: 2

Views: 1181

Answers (2)

Sancarn
Sancarn

Reputation: 2824

Yes you can:

function a() {
  debugger
  console.log(v);
}

debugger creates a break point in your code. From here you can step through your code with ease.

Upvotes: 2

Matt Zeunert
Matt Zeunert

Reputation: 16561

You can create a snippet to do that.

It look like by default exceptions that occur in snippets are caught, although they still appear in the console. However, you can enable "break on caught exceptions" to pause in the snippet.

DevTools Snippets

Upvotes: 2

Related Questions