调试器中的console.log行号

Question

我正在寻找一种简单的方法来制作日志功能。

我正在调用函数logSuc("return from Prom")，该函数在第30行。

因此代码将始终指向该函数的第30行。在控制台中：

所以说有这段代码：

const logSuc = (msg) => {
   console.log(`%c ${msg}`, 'background: green; color: white; display: block;'); 
};

另一种选择可能是：

const log = console.log;
function red(msg) {
  return `%c ${msg}`, 'background: red; color: white; display: block;';
}
log(red('its red');

但现在我有两个功能，我想保持简短

问题是我的logSuc("") 始终指向第30行。

但我希望它指向行，我称之为logSuc（＆＃34;有效＆＃34;）。

Answer 1

我建议您将part of myLib; int _selected = 0; List<Widget> makeRadios() { List <Widget> list = new List <Widget>(); list.add(new Row( children: <Widget>[ new Radio(value: 0, groupValue: _selected, onChanged: (int value) { rOnChanged(value); }), new Text('Radio 0'), ], )); list.add(new Row( children: <Widget>[ new Radio(value: 1, groupValue: _selected, onChanged: (int value) { rOnChanged(value); }), new Text('Radio 1'), ], )); return list; }; void rOnChanged(int value){ this.setState(() { _selected = value; }); print("value: $value"); this._bodyHeight = (value == 1) ? 65.0 : 0.0; } 替换为console.log。这样你就可以看到来电的来源，从而解决你的问题。

Answer 2

使用Function.prototype.bind上的console.log获得的功能将指向调用它的行号。它有点受限，但是如果你只想传递一个字符串参数，它就会起作用：

const logSuc = console.log.bind(console, '%c %s',
    'background: green; color: white');

在Firefox和Chrome中都进行了测试。

对于更复杂的行为，您可以手动黑名单包含日志记录功能的脚本，如this answer for Chrome中所述，并激活Firefox中调试器中脚本上的“黑盒”按钮（{{1 ，一个眼睛图标）。