API консоли Javascript

[@Lovesuper]

Это пять:)

[@andrewiWD]

С плюсом

[@titulusdesiderio]

счастлив вам сообщить, что уже нет!

[@GreatRash]

Результаты голосования радуют :) Сам пользуюсь только console.log с куском кода который проверяет доступен ли объект console.

При учёте, что уже более 600 просмотров… Есть мнение, что форма голосования не заметна в потоке инфы.

[@TheShock]

Я использую свою console-cap
Когда пишешь обёртку важно несколько вещей:
1. Когда в логе появляется сообщение — строка должна указывать не на обёртку, а на место, где вызвана функция
2. Обёртка должна спасать браузеры, в которых нету console.*
3. Должна быть лёгкая и быстрая возможность передать функцию как коллбек

element.onclick = console.log

4. Может ещё что, не помню точно)

[@Anonym]

А logLevel так и не добавил )

[@TheShock]

Извини, я как-то не могу понять, насколько оно вписывается в либу.
С одной стороны функциональность интересна и может пригодиться
С другой — она нужна слишком редко и не хотелось бы переутяжелять библиотеку, а оставить её максимально простой.
Пока решил оставить пул-реквест открытым, чтобы если кому-то понадобится на твою версию могли выйти и посмотреть другие комментарии, если появятся)

[@Anonym]

Вот пара примеров использования:
1. В dev окружении в консоль выводятся все сообщения. В production — только ошибки. Один параметр при сборке.
2. Нужно посмотреть только debug (или только info) сообщения, логи не нужны.

[@TheShock]

Вообще с идеей я согласен, не спорю =)

[@spmbt]

У меня этот уровень появился, потому что в одном проекте уже был вывод по разным методам. Сразу возникла мысль, а почему бы не просто отключать или оставлять error для продакшна, а ввести число — уровень подробности логов? Одно число решает сразу 3 задачи: 1) полное отключение, 2) только ошибки, 3) разные уровни подробности логов.

Ещё изощрённее и при этом понятнее для преемника — это описывать подробность логов списком функций, пропускаемых на вывод. Тогда это — то, же, что число, но +самодокументируемо и +возможность выбирать произвольное множество выводов. (Но всё равно, впрок лучше не писать, только под реальную задачу.)

[@spmbt]

> строка должна указывать не на обёртку, а на место
интересно, как это сделать в Хроме, особенно не для console.error? Я бы пользовался. Эту информацию (строку первого уровня стека вызовов) даёт Firefox в свойстве .line. Хром, сколько ни искал, ничего такого не даёт.

> 3. element.onclick = console.log
Это я читал у Вас в статье, но как-то так и не понял, а как же аргументы? Нужно уметь передавать не функцию, а функцию с аргументами.

[@Anonym]

> интересно, как это сделать в Хроме
Посмотрите console-cap, увидите, как это сделать в хроме.

> а как же аргументы?
А какие аргументы вы ждете в onclick? Event придет, console.log его выведет.

[@spmbt]

1) посмотрел. Написано всё понятно, мне, действительно, нужно поучиться так писать. Но «решение» основано на том, что подмены функции для Хрома не происходит (выполняется bind(console, console.log) ). Это не решение, которое мне нужно.
2) я жду произвольные аргументы, заданные мной. Выводить на онклик объект event — это даже не полдела, которое обычно нужно. Нужно вывести иили часть ивента, которую надо видеть в логе, или сопутствующий контент типа объекта не из event или результат выражения (скажем, геометрические вычисления, рассояние до точки, и т.д.).

[@Anonym]

1. Не совсем тогда понимаю, что вам нужно. Определите свои методы, в них используйте стандартную console. Всё будет работать.
2. А кто мешает написать в вашем случае не element.onclick = console.log, а

element.onclick = funciton(e) { console.log(e.someData, myObject, function() { ... }()) }

[@TheShock]

Это не решение, которое мне нужно.

Интересно, а в чём видите недостаток данного решения?

