htmlacademy / console.js Goto Github PK

View Code? Open in Web Editor NEW

13.0 13.0 10.0 3.93 MB

http://htmlacademy.github.io/console.js/

JavaScript 79.27% HTML 14.33% Shell 0.92% SCSS 5.48%

console javascript js library logging web

console.js's People

Contributors

Stargazers

Watchers

Forkers

eliana15 lnked chel213 webbist-dev archakov06 mkotelnikov nohchi93 xana2287 irina-64

console.js's Issues

При подключении скрипта получаю ошибку

При подключении скрипта в демо, получаю ошибку.

STR:

Подключил скрипт:

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://htmlacademy.github.io/console.js/js/index.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.0.1/chai.min.js"></script>
</head>

Получил ошибку в консоли:

Uncaught Error: Console is not inited!
    at index.js:1
    at index.js:1
    at index.js:1

Добавить альтернативный рендер дерева для `plaintext`

Add ability to views to work throught frames & on showing frame.contentWindow/contentDocument

Too hard to configure settings

Currently I have to write too complex conditions to set up settings:

var settings = {
    object: {
      expandDepth: 1,
      showMethodBodyOnly: true,
      minFieldsToExpand: 1
    }
  };
  if (Array.isArray(window.jsConsolePresets)) {
    window.jsConsolePresets.push(settings);
  } else {
    window.jsConsolePresets = [settings];
  }

It would be great to get rid of this conditional, so the config would look like:

window.jsConsolePresets.config({
    object: {
      expandDepth: 1,
      showMethodBodyOnly: true,
      minFieldsToExpand: 1
    }
  });

Add collapse/expand element

Currently it's not clear what I have to do to expand structure or object, let's add some graphical element for expand/collapse. Like there:

Add ability to show methods expanded

Обобщить интерфейс работы консоли

На вход консоли — мы отдаём дерево объектов, а на выходе получаем на выбор:

html
plain/text
richtext

Добавить разные типы рендеров:

Это нужно для того чтобы внедрить консоль в courses-content

Отображение вложенных структур

После исполнения кода:

let a = [];
for(let i = 0; i < 5; i++) { a.push(a); }
console.log(a);

в консоли видим:

// пропущено
        [
          "...",
          "...",
          "...",
          "...",
        ],
        ,
      ]
    ]
  ],
  ,
]

Запятые «висящие в воздухе» выглядят странно.

Выпустить релиз и затестировать его на реальных демках из JavaScript Lvl 1 и Lvl 2

Скрывать stacktrace по умолчанию

По умолчанию stacktrace к ошибкам должен быть свёрнут

Script runtime exceptions

Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at console.value (index-silent.js:1)
    at print (851:4)
    at 851:7

Add ability to catch unhandledrejection from promise in Chrome, Safari and other supported browsers

https://caniuse.com/#search=unhandledrejection

Script load failure

Got an exception on load

Uncaught TypeError: t.extend is not a function
    at VM37 index-silent.js:1
    at VM37 index-silent.js:1
4index-silent.js:34 Uncaught TypeError: t.extend is not a function
    at VM37 index-silent.js:1
    at VM37 index-silent.js:1
    at b.value (main.min.16.js:13)
    at b.<anonymous> (main.min.16.js:13)
    at d.notifyAll (main.min.16.js:5)
    at e.close (main.min.16.js:5)
    at e.closeAll (main.min.16.js:5)
    at e.perform (main.min.16.js:5)
    at e.perform (main.min.16.js:5)
    at Object.y [as flushBatchedUpdates] (main.min.16.js:5)

Некорректное отображение значения ключей объекта

Столкнулись с некорректным отображение значения ключей при выводе с помощью console.log.
В свернутом виде свойства объекта перечисляются корректно, но если "развернуть" вывод свойств объекта, то значение теряется. Этот баг можно воспроизвести при удалении свойств объекта. Подробности на скринах.

Тримить отображение объектов

Если отобразить объект window, то получим нечитаемую кашу https://yadi.sk/i/eUHl_vcs3TeQpm

Надо сократить вывод содержимого объекта до 2-3 полей.

Invalid example in readme.md

This wouldn't work, since this context would be lost:

<script>
 var jsConsole = new Console(document.querySelector('.console-container'));
 console.log = jsConsole.log;
 console.log(123);
</script>

Also I would recommend to change example from:

<style> @import url('//htmlacademy.github.io/console.js/css/style.css'); </style>
<script src="//htmlacademy.github.io/console.js/js/index.js"></script>

<link href="//htmlacademy.github.io/console.js/css/style.css" rel="stylesheet">
<script src="//htmlacademy.github.io/console.js/js/index.js"></script>

Promise view

Add info about default available presets, examples and usages

Currently there is no info about default presets in Readme.md it would be great if I could copy and paste some good default presets and take a look what these presets are about.

