Это ключевые навыки, необходимые для проработки и исправления ошибок. Здесь сразу надо разделить на C# и JS.

Отладка

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

Трассировка

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

JS

В JS используйте активно панель браузера (F12). Самые главные вкладки – сеть и консоль.

На вкладке Сеть вы можете видеть все запросы, которые идут на сервер. Особенно полезно здесь видеть, как идут ajax запросы, что передается на сервер и что с него приходит. Вы можете использовать специальные команды console.log и debugger. Первая нужна для вывода в консоль разных значений. Кстати она также позволяет раскрашивать в цвета строки, что может быть удобно при сложной трассировки (погуглите насчет этого). Вторая позволяет сделать остановку в браузере и пройтись по шагам в браузере. Изучите этот момент (Google – отладка в Chrome).

Также вы можете трассировать JS через нашу функцию as.sys.trace – он выводит вашу строку и длительность по времени с момента последнего выполнения этой команды.

Важный момент – лучше оборачивать функции console в какую-то свою функцию и вызывать только ее.

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

Еще момент в тему, если хотите более безопасный код, то пишите следующим образом: console && console.log() – функция выполнится если только объект console определен.

C#

Для включения трассировки вы должны в web.config настроить параметр trace в system.web:

<trace enabled="true" localOnly="false" pageOutput="false" traceMode="SortByTime" writeToDiagnosticsTrace="true" requestLimit="1000" />

В коде программы вы можете вызывать методы Trace.Warn или Trace.Write – при этом в трассировке будут показываться ваши данные. Просмотр трассировки может идти прямо на странице или в по отдельному адресу /trace.axd. Второй вариант предпочтительнее, т.к. в противном случае вы не можете изучить ajax запросы.

Важный момент – отключайте трассировку на запущенном в эксплуатацию приложении.  Во-первых, это замедляет работу, и, во вторых, это дает полезные данные для злоумышленников.

Обычно трассировку удобно использовать для изучения медленных мест – т.е. для оптимизации хода выполнения кода. Второй вариант применения – как выполняется код на сервере. Вы запускаете страницу с проставленными Trace.Warn и просматриваете Trace.axd.

Примечание.

Лучше сразу попробуйте эти инструменты в деле. Не надейтесь их освоить по мере поступления проблем. Когда будут проблемы в проекте, вам будет совсем не до этого, поэтому прямо сейчас попробуйте все указанные инструменты на простом коде.

Есть альтернативный способ трассировки – это запись всех событий в базу данных. Есть стандартные таблицы (система health monitoring), но мы используем свой механизм – таблицу cms_trace и класс Tracer. Фактически он записывает все полезные данные по работе системы – время по длинным запросам, ошибки и другие критические данные. База особенно удобна, когда речь идет об удаленной отладке, когда локально все работает, а на сервере нет. В этом случае вы пишите в базу данные через tracer и можете разобраться что именно происходит на сервере.

Для локальной отладки удобнее всего использовать встроенные средства отладки Visual Studio. Вы ставите точки прерывания в коде и запускаете проект (F5). При останове на точке прерывания (breakpoint) вы можете по шагам пройти всю логику и посмотреть различные значения через окна снизу (особенно полезно окно Immediate для различных вычислений в реальном времени). Для движения по шагам есть 2 способа:

  • выполнить текущую операцию без захода в функцию (F10)
  • выполнить с заходом внутрь (F11)

Разница между ними видна, только если текущая строка является функцией. В первом случае вы одним махом вычислите эту функцию. Во втором – вы “провалитесь” внутрь функции и будете ее также проходить по шагам. Если вам нужно отпустить выполнение – вы просто нажимаете F5 и программа дальше начнет выполняться (пока не встретит следующий breakpoint). Если вам надо остановить процесс выполнения – Shift + F5.

На этом по отладки и трассировке все. Обязательно попробуйте использовать все эти инструменты (или предварительно реализовать). Это значительно упростит поиск и исправление ошибок в ваших будущих проектах.

Далее рассмотри оптимизацию.