CODEWITHSUNDEEP
javascriptgoogle-chrome
dudi du
dudi du

Reputation: 131

debug javascript function on chrome console

Two Questions about debugging in chrome console :

  1. How can I debug function that I am writing directly in the chrome console on the fly ? for example 
function say(){
console.log("hello");
console.log("test");
}

I want to set breakpoints,etc..

And how can I do a tab in a console for indention?

Thank you.

Upvotes: 13

Views: 9653

Answers (6)

zjffun
zjffun

Reputation: 1243

Now you could use debug(). 

debug(say)

Console Utilities API Reference  |  Tools for Web Developers

Upvotes: 5

Charlie
Charlie

Reputation: 23858

Now you can write functions and debug them in Chrome console directly.

**Chrome Dev Tools -> Sources -> Snippets

You can write any code there, set breakpoints and hit Ctrl + Enter to run it.

Upvotes: 8

Sawood
Sawood

Reputation: 108

You can try this trick, navigate to the following

Chrome Dev Tools -> Sources -> Snippet -> New snippet

Give it a name to the snippet, And add the script in the editor (right side panel) then save it with CTRL + S.

Now that your snippet is added, you can right click on the newly added snippet and click on -> Run

Add the breakpoint and call the method, once debugging is done you can remove the snippet, Incase, if you have trouble creating Snippet check this link

Upvotes: 0

Zohaib Jawaid
Zohaib Jawaid

Reputation: 143

Snippet can also be used for this purpose. Though snippets are shared across pages and run from the context of current open page but can be used for this purpose as well.

https://developers.google.com/web/tools/chrome-devtools/snippets

Upvotes: 0

Daniel
Daniel

Reputation: 2998

Just to complement the given answer by Kevin, here is the deal:

the command debugger; will trigger the PAUSE into debugger sources window.

You may change your function to 

function say(){
  debugger;
  console.log("hello");
  console.log("test");
}

and next time you execute the function say() it will pause at the beginning.

You may also type debugger;say(); in the console because it will pause before calling the function say() but you have to press F11 to Setp Into The Next Function

Upvotes: 3

Kevin
Kevin

Reputation: 2893

1.Someone may have a better solution. Try:

debugger;say()

in your console, and then press F11 twice, you will be navigated to a VMxxxx tab, you can add breakpoints there and it will be kept.

i.e. next time you run say() in the console, the breakpoint will be triggered.

2.I haven't figured out a way to do it either, but you may try Shift+Enter to open a new line and ident with spaces, or copy a "tab" from somewhere else (a text editor) and paste it in chrome.

Upvotes: 16

Related Questions