CODEWITHSUNDEEP
javascriptgoogle-chromeconsoleshortcut
pimvdb
pimvdb

Reputation: 154908

Create shortcut to console.log() in Chrome

Because I'm lazy, I created a function log that basically is just an abbreviation of console.log:

function log() {
  console.log.apply(console, arguments);
}

Whenever I call this, I see the logged item in Google Chrome's Developer Tools, with on the right hand side the line number where the item was logged. However, this line number is always the same, because the actual console.log call is located at one specific place in the code (namely where I declare the log function as above).

What I also tried is just:

var log = console.log;

but this always throws an error: Illegal invocation. Weird, but I guess that's not a possibility.

How can I make a shortcut to console.log, with Developer Tools showing the line number where log was called, rather than where the actual console.log call is located?

Upvotes: 30

Views: 10694

Answers (4)

UserSud
UserSud

Reputation: 21

In my case I've set up an AutoHotKey shortcut with Ctrl + Alt + L as below:

^!l::Send console.log();{Left}{Left}

The good thing is it brings the cursor back inside the brackets for quick typing.

Upvotes: 2

Alexandre Demelas
Alexandre Demelas

Reputation: 4700

I just created a module to do that.

Check out: https://github.com/ahlechandre/consl

Install

npm install consl --save-dev

Usage

const { cl } = require('consl');

cl('Outputs a message on the Console using a quick');

Upvotes: 5

pimvdb
pimvdb

Reputation: 154908

When I reported it, it was refused but the answer was simple - create the shortcut like this:

var log = console.log.bind(console);

This doesn't leave out the line number, whilst you can call it like log(...).

Upvotes: 75

KooiInc
KooiInc

Reputation: 122956

Tried a few things, but I don't think you can do this. As soon as you wrap console.log, the line nr will be the line where this wrap is to be found in the code. I suppose we have to live with that then?

Upvotes: 1

Related Questions