Как просмотреть значение переменной в cshtml при отладке Visual Studio?

262

22 марта 2017, 18:05

При наведении на name не показывает её значение.

<script type="text/javascript">
$(document).ready(function () {
    $('#submit').click(function (e) {
        e.preventDefault();
        var name = $('#input_price').val();
        name = encodeURIComponent(name);

Answer 1

Отладка JavaScript-кода внутри cshtml-страницы в среде разработки VisualStudio, насколько мне известно, недоступна. Вы можете поставить Breakpoint на элемент Razor-разметки - там точка останова сработает. И чтобы увидеть значение переменной - Вам необходимо, чтобы Ваш код был активен именно в том месте, где Вы этого хотите. Иными словами, если хотите увидеть в JavaScript-коде, нужно чтобы он в данный момент выполнялся и там была к примеру точка останова.

Для отладки JavaScript-кода на странице, лично я пользуюсь разными подходами. Первые два подхода - с использованием браузера.

1. Использование ключевого слова `debugger`

Пишем в JavaScript-коде вот такую строку:

debugger;
var name = $('#input_price').val();

Пишем эту строку там, где хотим остановиться.

Выражение debugger открывает доступ к любому доступному в конкретном окружении отладочному функционалу, например к установке точек останова (т.н. брейкпоинтов).

Чтобы брейкпоинт сработал(выполнилась приостановка) - нужно открыть исходный код текущей страницы в браузере (к примеру в Google Chrome это пункт Просмотреть код)

2. Использование `console.log`

Использовать можно в качестве отладочной информации и для дальнейшей инспекции и отладки кода. Довольно-таки банальный способ, но очень действенный. К примеру, я хочу посмотреть, что было в переменной, по Вашему коду:

var name = $('#input_price').val();
console.log(name);

Метод console.log - выводит сообщения в веб-консоль. На подобии предыдущего пункта открываем Просмотреть код, идем на вкладку Console - и видим, что у нас было в переменной name. Просто и действенно. Ну и наконец перейдем к тому, что Вам должно помочь.

3. Перенос `JavaScript` кода из `.cshtml` в отдельный файл `.js`

Как я сказал в начале: отлаживать Razor на странице внутри VisualStudio - пожалуйста, но не JavaScript. Выносим функционал JavaScript-кода в отдельный файл (к примеру MyCshtml.js), помещаем его в папку (Scripts к примеру), где-то рядышком, и подключаем на странице как-то так:

<script src="~/Scripts/MyCshtml.js"></script>

После этой не хитрой манипуляции точки останова в среде разработки должны заработать и Вы сможете увидеть, что у Вас находится в той или иной переменной в Вашем JavaScript-коде в момент отладки определенного кода. Причем сайт нужно открывать в браузере Internet Explorer, именно он дружит с VisualVtudio, так как оба продукта от Microsoft.

4. `VisualVtudio2017` в паре с `Internet Explorer11` и `debugger`

Пожалуй, самый банальный способ, как показала практика рассуждений с @Grundy - это использование ключевого слова debugger внутри JavaScript-кода cshtml-страницы.

Выбираем браузер по умолчанию для открытия нашего сайта Internet Explorer.
Открываем сайт в IE и переходим в Настройки -> Свойства браузера - вкладка Дополнительно - раздел Обзор , убираем галочку напротив строки: Отключить отладку сценариев (Internet Explorer), жмем Применить, а затем ОК

После этого точки остановки в месте ключевого слова debugger срабатываю внутри среды разработки Visual Studio 2017.

Ссылка на источник по настройке VS и IE: How to debug (only) JavaScript in Visual Studio?.

Проверил на VisualVtudio2017 в паре с Internet Explorer11 в операционной системе Winsows10.