Question:
Hovering over a name does not show its value.
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function (e) {
e.preventDefault();
var name = $('#input_price').val();
name = encodeURIComponent(name);
Answer:
Debugging JavaScript code inside cshtml in the Visual Studio development environment, as far as I know, is not available. You can put a Breakpoint on a Razor markup element – that's where the breakpoint will hit. And to see the value of a variable, you need your code to be active exactly where you want it to be. In other words, if you want to see it in JavaScript code, you need it to be currently running and there should be a breakpoint, for example.
To debug JavaScript code on a page, I personally use different approaches. The first two approaches are using the browser.
1. Using the debugger keyword
We write the following line in JavaScript code:
debugger;
var name = $('#input_price').val();
We write this line where we want to stop.
The
debuggerprovides access to any debugging functionality available in a particular environment, such as setting breakpoints (so-called breakpoints).
For the breakpoint to work (paused) – you need to open the source code of the current page in the browser (for example, in Google Chrome , this is the View code item)
2. Using console.log
It can be used as debugging information and for further inspection and debugging of the code. Quite a banal way, but very effective. For example, I want to see what was in a variable using your code:
var name = $('#input_price').val();
console.log(name);
console.log method – prints messages to the web console. Similar to the previous paragraph, open View Code , go to the Console tab – and see what we had in the name variable. Simple and efficient. And finally, let's move on to what should help you.
3. Transfer JavaScript code from .cshtml to a separate .js file
As I said at the beginning: debugging Razor on a page inside Visual Studio is welcome, but not JavaScript. We take out the functionality of the JavaScript code in a separate file (for example, MyCshtml.js ), put it in a folder ( Scripts , for example), somewhere nearby, and connect it on the page something like this:
<script src="~/Scripts/MyCshtml.js"></script>
After this not tricky manipulation, the breakpoints in the development environment should work and you will be able to see what you have in one or another variable in your JavaScript code at the moment of debugging a certain code. Moreover, the site must be opened in the Internet Explorer browser, it is he who is friends with Visual Studio, since both products are from Microsoft.
4. Visual Studio 2017 paired with Internet Explorer 11 and debugger
Perhaps the most banal way, as the practice of reasoning with @Grundy has shown, is to use the debugger keyword inside the JavaScript code of the cshtml .
- We choose the default browser to open our site Internet Explorer .
- Open the site in IE and go to Settings -> Internet Options – tab Advanced – section Overview , uncheck the line: Disable script debugging (Internet Explorer) , click Apply , and then OK
The breakpoints at the location of the debugger keyword are then triggered inside the Visual Studio 2017 development environment.
Link to source on configuring VS and IE: How to debug (only) JavaScript in Visual Studio? .
Tested on VS2017 paired with IE11 on Windows 10 operating system.