Updated on 2007/12/23 Unlimited creativity, simple and practical (javascript log)_javascript skills

In the process of JavaScript development, if you always use the alert method to debug the program, it is feasible in some simple programs.
But in the usual projects that are very complex, this method is already difficult to satisfy, and it is difficult to meet the needs of enterprise-level development. need.
For example, in an ajax project, there is a JS file with about 3,000 lines, in which there are various customized javascript objects.
During the development process, it is always necessary to monitor the value or status of the custom object when the js program reaches a certain key point.
Judge whether the execution result is as expected. If you see it through alert It is difficult to associate values ​​with certain objects.
There are the following two obvious shortcomings:
1. If there are n key points in an execution that you want to monitor at any time, using alert you will not have to click n times to confirm, which will give the developer a bad feeling It is very incoherent and unintuitive, and it is difficult to smoothly discover deeply hidden problems.
2. The alert statement used for debugging must be deleted when publishing. When you need to debug again one day, you will have to recall the previous key points and add alert respectively, and it is difficult to debug.
After using this tool, the above two problems are easily solved.
In view of the above needs, I based on the principle of simplicity and practicality,
I wrote this javascript debugging tool myself. The entire program is only about 300kb.
This tool mainly has the following features:
1. Completely pluggable and has no negative effects on the target program.
2. The method of use is simple and convenient, only one line of JS code needs to be introduced.
After using it, you may find that debugging JS programs becomes more convenient.

//----------------------------------How to use------ ---------------------------------------//
Step 1. After downloading JSDebugTool.zip, unzip it to any directory, such as: D:toolsJSDebugTool
Step 2. Add a line of JS code similar to the following to your target program (JSP, ASP, HTML, PHP, etc.), the following writing method All are supported.
debug=true/false
true : Javascript debug function is on, default value. (Development)
false : Javascript debug function is off. (Release) When the "debug" parameter is not set, the default value is true.
The src attribute can be set to (absolute path, relative path, WEB path, etc.)
debugInner.file: Use embedded mode mode showtime=true/false
true: before each debug message Display the current time.
false : Do not display the current time, only display debug information.
When the "showtime" parameter is not set, the default is false.
The url attribute can be the URL of the target page, such as http://www.baidu.com
- When the url parameter is set, it will The innerHTML of the web page pointed to by the url is added to the targetpage div


Step 3. The test code is as follows:








When the project is huge, you need to always keep some debugging information in the program and debug it when necessary.
Therefore, it is also important to be able to print out key information at any time. At the same time, ensuring that there is no impact on the execution 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: message color: color of the message
If you want to add "Step 2" to the JS in the target program during release Delete, or you can reconstruct a method in your program with a random name. For example:
function out(msg,color){
if(jslog) jslog(msg,color);
}
You can also use your own defined methods uniformly, for example:
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
}

However, generally speaking, when releasing, the debug switch is set to: debug=false. There is no need to delete the debugging code in the target program, and it has no effect on the execution performance of the target JS program. Impact; When you need to debug again, you only need to set the debug switch to: debug=true.

//--------------------- -------------Latest download---------------------------------- ----//

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

//------ --------------------------Update resume-------------------------- ------------------//

2007/12/23 Update: (Currently 15K)
1. Perform internal events in jslog Unified management. During the internal testing phase, an interface for testing "cancel event registration" is left - you can call it by double-clicking the console
2. debugInner page layout adjustment, making the console in debugInner floating, draggable, and adjustable in width. In The top and left parts of the console that are less than 40 can be dragged.
Note: I hope it can be simple and practical, and I don’t like it to be bloated. From now on, only debugInner will be updated and debugPopup will no longer be updated