2) я жду произвольные аргументы, заданные мной. Выводить на онклик объект event — это даже не полдела, которое обычно нужно. Нужно вывести иили часть ивента, которую надо видеть в логе, или сопутствующий контент типа объекта не из event или результат выражения (скажем, геометрические вычисления, рассояние до точки, и т.д.).

Ну это да, тут можно расширять. Самый просто вариаант — быстро повесить лог, проверить работает ли вообще.

element.onclick = console.log

Нужно добавить какую-то метку или результат вычислений? Запросто:

element1.onclick = console.log.bind(null, 'el-first')
element2.onclick = console.log.bind(null, 'el-second')

На крайняк — всегда можно записать полный вариант:

element1.onclick = function (e) {
  console.log(e.target);
}

[@spmbt]

Интересно, а в чём видите недостаток данного решения?

Нет, если имя можно сменить, а перехода на новый уровень стека не произойдёт и будет отражаться нужная строка — то то, что нужно. Не знаю, как ведёт себя bind в этом плане, позже познакомлюсь, и тогда уже поправлю свои коды — это довольно сильный недостаток.

2) в jsfiddle в тест дописал

document.body.onclick = wcl;

— работает, выводит ссылку на event. Байнды — да, это первое, что приходит на ум. Но в Вашей статье писалось про возможные проблемы именно с присваиванием «голой» функции (проверил — в fiddle.net, действительно, присваивание онклику console.log не срабатывает и ошибки не выводит. Никогда не пытался так делать, поэтому не стал тогда разбираться в сути проблем. Ну да ладно).

[@TheShock]

Нет, если имя можно сменить, а перехода на новый уровень стека не произойдёт и будет отражаться нужная строка — то то, что нужно

Да. Можно написать

wcl = console.log.bind( console )

Только в браузерах, где нету bind будет работать некорректно — IE8- и древние оперы.

[@TheShock]

интересно, как это сделать в Хроме

Что в Хроме что в Фоксе — одинаково, при помощи бинд)

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

myLog(1, 2, 3); // correct line in chrome and firefox

[@TheShock]

Эти функции предлагается класть сразу в глобальный объект. Это не будет засорять пространство глобального объекта, потому что на продакшене их можно при желании выкусить из кодов проекта. А применение экономит не менее 2 символов или больше, чем если бы они были в объекте (типа C.log, C.err,...).

Это глупость, извините. Во-первых, мы не засоряем глобальный объект не для продакшена, а для нас, для кода. Названия должны быть не короткими, а понятными и читабельными. Когда кто-то заходит и читает в коде:

console.log( variable )

То он сразу понимает, что это. Если же я бы прочитал

wcl( variable )

Я бы прифигел.

Ваш код (в месте «свернём вброс кода, похожего на прежний») весь из-за таких сокращений похож на обфусцированный. «Вы программист, а не обфускатор».

apT? cl? consAI? conCA? Да вы, блин, издеваетесь? Если первые два я ещё догадался, что это appendTo и Class в силу контекста, но что такие consAI? Console Artificial Intelligence? А т.к. con уже без s — это видимо другое слово? Предполагаю, что conCA — это «Consortium of Cocaine Anonymous».

Если не хотите, чтобы ваши коллеги проклинали вас — пишите код красивый и понятный, а не короткий, честное слово.

[@spmbt]

С этим, конечно, можно спорить, особенно, видя Ваше пристрастие к формулировке «console.log» в цитируемой статье. Тут я приведу контрпример: человек видит «console.log()» в коде, но офигевает оттого, что он работает там, где не дложен. Или console.time() в IE, для примера. В том и в другом случае он должен заглядывать в определение, но в первом случае (wcl()) он точно знает, что это — не консоль-лог, во втором — бежит знакомиться после смутных догадок.

