Установка jQuery

Изначально jquery уже установлен, но если фреймворк обновился, а это делается часто, то очевидно, что необходимо обновить его:

Install-Package JQuery

Далее, мы до этого убрали JQueryUI (https://jqueryui.com/), так как собираемся функции datepicker, modal использовать из того, что предлагает bootstrap. Но в JQueryUI есть необходимый нам функционал взаимодействия, т.е. Draggable, Droppable, Resizable, Selectable и Sortable. Установим их выборочно:

1. Так как для Install-Package JQuery.UI.Interactions необходима версия jquery < 1.6, то установим вручную.

2. Выберем custom скачивание с сайта https://jqueryui.com/download/

3. Выбираем только Сore и Interactions

4. Скачиваем

5. Переносим css-файлы в /Content/css

6. Переносим js-файлы в /Scripts (jquery-1.9.1-min.js переносить нет необходимости)

7. Подключаем в BundleConfig

bundles.Add(new ScriptBundle(" ~/bundles/jqueryui")

.Include(" ~/Scripts/jquery-ui-1.*"));

bundles.Add(new StyleBundle(" ~/Content/css/jqueryui")

.Include(" ~/Content/jquery-ui-1*"));

8. При необходимости, объявляем на страницах.

9. Готово!

Firebug (Firefox) и Developer Tool (Chrome)

Для удобства отладки в Firefox есть расширение Firebug, а в Chrome есть встроенный механизм Developer Tool. Я рассмотрю пример с Developer Tool. Вызывается по нажатию клавиш –Shift-Ctrl-I.

Давайте изучим его:

· Вкладка Elements.

Здесь, в левой части, мы можем увидет DOM – дерево элементов. В правой части - стили. Стили, как и элементы, можно редактировать на ходу, и изменения будут сразу же отображаться в браузере в редактируемой странице. Очень удобно, когда надо поправить расположение объектов на несколько пикселей.

· Вкладка Resources

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

· Вкладка Network

Показывает запросы и тайминг этих запросов. Обозначает разными цветами document, css, js файлы, изображения. Показывает размеры файлов.

При клике на запрос можно подробнее рассмотреть HTTP-запрос, например:

· Вкладка Sources

Одна из основных вкладок. Тут можно просматривать js-файлы, устанавливать точки останова, и выполнять отладку приложения. Горячие клавиши F9, F10, F11 как в VisualStudio для отладки.

· Вкладка Timeline

Показывает происходящие события в браузере. Я ее никогда не использовал.

· Вкладка Profiles

Для профилирования, т.е. нахождения нетривиальных ошибок. Также, никогда не использовал.

· Вкладка Audits

На этой вкладке можно проверить страницу на оптимизацию. Т.е. браузер рекомендует сделать некоторые действия, которые приведут к уменьшению кода передаваемого от сервера, сжатия, удаление лишних строк css.

· Вкладка Console

Одновременно и командная строка и окно вывода протоколирования. Для вывода лога нужно вызвать команду console.log(“message”).

Осторожно используйте эту команду в IE, так как когда консоль не открыта, то выдает ошибку.