debug javascript function on chrome console

Question

Two Questions about debugging in chrome console :

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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

16

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 2, 2016 at 15:17

Kevin

2,9134 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

evolutionxbox Over a year ago

What is "press f11 twice" on OS X?

Charlie · Accepted Answer · 2019-09-24 06:43:14Z

9

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.

edited Sep 24, 2019 at 6:43

answered Jul 23, 2018 at 8:24

Charlie

24k12 gold badges65 silver badges96 bronze badges

5 Comments

Daniel Over a year ago

Where did you find New Script? There is just Open File

Charlie Over a year ago

Open File is in the hamburger menu of the Sources. content Scripts is hidden behind the double arrow.

TankorSmash Over a year ago

This is now under snippets, next to Scripts in the double arrow Sources menu

Chris Halcrow Over a year ago

When I tried this the breakpoints weren't hit - there must be some trick?

Charlie Over a year ago

Each time you run a snippet it runs in a separate vm. There should be a tab for the vm. You can set the break point there.

zjffun · Accepted Answer · 2019-11-29 10:17:19Z

5

Now you could use debug().

debug(say)

Console Utilities API Reference | Tools for Web Developers

answered Nov 29, 2019 at 10:17

zjffun

1,2419 silver badges8 bronze badges

1 Comment

Muhammad Umer Over a year ago

Amazing! Works. Next time function gets called it goes to debugger;

Daniel · Accepted Answer · 2019-02-08 16:06:39Z

3

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

answered Feb 8, 2019 at 16:06

Daniel

3,02728 silver badges22 bronze badges

Comments

Zohaib Jawaid · Accepted Answer · 2019-02-17 02:31:50Z

0

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

answered Feb 17, 2019 at 2:31

Zohaib Jawaid

1436 bronze badges

Comments

Sawood · Accepted Answer · 2019-08-03 10:01:35Z

0

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

edited Aug 3, 2019 at 10:01

answered Aug 3, 2019 at 9:52

Sawood

1088 bronze badges

Collectives™ on Stack Overflow

debug javascript function on chrome console

6 Answers 6

1.Someone may have a better solution. Try:

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.

1 Comment

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1.Someone may have a better solution. Try:

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.

1 Comment

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

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.