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.
Related
This has been driving me crazy. It just started a few weeks ago. I never had the problem before.
I'm trying to debug a simple issue in the Chrome debugger.
My cshtml source file has a script tag embedded in it with a small script. I used the tag to make Chrome recognize the "source" file:
//# sourceURL=CustomerView.js
I am able set breakpoints and they show the correct line number in the debugger. But they never hit. I add a Debugger line in the script and the chrome debugger breaks but the line number in the call stack is WAY off. There's no way for me to view/walk through the source to debug.
Any insight into this would be very helpful.
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
}
For standalone .js files, we can easily inspect it in "source" panel of development tools and set breakpoint for them. But I often come across those js snippets that are in script tags in HTML, how do I set breakpoint or debug them?
Moreover, in Joomla, some js are written in custom HTML modules, and if there are some errors in the code, unlike for other standalone js files, where chrome comes up with clickable line of error, in this case chrome will only report something like "index.php/:54", and when clicked, it doesnt take you to the error point, and the supposed 'line number' itself is totally not helping.
So, for these two scenarios, how do I debug the codes? And also, in the second scenario, what excatly does the number means?
Modern browsers also give you the option of placing a single line into your script, containing:
debugger;
Which effectively places a breakpoint, hitting it stops the JS execution and brings up the developer console's debugging tools.
Of course, you can't have this in production code, but it's a great tool for development.
Edit: on second thought, I just tried placing a breakpoint in an html-inlined script of stackoverflow in Chrome 41, and it worked. Are you sure it doesn't work for you?:) (Maybe you didn't look under the right source in the sources panel?)
i hope it will help u..
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>
Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
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. :)
I'm wondering if it is possible to step through HTML and JavaScript Code in VS2010 ? I have a project in which I have an HTML file with Javascript inside it...I can't set a breakpoint on the HTML and although I can set a breakpoint on the Javascript it will not pause when I run the project.
Thanks
you can't debug HTML. If you want to debug javascript code that is embedded in the HTML, add a line
debugger;
inside the script tag. The browser will stop and let you debug it from there
As far as i know, you can't set breakpoints in/on HTML code, why would you. You can step through JavaScript code in IE, if you allow debugging of client scripts in the internet options of IE. For any other browser you will need some other JavaScript-debugger, something like Firebug.
If you are sure you have the javascript debugger attached, you can put a simple debugger; statement in your js which will cause it to break. You will have to have script debugging turned on an VS attached to your IE process. You could also use the IE Dev Tools JS debugger.