breakpoint on javascript in CSHTML? - javascript

I have a .CSHTML file that has a javascript tag.
Within this script tag I have a few lines of javascript.
The first line of javascript refers to a property in the #ViewBag.
All other javascript lines are plain script without any MVC related references.
Observation:
I can place breakpoints (visual studio 2015) on each of these javascript lines.
However, all breakpoints has white dot in the center of the breakpoint symbol (red circle) EXCEPT for the line with the #ViewBag reference (this particular line does not have a white dot in the center).
It seems only the breakpoint without the white dot is hit during run-time.
Question:
Can somebody explain what is going on here?
What does the white dot mean?
Why is the plain red breakpoint line the only line that is hitting the breakpoint?

The Visual Studio debugger is actually expecting you to debug the actual server-side code within your .cshtml file as opposed to the client-side Javascript within it.
IIRC, Visual Studio will allow you to debug Javascript code as expected in Internet Explorer (and possibly Edge), but for other browsers you will likely want to use either a third-party tool or the Developer Tools (F12) within your browser.
An easy approach would be to take advantage of Javascript's debugger keyword, which you can place in your code and run with the Developer Tools open (just press F12 and then refresh your page). It will hit a breakpoint and the browser will allow you to step through your code as you might expect :
function doWork(){
// Ensure that this line is hit with the Developer Tools open in your
// browser
debugger;
// Do work here
}

Related

Removing reference files from debugging

Is there a way to remove reference files from debugging on any known debugger (preferably browser based)
I'm currently writing in Javascript, and am using several libraries such as THREE.js, and jquery.js, but when debugging I'd like to step over these libraries by default.
Is there any debugger which has this feature (a toggle or a specific step-over function that can be used to remove files from step-into and step-over requests)?
Thanks!
Firefox can do this with its black box on debugging:
f12 -> debugger -> click the eye symbol next to the name of the source you want to get rid of.

Debugging in-page javascript with Chrome when the html is minified?

The scripts on our website are embedded in the html and everything is minified. Throwing a debugger statement into the javascript to debug doesn't help very much because there's only actually one line of html in the original source. When the source is prettified with Chrome's code prettifier, the debugger points to the wrong line in the code.
How can I debug minified javascript embedded in the html?
One thing that might help is that you can set breakpoints in chrome w/o using the debugger directive directly in code. Simply view the prettified code output in the chrome sources tab, and then double click on the line where you want to add a breakpoint.

Firebug showing eval scripts on one line

When loading a JavaScript block via Ajax, the response is returned ok, but when viewing it in the code in Firebug (1.9.1) in the Script tab, it appears without any newlines. It's extremely difficult or impossible to set breakpoints anywhere.
Is there a way to get Firebug to preserve the newlines?
I don't think so, but Chrome's developer tools unobfuscator may do what you want (http://www.sagarganatra.com/2011/06/de-obfuscating-javascript-code-in.html).
However, if you load in your script blocks by adding a script tag to the page and changing its source to point to the relevant script file the eval function isn't used and firebug should display the script with line breaks included.
Found a fix for Chrome.
Simply add the following snippet to where you want to debug:
try{ throw Error() } catch(e) {}
and click the "Pause on all Exceptions" button in the Chrome Scripts console tab. Then simply hit F8 until you reach your try block.
Works like a charm. :)

Easier way of testing and adding Javascript to a page in Firefox?

I am trying to extend some Javascript in one of my pages and for quick "will this work" code it's a huge pain. Basically it consists of editing code in my IDE and save, switch to Firefox, reload page, set breakpoint in Firebug, examine and repeat
Are there any Firefox extensions that will aid me in this respect?
The only thing I can find is using javascript: ... in the address bar, but that's a huge pain, can only hold a single line, and there is no way of making the test code persist across a page reload.
Try jsfiddle.net. You can experiment with html, css and code within your browser and debug that with firebug for example. You can use a diversity of js-frameworks (or none), simulate XHR, and add your own (js/css)resources. It's not ideal, but much better than the practice you described.
You can also try using KomodoEdit, which offers 'view in browser' functionality, even for URLS and with a preset browser.
just use the js console that comes with firebug. You can write all manner of code in there and even declare functions and variables that can be referenced. if you need more than one line, firebug can do that too.
EDIT: except page reload.... if you need to do page reload it needs to be saved somewhere. I would use a Greasemonkey script
You can use the Web Console (new in Firefox 4 and higher) - press Ctrl-Shift-K to open it for a particular page. The command line is at the bottom, press Shift-Enter on the command line to enter more than one line.

My javascript file is displayed as a single line of text in the chrome debugger. Why?

I seem to run into this randomly. It usually displays the file normally, but sometimes it's all scrunched onto one line. I can't figure out what's causing it.
N.B.: In the current version of Chrome, this is actually done by clicking on the {} icon ("pretty print") on the lower left of the developer tools pane.
Ah, figured it out. The line endings on the problem file got set to Mac format somehow, while the rest of the files were Windows format. Not sure how the format swapped but it's easy to convert back (in Notepad++ just go Edit -> EOL Conversion).
You already answered your own question, but this is a good place to note that Chrome (as of v12, currently in dev channel) has a built-in pretty-print function that can make quick work of the typical one-line JavaScript files that all well-behaved websites generate. In Web Inspector's Scripts tab, select a file via the usual dropdown, and right click on the source code. Selecting "De-obsfucate Source" will format the file in a reasonable way, and even allow you to set breakpoints inside the newly reformated code. It's quite helpful.

Categories

Resources