[Новое поле конфтига] Автооткрывание объектов при присутствии внутри примитивных типов данных

@htmlacademy/javascript-authors, как думаете, полезно было бы добавить возможность конфигурировать консоль (новое поле), на основе того, есть ли внутри вьюхи примитивные объекты?

Например, в этой демке все объекты не раскрыты. (Да и зачем раскрывать массив, в котором 4 числа?)

Здесь хотим показать не только поля, но и методы прототипа

Здесь мы прям обязаны показать, что внутри объектов, поэтому открываем их. Нам не интересно видеть, что есть массив с 4-мя объектами, нужны подробности.

Хотя вот тут объекты открыты даже с учетом того, что там всего пара полей, и те — строки.

Вообще, нужно ли новое поле для настройки? Если да, то какие случаи лучше описать? Сделать это поле доступным только типу array? Или что-нибудь другое, может?

Женя говорил, что в 99% случаев у нас в демках одно и то же. Но, при переносе, я вижу другую ситуацию. Вроде одно, да не одно.

Возможно нужно просто оговорить свод правил, которые будут использоваться при написании (переписывании) демок. (хотя всякое бывает и везде есть исключения).

logHTML method

Hey, @zeckson, I’m currently working on adding this method and i have some questions.

Do we need not escape HTML only on 1 depth level? (console.log(“<strong>bold</strong>”);)

Or on other depth levels too?
console.log({str: “<strong>bold</strong>”});
If so, should not escape only in opened form or inside header too?

Неправильное отображение SyntaxError

Дан код:

const agentName;

agentName = '008';

console.log('Имя агента: ' + agentName);

Должен получить в консоли следующее сообщение:

Uncaught SyntaxError: Missing initializer in const declaration

Вместо этого вижу:

Error: [object Object]
    at Object.F.a.error (https://htmlacademy.github.io/console.js/js/index-silent.js:1:13848)
    at https://htmlacademy.github.io/console.js/js/index-silent.js:1:14813
    at Array.forEach ()
    at https://htmlacademy.github.io/console.js/js/index-silent.js:1:14785
    at https://htmlacademy.github.io/console.js/js/index-silent.js:1:14960
    at b.value (https://up.htmlacademy.ru/static/demojs/main.min.16.js:13:11937)
    at b. (https://up.htmlacademy.ru/static/demojs/main.min.16.js:13:9180)
    at d.notifyAll (https://up.htmlacademy.ru/static/demojs/main.min.16.js:5:4201)
    at e.close (https://up.htmlacademy.ru/static/demojs/main.min.16.js:5:2734)
    at e.closeAll (https://up.htmlacademy.ru/static/demojs/main.min.16.js:5:6542)

Add ability to configure view

I need ability for some demos to have objects expanded by default on some depth if there is more less than provided value of fields. It should look like:

var jsConsole = jsConsoleInit(document.querySelector('.console-container'), {
  autoExpandFields: 4, 
  autoExpandDepth: 2
});

Invalid expand configuration

I configured arrays with this autoexpand configuration:

{
      'array': {
        expandDepth: 2, // expand 2 levels
        maxFieldsInHead: 4,
      }
}

So I assumed it will expand only arrays smaller than 4 elements inside. But it's not.

Добавить min версии скриптов

Expanded view is too noisy

Given code:

const name = `Кекс`;

const expected = {
  name: name,
  meow: function () {
    return `Мяу!`;
  }
};

const actual = {
  name, 
  meow() {
    return `Мяу!`;
  }
};

console.log(expected);
console.log(actual);

Given settings:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="//htmlacademy.github.io/console.js/js/index-silent.js"></script>

</head>
<body>
  <script>  
  var settings = {
    object: {
      expandDepth: 1,
      showMethodBodyOnly: true,
      minFieldsToExpand: 1
    }
  };
  if (Array.isArray(window.jsConsolePresets)) {
    window.jsConsolePresets.push(settings);
  } else {
    window.jsConsolePresets = [settings];
  }
  </script>

</body>
</html>

In result I don't want to see extra field __proto__ and object header (see red squares on screenshot):

Добавить .DS_Store в .gitignore и удалить из репа

console.js/.gitignore

Line 9 in 4b6e107

out

Опубликовать пакет в npm и в демках интенсивов подключать из unpkg.com

Вместо колхоза с github pages использовать https://unpkg.com/ и подключать либу в демках интенсивов одним из следующих образов:

Подключит версию 1.последняя_минорная.x

<script src="https://unpkg.com/@htmlacademy/console-js@^1"

Подключит последнюю версию

<script src="https://unpkg.com/@htmlacademy/console-js"

@zeckson как думаешь? По-моему отличная идея

What does the first f mean?! Can we avoid it?
Why it's so strangely formatted. The closing brace is padded for some reason
Is it possible to collapse function body?