Start extjs Journey: 4. Very useful development tools

4. Useful development tools

"To do something better, you must first sharpen your tools." Good tools can always get twice the result with half the effort. This is especially true for software development. Especially for the interpreted execution script language like JavaScript, the development and Debugging Processes are very difficult and must be supported by powerful tools. In the development process, tools are most important to code editing and debugging tools. The combination of the two is the integration of development tools (IDE, however, extjs implemented with JavaScript does not seem to be supported by excellent integrated development tools. This is not a big defect of extjs, but there are still some tools that can be recommended to help develop software implemented by extjs faster and better.
 
4.1 development plug-in spket

Spket supports JavaScript, XUL/XBL, Laszlo, SVG and Yahoo! Widgets and other new products, with Code Automatic completion, syntax highlighting, Content summary and other features, can help developers efficiently create javascript programs, it can run as an independent desktop application or as an Eclipse plug-in. You can download it from its official website http://www.spket.com/. here we will introduce the installation and usage of the plug-in.

Step 1Download the latest plug-in program. The latest plug-in is spket-1.6.12.zip. After decompression, the directory structure of the plug-in is 2-5. Copy the Plugins directory and the features directory to the eclipse installation directory respectively. You can use this plug-in for eclipse3.2 and later, after you have completed the installation of the plug-in, start eclipse, and now you can start to configure spket.

Figure 2-5 spket plug-in directory structure

Step 2After eclipse is started, enter the window-> preferences option, where you can find the spket menu, which contains the relevant configurations of the plug-in. If you select the Javascript profiles item, the Javascript configuration list will appear, extjs is not supported by default. Next we will add the extjs Library to the list, as shown in Figure 2-6.

Figure 2-6 spket plug-in directory structure

Figure 2-7 set the Javascript configuration name

Step 3Click the new button on the right. In the displayed dialog box, enter the name and click OK, as shown in Figure 2-7.

Step 4Select the configuration name you just created in the list and click Add liberty on the right, as shown in Figure 2-8.

Figure 2-8 configure the Javascript configuration list

Step 5Select the extjs option in the library list that appears, and click OK, as shown in Figure 2-9.

Figure 2-9 configure the Javascript library selection configuration list

Step 6Select the extjs item in the list and click Add file on the right, as shown in 2-10.

Figure 2-10 JavaScript configuration list

Figure 2-11 select the Ext. JSB file in the file selection box

Step 7In the pop-up file selection box, select the Ext. JSB file under the extjs library file source directory, and click open, as shown in Figure 2-11.

Step 8Add Ext. the configuration options of extjs are listed in the Javascript configuration list after the JSB file. We only select ext base and everything, and then select extjs2.0 and click the default button, set extjs2.0 to the default JavaScript configuration, and click OK, as shown in Figure 2-12.

Figure 2-12 JavaScript configuration list

Step 9The installation and configuration of the spket plug-in have been completed. You can open the JS file in the spket editor to implement code prompts for extjs, as shown in Figure 2-13.

Figure 2-13 spket prompts extjs code

4.2 debugging tools
Debugging javascript programs has always been a headache for JavaScript programmers because of the lack of widely used and highly efficient debugging tools. Many JavaScript programmers still use the original "alert" Method for debugging. Despite the lack of excellent debugging tools, there are some gadgets that can help JavaScript debugging.
1. fullsource
Fullsource is a small but useful tool. The biggest difference between fullsource and view source provided by IE is that fullsource can see the content dynamically generated by pages through JavaScript. This function is very useful for debugging of components such as extjs that rely entirely on JavaScript dynamic generation. In essence, it is not difficult to see all the dynamically generated code. You only need to extract the current Dom structure tree from the inner layer. fullsource does this, I don't know why is the "View Source" of IE designed so easily?
Step 1: The downloaded fullsource package is a zip package. After unzipping, the package contains two files. Right-click the INF file and choose install from the shortcut menu, as shown in Figure 2-14.

 
Figure 2-14 fullsource Installation

Step 2: After successful installation, turn off all browsers, and then open a new browser to open the previous "helloworld" example. Right-click the browser and you will find a menu, as shown in 2-15.

 
Figure 2-15 fullsource menu

Step 3: Use the "View Source File" function to view the real source file, that is, the code shown in Code 2-1. Note: The "fullsource" function shows much more file content than the code shown in Code 2-1, which is the Code actually needed on the page shown in Figure 2-15, these codes are dynamically generated by the extjs engine. The real source code can play a major role in program debugging.
2. Microsoft Script Debugger
Microsoft Script debugger is a script debugging tool launched by Microsoft. It can debug scripts based on VBScript and JavaScript client, as well as server scripts on Microsoft IIS. Microsoft Script debugger only runs in IE browser, and does not support other browsers. Of course, we will only discuss how to use it to debug the Javascript client script.
It is very easy to install this extension. Download the installation package of this extension from the Microsoft website and then run the installation process. After installation, you must make some simple configuration before using it in IE browser to debug the script.
Step 1 check whether debugging is enabled for IE. Select Tools> Internet Options in IE, go to the advanced options page, and check whether the disable script debugging option has been deselected in the Settings area, if not, cancel it. From 2 to 16.

Step 2, cancel the "Disable script debugging" option and restart ie. In the "View" menu, a "script debugging program" menu is displayed, which has two sub-menus, open and interrupt the next statement, as shown in Figure 2-17.
You can open a Web page containing JavaScript to be debugged in IE browser, and then use the open command in the script debugging program menu to open Microsoft Script debuger, the code of the current web page is displayed, and the cursor stops on the paused line. In this step, the debugging method is similar to that of other development tools, such as breakpoint setting, single-step execution, and variable observation.