DevTools Tips

Console.log() for the web with logpoints

Using the console to log some information is a very common way to debug your JavaScript. But you can also log information in any web site using Logpoints in the sources panel.

Setting a logpoint in the sources tool.

Here's how to do it:

  1. In the Sources panel (or Debugger in Firefox), open a JavaScript file and right-click any line number.
  2. Select Add logpoint to open the editor
  3. In the editor, enter the JavaScript expression you'd like to log.
  4. Hit Enter to save and a badge shows on the line number.
  5. Go to the console, interact with the site and every time this line executes, you see the result of the logpoint expression.
  6. If you don't want to log information any longer, click the Logpoint again to remove it.

Logpoints are a way to inject a console.log() into any web site without editing its source code.

You can see this in action in this video on YouTube: