Store as Global Variable

Совершенно случайно обнаружил в свежей версии Google Chrome полезную функцию: Store as Global Variable. Она позволяет сохранить любой объект из консоли в виде глобальной переменной. Пару версий хрома назад её ещё точно не было.

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

Или можно сделать что-нибудь с объектом во время исполнения. Всё зависит только от потребностей.

Happy Debugging!

Отладка событий в ExtJS/Sencha Touch

Иногда, когда пишешь приложение на Sencha Touch или Ext JS, очень нужно отследить порядок событий в различных компонентах и передаваемые в обработчики параметры. Зачастую это помогает лучше понять, что происходит и в самом фреймворке. Мне это тоже иногда необходимо, поэтому я написал небольшой миксин, который можно встраивать в свои компоненты.

Вариант для Sencha Touch:

Ext.define('Ext.debug.ShowEvents', {
    requires: ['Ext.mixin.Observable'],

    onClassMixedIn: function (cls) {
        cls.prototype.fireEvent = function () {
            console.log.apply(console, arguments);
            Ext.mixin.Observable.prototype.fireEvent.apply(this, arguments);
        };
    }
});

Вариант для Ext JS:

Ext.define('Ext.debug.ShowEvents', {
    requires: ['Ext.util.Observable'],

    onClassMixedIn: function (cls) {
        cls.prototype.fireEvent = function () {
            console.log.apply(console, arguments);
            Ext.util.Observable.prototype.fireEvent.apply(this, arguments);
        };
    }
});

Не забудьте указать фреймворку, где этот файл лежит. Использовать его нужно приблизительно так:

Ext.define('App.view.MyComponent', {
    extend: 'Ext.Component', 
    mixins: ['Ext.debug.ShowEvents'],

    ...
});

Вместо Ext.Component подойдет любой класс с Ext.mixin.Observable (Ext.util.Observable для Ext JS). Теперь в консоли вы увидите все события, которые генерирует этот класс.

Если что-то непонятно, можно спросить в комментариях.