А насчёт коротких формулировок — они потому и короткие, потому что часто используются — раз. Имена вида consAI — это следствие моей системы именования временных переменных — два. Она мне сразу подсказывает, что аргумент есть consA[i], где consA — массив. Это — лучше, чем писать аргумент своим выдуманным словом типа elements или items или даже itemsOfConsoleArray. Всё равно придётся разбираться, что за items, что за Array. Но я не настаиваю. Каждый выбирает то, что ему удобнее, а я не случайно за пару лет пришёл к такой системе.

[@andrewiWD]

Не работает под IE? Почему бы в этом случае не определить свой console обьект?
If ( typeof ( console ) == 'undefined' ) { var console = { ... } }

Насчёт наименований, вынужден с вами не согласиться. Сокращения, тем более короткие и не принятые глобально — это не понятно никому, кроме вас. Если вы всегда разрабатываете один, редактируете свой же код тоже сами — то это конечно ваше личное дело. Но как только другой разработчик начинает читать ваш код — он будет в ступоре.

Представьте, вас попросили, как знакомого программиста, убрать с сайта ошибку в консоли «ReferenceError: ec is not defined». Вы открываете код, нужную строчку и видите:

gc: function( str ) {

	var v = this.dgc();
	var st = v.indexOf( " " + str + "=" );
	if ( st == -1 ) {
		st = v.indexOf( str + "=" );
	}
	if ( st == -1 ) {
		v = null;
	} else {
		st = v.indexOf( "=", st ) + 1;
		var e = v.indexOf( ";", st );
		if ( ec == -1 ) {
			ec = v.length;
		}
		v = unescape( v.substring( st, e ) );
	}
	return v;
},

О чём код? Ошибку нашли? Что он делает? Где его проверить?

[@TheShock]

Вижу, что вместо ec надо написать e, но вот что делает код осталось для меня загадкой.

[@spmbt]

Критика совершенно понятна, но это просто тема отдельной статьи. Здесь, в комментариях, совершенно невыгодно что-то доказывать по простейшей причине — для каждого читателя wcl — слово новое, для меня десятки раз на проект встречающееся. Не считаю, что вправе писать myConsoleLog для всех, если я использую wcl — тут «хук» TheShock -a совершенно профессиональный и безошибочный. Те, кто будет применять myConsoleLog, будет изнывать от многословия, если, конечно, имеют дело с большими проектами и не всегда пользуются автопродлением строк.

Пример, который Вы привели — не из той оперы. В куске кода — все переменные — короткие. С такими приходится бороться, переименовывать, давая понятные имена. Но, как ни странно, wcl к ним не относится, потому что их — много. Когда у Вас в проекте их будет много, всё встанет на свои места.

[@unknown_door]

я активно использую debugger; там, где надо вручную поставить точку остановки в коде. просто в коде пишите debugger; и хром остановится на указанном месте

[@StreetStrider]

Пишу кастомную консоль для ноды. С форматированием, стилями, префиксами и разными дополнительными штуками. github: console-ultimate.
Основная цель: реализовать совместимую со стандартной консоль, которая будет иметь ряд дополнительных фич, какие есть в API консоли браузера.

Из дополнительных фич:
* Тайминги с возможностью возврата в переменную.
* Тайминги с использованием hi-res таймера process.hrtime.
* Счётчики count.
* Базовые фичи, копирующие по функциям стандартную консоль: log, info, warn, error. Дополнительно цвета, префиксы, выбор потока, куда выводить.
* Очистка консоли.

Планирую реализовать:
* Некое подобие групп (group, groupEnd): вывод будет обводиться рамками.
* Таблицы.
* Улучшенные стек-трейсы: асинхронные хопы в стеке и улучшенное форматирование.

[@spmbt]

Ещё больше возможностей даст удалённая консоль в браузере. Тогда и группы можно сделать полноценно, и таблицы не псевдографикой. Есть ли аналоги такому подходу?

[@StreetStrider]

Такой возможности нет, но я, пожалуй, это запишу. Надо проверить как можно интегрироваться с node-inspector. Ещё вместо удалённой консоли можно использовать repl, который доступен извне, по сокету.