Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
Отладка javascript скриптов
Рано или поздно, вы столкнетесь с проблемой отладки своих javascript скриптов. И если в Mozilla FireFox существует отличный FireBag, то с Internet Explorer все обстоит гораздо хуже. Вы можете сказать: "ну и зачем мне отлаживаться в Internet Explorer?". Отвечу: А как же быть с несовместимостью браузеров!? Когда объектная модель одного и другого очень сильно различаются. Ваш скрипт может замечательно работать в Mozilla FireFox, и безбожно ругаться в Internet Explorer. Вот в этой ситуации Вам и помогут некоторые готовые кусочки скриптов для отладки.
Следующая функция Вас выручит, когда вам нужно получить какой-то объект из DOM-модели, но вы все время получаете ошибку или undefined.
function aaa(s)
{ if (typeof(s)=="object") {
var o = s;
s = "";
for (var i in o)
s += i+"="+o[i]+"\n";
alert(s);
}else alert(typeof(s));
}
Примеры использования:
<script>
tobj=document.getElementById('id1');
aaa(tobj);
</script>
Встраивание в обработчик нажатия кнопки мыши:
<div id='id1' onclick="aaa(this)">
Нажмите СЮДА!
</div>
<script>
function aaa(s)
{ if (typeof(s)=="object") {
var o = s;
s = "";
for (var i in o)
s += i+"="+o[i]+"\n";
alert(s);
}else alert(typeof(s));
}
</script>
РЕЗУЛЬТАТ:
Исключения в JavaScript
Для обработки ошибок этапа выполнения используется следующая конструкция:
try {
//код, приводящий к ошибке
}
catch(ошибка) {
//действия при обнаружение ошибки
}
Для вызова ошибки в любой момент времени используется оператор throw.Он используется со значением любого типа:
throw 12345;
function process(values) {
if (!(values instanceof Array)) {
throw new Error(“process(): Аргумент должен быть массивом.”);
}
values.sort();
for (var i=0, len=values.length; i < len; i++) {
if (values[i] > 100) {
return values[i];
}
}
return -1;
}
Strict Mode
В пятой редакции ECMAScript был представлен строгий режим (Strict Mode). Strict Mode накладывает слой ограничений на JavaScript, он отгораживает вас от опасных частей языка (которые есть исторически, но могут привести к проблемам и ошибкам) и позволяет снизить вероятность ошибки.
Чтобы включить Strict Mode для всего кода нужно добавить "use strict" в начало вашего JavaScript кода:
"use strict";
012; //Восьмеричный литерал запрешен. Выбросит исключение SyntaxError в Strict Mode
В качестве альтернативы вы можете включить Strict Mode только в отдельной функции, добавив "use strict" в начало тела вашей функции:
012; //Нет ошибки (Strict Mode не включен глобально)
function foo() {
"use strict";
x=3; //Strict Mode выбросит исключение - запрещено неявно создавать глобальные переменные
}
foo(); //ReferenceError (Strict Mode включен для функции)
Внутренняя функция, объявленная внутри внешней, в которой включен Strict Mode тоже будет иметь Strict Mode:
var wrapper = function(fn) {
'use strict';
var deleteNonConfigurable = function () {
var obj = {};
Object.defineProperty(obj, "name", {
configurable: false
});
delete obj.name; // Выбросит исключение TypeError в Strict Mode
}
return deleteNonConfigurable;
}
wrapper()(); //TypeError (Strict Mode включен)
На что влияет "use strict"
Посмотреть, на сколько ваш браузер поддерживает "strict mode" вы можете, например, тут. Перечислю основные и важнейшие особенности режима, которые сэкономят вам часы отладки.
- Не допускает дублирование ключей в объекте
Пример
(function() { "use strict"; var x = { a: 1, b: 2, a: 3 } }());
Приведёт к возникновению ошибки
Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode
- Требует всегда явного объявления переменных через
var
(function() { "use strict"; var a = 1; // правильно x = 2; // ошибка: нет var }());
Приведёт к возникновению ошибки
Uncaught ReferenceError: x is not defined
- Запрещаются дублирования аргументов
function sum(a, a) {...
Приведёт к возникновению ошибки
Uncaught SyntaxError: Strict mode function may not have duplicate parameter names
- Происходит заморозка
arguments
Тут можно потерять обратную совместимость. Массивarguments
в strict mode начинает вести себя подобно обычным массивам (хотя, он не становится от этого обычным массивом):function a(x) { arguments[0] = 2; console.log(x); // напечатает 2 } function b(x) { "use strict"; arguments[0] = 2; console.log(x); // напечатает 1 } a(1); b(1);
То есть, в обычном режиме изменение
arguments
приводит к изменению соответствующих переменных, а в strict mode этого не происходит.
- Другие полезные при отладке скрипты из коллекции скриптов:
- Исследователь событий DOM
- Исследователь объектов DOM
- JavaScript консоль
- Исследование W3C Модели событий
- Просмотр стека вызова функций в JavaScript
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости