2007/12/23 Update Creative Unlimited, simple practical (JavaScript log) _javascript tips

Source: Internet
Author: User
In JavaScript development, it is possible to debug a program in the same way that alert is always used in some simple programs.
But in the complex of the usual projects, this approach has been difficult to meet, enterprise-level development needs.
For example, in an AJAX project, there is a 3000-line JS file with a variety of custom JavaScript objects.
In the process of development, it is always necessary to monitor the value or state of the custom object when the JS program executes to a certain key point.
It is difficult to determine whether the execution results are expected and if you see the values of some associated objects through alert.
The following two obvious disadvantages exist:
1. If there are n key points in the implementation of the value of all want to monitor at any time, use alert you are not enough n times to confirm, to the developers feel is very inconsistent and not intuitive, it is difficult to smooth the hidden deep problem.
2. Alert statements for debugging, must be deleted at the time of release, and when you need to debug again, you will have to recall the key points before, plus alert, difficult debugging.
After using the tool, the above two problems become solved.
In view of the above needs, I am guided by the principle of simplicity and practicality,
Write this JavaScript debugging tool yourself, all the programs are only about 300KB.
The tool mainly has the following characteristics:
1. Full pluggable thinking has no negative effect on the target program.
2. The use of simple, convenient, just to introduce a line of JS code.
After use, you may find that debugging the JS program becomes more convenient.

----------------------------------How to use---------------------------------------------//
Step 1: Jsdebugtool.zip after downloading, extract to any directory, such as £ D:\tools\JSDebugTool
Step 2: Add a line of JS code like the one below to your target program (jsp,asp,html,php, etc.), and the following are all supported.
<!--debug function does not turn on, does not show time, use relative path to introduce debuginner.file-->
<script language=javascript debug=false showtime=false src= ". /jsdebugtool/debuginner.file "></script>
<!--debug feature opens, displays time, and introduces debuginner.file--> using web paths
<script language=javascript debug=true showtime=true src= "http://localhost:8080/myproject/JSDebugTool/ Debuginner.file "></script>
<!--debug function to open, do not show time, use local absolute path to introduce debuginner.file-->
<script language=javascript src= "D:/tools/jsdebugtool/debuginner.file" ></script>
Comments
Debug=true/false
True:javascript Debug feature on, default value. (Development)
The False:javascript debug feature is turned off. (release)
The default is true when the "debug" parameter is not set.
SRC attribute can be set to (absolute path, relative path, Web path, etc.)
Debuginner.file: Using embedded mode mode
Showtime=true/false
True: Displays the current time before each debug message.
False: The current time is not displayed, only debug information is displayed.
The default is False when the "Showtime" parameter is not set.
The URL property can be the URL of the target page, such as http://www.baidu.com
-When the URL parameter is set, the innerHTML of the page to which the URL points is added to the targetpage Div


Step 3. Test code is as follows:
<!--TEST begin-->
<script>
function Test () {
var head = document.getElementsByTagName (' head '). Item (0);
Jslog (NULL, "Red");//null
Jslog (1/3, "Red");//number
Jslog (1==2, "Red");//boolean
Jslog (Test, "Blue");//function
Jslog ("Hello world!", "Red");//string
Jslog (head);//object
}
</script>
<input type= "button" value= "TEST" >
<!--TEST end-->
When the project is large, it is necessary to keep some debugging information in the program and debug it when necessary.
Therefore, it is important to be able to print key information at any time, while ensuring that there is no impact on the performance of the target script after release is an issue that must be considered.
The print interface provided by this tool is: Jslog (Msg,color);//msg: Information color: the colour of information
If you release, you want to add "Step 2" to the target program in the JS Delete, you can also refactor a method in your program, the name of random. For example:
function out (Msg,color) {
if (jslog) Jslog (Msg,color);
}
It's also possible to unify your own definitions, such as:
function Test () {
Out (null, "Red");//null
Out (1/3, "Red");//number
Out (1==2, "Red");//boolean
Out (Test, "Blue");//function
Out ("Hello world!", "Red");//string
}

But usually release when the debug switch is set to: Debug=false, do not need to delete the target program in the debugging code, the target JS program performance without any impact; When you need to debug again, just set the debug switch to: Debug=true.

----------------------------------Latest Downloads---------------------------------------//

Download (2007/12/23 update): http://www.box.net/shared/bc3s1hdkw0

----------------------------------Update Resume---------------------------------------//

2007/12/23 Update: (At present a total of 15K)
1. Unified management of internal events in Jslog. In the beta phase, leave a test "cancel Event Registration" interface-by double-clicking the console you can call the
2.debugInner page layout adjustment, so that the console in the Debuginner floating, drag, adjustable width. The top and left less than 40 in the console can be dragged.
Description: Hope to tend to simple, practical, not like bloated. Update only Debuginner in the future, no longer update debugpopup

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.