Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Joe Attardi
Joe Attardi

Posted on

     

In defense of the humble console.log

There is some negative sentiment out there about usingconsole.log for debugging. It's true that, in many cases, the browser's debugger is more powerful. However, there are still scenarios where usingconsole.log can be very useful.

Recently I was debugging a drag and drop issue. Some of my drop zones were not accepting drag overs or drops. Using breakpoints in the debugger would not really have worked here. I wanted to see debug information as I was dragging something. Imagine hitting a breakpoint on everydragenter ordragover event. It's not practical. The breakpoint would be triggered every time I move the mouse. I'd have to click the resume button, in which case I'd probably lose my active drag operation, or press the resume hotkey one-handed (remember, I am holding down
the left mouse button with my finger on one hand).

Instead I added someconsole.log statements to print information about the element being dragged over, whether it was a valid drop zone, etc. This produced a lot of log messages, but I still think it's easier than having execution paused every time I move the mouse.

console.log can be even more handy when using logpoints in third party code.

Logpoints: dynamically addingconsole.logs, even in third party code

Logpoints are a relatively new feature in Chrome and Firefox. They work similarly to breakpoints - you add them to a line of code. Except instead of pausing execution, they will simply log out some information. You can put logpoints anywhere, not just your own code. If you can see the code in the Sources panel, you can add a logpoint.

I haven't used logpoints in Firefox yet, but adding them in Chrome is simple. Open the code you want to add a logpoint to, and right-click on the line number. Select "Add logpoint...":

Then a box will appear where you can type the expression to log. This expression is formatted just like what you would pass to a call toconsole.log. You can log multiple values by separating them with a comma.

Now, whenever that line of code is hit, the configured log message will be printed out.

One last note

Whileconsole.log statements can be very useful with development and debugging, you should take them out before going to production.

Too many log messages can give curious users insight into the inner workings of the application. Errors should be displayed to the user in
the application's UI, not logged to the console.

An additional consideration: if there are lots of logging statements being executed, this can affect the performance of the application.

Further reading

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
hamid_lidrissi profile image
Hamid ABDELGHANI LIDRISSI
  • Joined

Thank you, very helpful

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Software engineer, author, blogger, lifelong learner.
  • Location
    Boston
  • Education
    BS Computer Science, UMass Lowell
  • Work
    Principal Software Engineer at Black Duck Software
  • Joined

More fromJoe Attardi

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp