Javascript script debugging method

Javascript script debugging method

Developing ASP. NET controls is the underlying technology in ASP. NET programming. Controls must have rich client interaction functions. You can directly add JavaScript standards to the control, or set some good third-party client components (such as prototype. JS and jquery) embedded into the control, no matter which method is used, you must learn JavaScript debugging technology. The following describes various Debugging techniques of JavaScript.

Set IE, select Tools> Internet Options> advanced, and find the check boxes for disabling script debugging under browsing, cancel the selection (ie selects the two items by default, so script debugging is not allowed), as shown in 2-8.

Figure 2-8 "Internet Options" (Browser options) window

After the preceding settings, You can debug the script by disabling the default IE function.

2.4.1 debug JavaScript scripts on the page (method 1)

Find the clientclickevent client method added to the preset sample script from debugcontrol. aspx. When you press the F9 key to set a breakpoint in the alert statement, you will find that in VS 2005, you cannot set a breakpoint on the page at all. (vs 2008 can directly set a breakpoint, which is not as troublesome as VS 2005, however, this method can also be used for vs 2008 ). It doesn't matter. We can add "Debugger;" before the alert statement ;". Clientclickevent method after modificationCodeAs follows:

 
   
 
    
  //  
 
    
  // For more information about this book, see  
 
    
  // http://blog.csdn.net/ChengKing/archive/2008/08/18/2792440.aspx  
 
    
  ///  
 
    
  
 
   
 

Run debugcontrol. aspx in the browser and click the button on the page.ProgramAfter running the "Debugger;" Statement, the "select Debugger" window is displayed, as shown in Figure 2-9.
You can select any debugger from the window above (only the vs debugger is available above. If other debuggers are installed, they will also be listed here). Select the button "Yes (y )", the program can be interrupted at the breakpoint.

Figure 2-9 select the debugger window

2.4.2 debug the Javascript script on the page (method 2)

The VS 2005 (earlier than vs 2008) encountered in the previous section cannot be in *. on the ASPX page, you can set breakpoints for client scripts by using the "Debugger;" Statement for tracking and debugging.

You cannot set breakpoints before running the page, but you can manually start the debugger after running the page so that you can set breakpoints.

Press Ctrl + F5 to run the page. After the debugcontrol. aspx test page is displayed in the browser, select "View"> "script debugging program"> "open" from the menu of the browser, as shown in 2-10.

Figure 2-10 run the menu command

After selecting the command, the "select debugger window" window appears (Figure 2-9) to select the debugger. Select the "new instance Visual Studio 2005" item and click "Yes (y) "button to bring up a new IDE environment.

Find the alert statement in the pop-up new IDE environment and set a breakpoint for this statement. Switch to the browser that is opening the debugcontrol. ASPX page, and click "Debug client script" to debug the client.

2.4.3 debug non-embedded Javascript script files

Non-embedded scripts generally refer to the JavaScript files under a folder of the current running site.

First, configure the script file environment. Create a new script file JScript. JS, copy the clientclickevent method in debugcontrol. aspx to the new file, and reference the file to the page, as shown below:

 


   
   
 
    
<SCRIPT src = JScript. js type ="Text/JScript"> </SCRIPT>
 
   
 

Debugging scripts in Javascript script files is relatively simple. In addition to using the "Debugger;" statement as mentioned in section 2.4.1, the simpler method is to set a breakpoint by pressing the F9 key on the statement to be tracked and debugged, and then press the F5 key to run the breakpoint. The program will be automatically interrupted after it reaches the breakpoint.

2.4.4 debug embedded Javascript script resource files

Embedded resource files refer to the controls compiled to the server.Source codeDLL resources, such as slice, style files, client script files, etc. The advantage is that the entire control eventually has only one DLL, which is easy to deploy and will be detailed in later sections for Embedded resources, the debugging method is described here.

For versions earlier than vs 2008, for example, VS 2005 cannot debug embedded resource files by default. However, you can install a debugger that can debug embedded resource files, here we recommend a debugger that I often use -- the debugger with the Office 2003 Installer (which is found in the attached extension tool during installation ), after installation, you can use the above method for debugging. For example, if you use the debugger command in an embedded script file to set a breakpoint, the debugger selection window will pop up when the program runs the statement. Note that you must select Microsoft Script Editor, as shown in Figure 2-11.

Figure 2-11 script Debugger in Office 2003

For vs 2008, you don't have to worry about this. The method for debugging embedded resource files is the same as that for debugging non-embedded resource files. The other tasks are handled internally by vs 2008.

2.4.5 high-efficiency debugging skills

1. Debugger skills

When the control library is large, you can set some debugger commands in some key code areas and set execution conditions to avoid manually entering these command strings and searching for key data points each time, setting breakpoints is time-consuming. In addition, if these scripts have been packaged into dll as embedded resources, you cannot set breakpoints. The following solution can solve these problems. Let's take a look at the example:

  
  
 
   
 
   
/// <Summary>
  
   
 
   
/// For more information about this book, see:
  
   
 
   
// Http://blog.csdn.net/ChengKing/archive/2008/08/18/2792440.aspx
  
   
 
   
/// </Summary>
  
   
 
   
VaR startdebugger =False;
  
   
 
   
Function Method1 ()
  
   
 
   
{
  
   
 
   
//......
  
   

   
If(Startdebugger)
  
   
 
   
{
  
   
 
   
Debugger;
  
   
 
   
}
  
   
 
   
//......
  
   
 
   
}
  
   
 
   
 
  
   
 
   
Function method2 ()
  
   
 
   
{
  
   
 
   
//......
  
   
 
   
If(Startdebugger)
  
   
 
   
{
  
   
 
   
Debugger;
  
   
 
   
}
  
   
 
   
//......
  
   

   
If(Startdebugger)
  
   
 
   
{
  
   
 
   
Debugger;
  
   
 
   
}
  
   
 
   
//......
  
   
 
   
}
  
   
 
   
Function method3 ()
  
   
 
   
{
  
   
 
   
//......
  
   
 
   
If(Startdebugger)
  
   
 
   
{
  
   
 
   
Debugger;
  
   
 
   
}
  
   
 
   
//......
  
   
 
   
}
  
  

Suppose this is a script function in some controls, with "// ......" marking the omitted code. A startdebugger variable is defined outside the method and set to false. The startdebugger variable here is a common JavaScript variable.

After the preceding settings, the "Debugger;" statement in these method methods is always not executed because the startdebugger value is false (the initialization value) by default, in this way, you can package the components and send them to the control developers.

If the developer who uses the control encounters a problem and needs our assistance, then you only need to add the following code to the page where the problem occurs to debug:

 


   
   
 
    
<Form ID ="Form1"Runat ="Server">
 
    
<Script language = JavaScript>
 
    
 
 
    
Startdebugger =True;
 
    
 
 
    
</SCRIPT>
 
    
</Form>
 
   
 

Make sure that "startdebugger = true" is executed in a later event. Otherwise, a startdebugger undefined error is reported.

In this way, you don't need to set a breakpoint every time you look for a critical breakpoint location, saving time for developers. This solution is preferred by my colleagues.

2. Execute the output script in the IE Address Bar

The script is executed in the address bar. See figure 2-12. Startdebugger is a variable defined on the page. You can run the page in a browser and enter the command in Figure 2-12 in the address bar to get the value of startdebugger, figure 2-13 shows the execution result.

Figure 2-12 run the script in the browser address bar

 

Figure 2-13 script execution results in the browser address bar

The advantage of this method is that you do not need to start debugging. If you want to view all the items on the page, you can execute an error statement in the browser, for example, changing the preceding statement:

Javascript: Alert (ABC );

Because ABC is not defined on the page, the system will automatically pop up the debugger window, where you can select the debugger and start debugging.

 

Reference: http://msdn.microsoft.com/zh-cn/dd567278.aspx