Javascript Debugging

Howard Bash
Howard Bash used Ask the Experts™
on
For some reason (must be me),  I am having lots of trouble setting breakpoints in my JavaScript.  I have tried with Chrome, FireFox (Dev edition and regular) and IE and when I can find the line to break, it doesn't break on it when I refresh.

I am using dreamweaver (latest) and try to preview in each browser and then  hit f12 to open the tools, but no breaks for me.

Please advise.  This is bizarre.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
There is little we can do to help with the information provided. Do you have a link we can look at? Are you certain the code is being run?

I use breakpoints all the time without issue - in fact the only real issues are
a) Finding the line of code in the first place - not always obvious
b) Remembering to remove the break point
Howard BashSenior Software Engineer

Author

Commented:
Here is the code:
<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" data-require="jquery@*" data-semver="3.1.1"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
    
    <script type="text/javascript">
    $( document ).ready(function() {    
		
        alert( "ready!" );        
		
		var p = ["NPD-2016-12", "XYZ", "   ", "XYZ", " "];
		var c = CleanedArray(p);
		
		var cc = DedupeArray (c);
		
		alert (c + " : Length=" + c.length);
		alert (cc + " : Length=" + cc.length);
		
		$(".btnTest").click(function() {
			
			alert( "Handler for .click() called." );

		});				
		
    });
      
    </script>
    
    <script type="text/javascript">
		
	  function CleanedArray(p) {		  
		  var cleanp = [];
		  for (var ptr=0; ptr<p.length; ptr++) {
			  var tmp = p[ptr];
			  tmp = tmp.trim();
			  if (tmp.length>0) {
				  cleanp.push(tmp);
			  }				  
		  }		  
		  return cleanp;		  
	  }
            		
	function DedupeArray(aR) {
		try {
			var listlength = aR.length;        
			var newaR =[];
			var currentVal = aR[0];
			var uniqueElement = true;
			newaR.push(currentVal);
			
			for (var ptrOuter=1; ptrOuter<listlength; ptrOuter++) {
				for (var ptrInner=2; ptrInner<listlength; ptrInner++) {                                                                        
					if (aR[ptr]==currentVal) {
						uniqueElement = false;
					}                                                                                                                                                        
				}
				if (uniqueElement) {
					newaR.push(aR[ptrOuter]);
					uniqueElement = true;
				}	
				currentVal = aR[ptrOuter];
			}
		}		
		catch(err) {
			console.write('Error in DedupeArray:' + err.message);
		}
		finally {
			return newaR;                
		}
	}

				
    </script>

    
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    
    <button type="button" class="btnTest" style="background-color: blue; color: white">Test</button>
    
  </body>

</html>

Open in new window


From Dreamweaver I preview it and try with f12 to get to break in the script.  I search for a function in the page, set the break and it doesn't break.  The ready message is displayed as are the alerts on the returns, but no luck on breaking.
Howard BashSenior Software Engineer

Author

Commented:
Also,  note the breakpoint set in IE after Dreamweaver preview selected:
No Breaks.
Sometimes I see an eval() with a line number and some disabled looking break icon.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Are you talking about a breakpoint set in DW or in the F12 - where are you actually setting the break points?

I have no experience of DW - I set the break points in the browser using Dev Tools.
Howard BashSenior Software Engineer

Author

Commented:
I am launching the browser via Dreamweaver.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Yes but where are you setting the breakpoint?

Have you tried going into F12 / Debugger and setting a break point there?

As I said not familiar with DW debugging.
Howard BashSenior Software Engineer

Author

Commented:
It's outside of DW after I launch the browser.  I use F12 to bring up the tools.  What I have just found is that if I make local web site and save the file to the site,  I can set breakpoints and they break.  The issue is something with how DW wraps the page when it previews.  That takes care of the DW part.

But,  I still am finding in other pages, where the javascript is in a separate file that I cannot get to that file to attempt to set a break within.  It's not clear if there may be some other issue like a component on the page that is wrapping the page somewhat like we observed with DW.  I am wondering if it is a site setting (the pages for my dev work on in SharePoint) difference between my dev site and my prod site are to blame.

The tree of files when I hit F12 looks quite different even though the sites are structurally the same.
Howard BashSenior Software Engineer

Author

Commented:
Here is a view in chrome for source panels in test and prod sites:
Prod:
Prod
Test:
Test
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
When you debug you have to select the script file that contains the code you are working in see below
ss113.jpg
Howard BashSenior Software Engineer

Author

Commented:
I see the file in test as depicted above but not in production.  That's the quandary.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
How do you publish your site - does DW do it for you. I am guessing there is some sort of minifying going on - your scripts and css are being compressed and packed - they usually come out the other side with a generated file name.

What you can do is go through each of the Sources by clicking on them and then examining the code. Because of the packing / compressing the code looks like a fruit salad - fortunately Dev Tools can help you out with the Prettify Source button see below
ss114.jpg
Howard BashSenior Software Engineer

Author

Commented:
No DW for SharePoint publishing.  The process it pretty simple.  You check out and download a file.  You edit it, upload it, check it in an publish it.  There is no minifying going on.  I usually edit in notepad++, save locally and upload the file(s) check in and when needed publish them.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Then if you do a view source on the page you should see the script there. Click on the link and it should load - if that all works it should be visible in the list of scripts in the Debugger tab
Howard BashSenior Software Engineer

Author

Commented:
The script file reference is embedded and that may be why the debuggers don't show it.  When I go to debugger and ask it to find a function to break in, the debugger finds it.  But,  the location listed in the breakpoints is odd: "eval code (138) (179,3)".

The (179,3) is the location in the js file that I set the breakpoint.  I then hit the F5 key, the page reloads and the break not only isn't hit, but when I go back to the function,  the breakpoint (the red dot) is gone.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Howard BashSenior Software Engineer

Author

Commented:
I checked the URL you listed.  It doesn't seem to apply.  Here is a screen shot of the breakpoint in IE.

Not Break
F5 doesn't then break there and when I find the function again the break isn't there.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Have you tried in FireFox? I don't have much experience with IE
Howard BashSenior Software Engineer

Author

Commented:
I have tried with IE, Chrome and Firefox (dev and non dev versions).
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Can you find the file that code is in - i.e. view source and then click on the link to it.
Howard BashSenior Software Engineer

Author

Commented:
I know where the file is.  I just don't see it in the debug list of folders and files.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@Howard,

Apologies for not replying.

Without being able to replicate difficult to diagnose. Suggest you wrap this question up and maybe ask again - this thread is long enough to become a TLDR for other experts.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial