That’s what we all have been waiting for ages
Tag Archives: debug
How to catch Angular ui-router resolve errors
It’s more than annoying to have just a blank page and no errors in console when your issue is inside ui-router resolve. Finally I found a pretty nice solution, don’t know why it’s not provided “from the box”. In case of error ui-router sends specific event $stateChangeError that we could listen for:
[javascript]
$rootScope.$on(‘$stateChangeError’, function(event, toState, toParams, fromState, fromParams, error){
console.error(error);
});
[/javascript]
and now wow! we have an exact error in console and no need to guess what’s wrong with your code anymore.
ui-router debug snippet
found nice code snippet that could help you to debug ui-router issues by loggin router events in console:
[javascript]
// Credits: Adam`s answer in http://stackoverflow.com/a/20786262/69362
var $rootScope = angular.element(document.querySelectorAll(‘[ui-view]’)[0]).injector().get(‘$rootScope’);
$rootScope.$on(‘$stateChangeStart’,function(event, toState, toParams, fromState, fromParams){
console.log(‘$stateChangeStart to ‘+toState.to+’- fired when the transition begins. toState,toParams : \n’,toState, toParams);
});
$rootScope.$on(‘$stateChangeError’,function(event, toState, toParams, fromState, fromParams){
console.log(‘$stateChangeError – fired when an error occurs during transition.’);
console.log(arguments);
});
$rootScope.$on(‘$stateChangeSuccess’,function(event, toState, toParams, fromState, fromParams){
console.log(‘$stateChangeSuccess to ‘+toState.name+’- fired once the state transition is complete.’);
});
$rootScope.$on(‘$viewContentLoaded’,function(event){
console.log(‘$viewContentLoaded – fired after dom rendered’,event);
});
$rootScope.$on(‘$stateNotFound’,function(event, unfoundState, fromState, fromParams){
console.log(‘$stateNotFound ‘+unfoundState.to+’ – fired when a state cannot be found by its name.’);
console.log(unfoundState, fromState, fromParams);
});
[/javascript]
if you have you Angular app root on html element you can simply use:
[javascript]
var $rootScope = angular.element(document).scope();
[/javascript]
code is placed here.
Editing breakpoints in Chrome devtools
Suddenly found out that Chrome has possibility to “edit breakpoint” or other words – to add extra behaviour for it: like stop only for special condition, output console.log, etc.
Blackbox JavaScript Source Files
Probably you already know that Chrome now allows to put script source file to blackbox (or simply to ignore it during debug). It helps to avoid jumping inside 3rd party library and debugging it instead of focusing on own code.
Все для обработки JavaScript error в проекте
Решил сделать что-то типа TODO списка “Что необходимо сделать для красивой обработки ошибок JavaScript в проекте”.
- своя обертка-заглушка на объект console
- отправка ошибок на сервер
- переопределение обработчика window.onerror
- создание своих классов ошибок
- классификация ошибок
- красивый вывод
- режим отладки
Более подробно о каждом под катом.
Отправка логов php на почту.
При отладке какого-либо скрипта часто возникает необходимость прослеживать по логам состояние/значение переменных, вхождение в блоки условий и т.д. Есть множество различных способов ведения логов и их дальнейшего разбора. Я бы хотел рассмотреть в этом посте логирование с отправкой информации на почтовый ящик. Это удобно для дебага, когда применить нормальные средства отладки не удается. Итак что нам нужно:
Debug ON. Кнопка в FireFox для разработчика.
В дополнение к статье http://habrahabr.ru/post/140369/ о том, как можно выводить для себя ошибки в консоль, расскажу как можно еще сделать этот переключатель не “путем клика например, на значке копирайта“, а кнопкой в браузере.